【後转前要多久】# Day11 CSS - 区块元素、行内元素

为了让元素的边界格线看得更清楚，
这边统一对<body>之外的所有元素加上outline

CSS

* :not(body){
    outline: 3px orange solid;
}

display属性

display 属性是CSS中的最大利器，透过他才能兜出各式各样的版型，
但他也是大魔王之一，因为有非常多的值可以套用，也容易造成搞混

包括 block、inline、flow、flex、grid...
每种变化都可以颠覆一开始对元素的想像，
有机会再一一介绍

Display属性

区块元素 block

区块元素就是预设为display: block的标签

例如:
<h1>~<h6>
<div>、<p>、<blockquote>、<pre>
<ol>、<ul>、<li>
<form>、<table>
等等

block有区块、阻塞的意思，会贪心地尽可能占满整个版面，不论长度宽度如何都会占满一行，
多个block会由上而下、一个接一个垂直排列

block是有骨头的大男人，可对他直接设定width、height来限制他的生长范围。

区块元素

若将区块元素变成 display: inline，就能打破框架！
能排在同一行的<h1>

HTML

...
<h1>原本的标题H1</h1>
<h1>原本的标题H1</h1>
<h1>原本的标题H1</h1>

<h1 class="after">变成inline的H1</h1>
<h1 class="after">变成inline的H1</h1>
...

CSS

.after{
    display: inline;
}

inline H1

行内元素 inline

行内元素就是预设为display: inline的标签

例如:
<span>、<em>、<textarea>
<strong>、<b>、<i>
<a>、<img>
<input>、<select>
等等

行内元素最爱"ㄎㄟˋ修"了，
会与区块元素挤在同一行、也会与行内元素挤在同一行，
只会占用必要的宽度，没事不会另起新的一行。
多个inline间会由左至右、一个接一个个水平排列

由於inline没骨头、全身软趴趴的，没办法直接设定width、height
就算设定了他也站不起来，只能透过他里面的元素(儿子)来撑场面

行内元素

若将行内元素设定为display: block就能让他有骨头。
能设定成超大范围的<a>标签

HTML

...
<a href="#" class="before">原本的a标签</a>
<a href="#" class="before">原本的a标签</a>
<a href="#" class="before">原本的a标签</a>

<a href="#" class="after">变成block设定长宽的a标签</a>
<a href="#" class="after">变成block设定长宽的a标签</a>
...

CSS

.before{
    width: 200px; /* 不起作用 */
    height: 100px; /* 不起作用 */
}

.after{
    display: block;
    width: 200px;
    height: 100px;
}

block a

居然还可以在block与inline之间随意转换
HTML标签没有一开始想像的这麽死
搭配上CSS能有很多灵活运用的方法

但也会纳闷...
既然可以任意转换，为何还要区分<div>与<span>标签?

区块行内 inline-block

没看到有中文翻译，
inline-block 用英文来看的话是 noun-adj(名词-形容词)

但中文顺序好像是颠倒的，当两个名词摆在一起时：
珍珠芭乐是珍珠还是芭乐? -> 是珍珠形状的芭乐
那太阳饼是太阳还是饼? 钱包是钱还是包?

所以这大概只能翻译成 行内-区块 或者 区块行内

其实inline-block算在行内元素，只不过能设定宽高，
(inline-block里面的content会作为block呈现)

HTML

...
<span> span </span>
<span> span </span>

<span class="after"> inline-block span </span>
<span class="after"> inline-block span </span>
...

CSS

.after{
    display: inline-block;
    width: 200px;
    height: 100px;
}

inline-block

尽量要与不要的事

  • 不要使用行内元素(inline)来包住区块元素(block)
  • 不要使用<p>来包住区块元素(block)，虽然<p>本身是区块元素
  • 不要在<a>标签中再包<a>标签，虽然<a>本身是行内元素，但到底会点到哪个连结？
  • 用<span>来包 inline 与 inline-block
  • 用<div>来包 block

<<:  Day 26-Unit Test 应用於 Async Code-2 (情境及应用-6)

>>:  [Day11 - React Native] 为你的 APP 加入 icon - iOS

Python 练习

今天我们要来做个小练习，因为比较基础的语法也都交给大家了，我们已经可以用那些语法来解决一些数学问题了...

Day11 - Gem-rqrcode 或 barby 产 QR Code

前言 本篇会示范如何在 Ruby on Rails 中产 QR Code，可透过 rqrcode 或...

【Day13】[资料结构]-二元树Binary Tree

二元树(Binary Tree)是最广泛被使用的树状资料结构，简单来说即为每个节点最多只能有两个子节...

D23 - 用 Swift 和公开资讯，打造投资理财的 Apps { 台股成交量实作.3 }

在 KLineViewController 开出的 volumeDataSet 会在 parent ...

Day 3【NFT】你那边还来得及，赶快 all in Bitcoin

【前言】 在执行这个 Project 之前呢，团队成员有开一次技术会议来详述 Project 的目...