4-21 嵌套選擇器、塊級元素和內聯元素、光標、佈局-overflow

時間 2019-12-04

標籤嵌套選擇器元素內聯光標佈局 overflow 简体版

原文原文鏈接

一、嵌套選擇器瀏覽器

p{ }: 爲全部 p 元素指定一個樣式。（默認，，也就是說能夠被改變樣式）
.marked{ }: 爲全部 class="marked" 的元素指定一個樣式。
.marked p{ }: 爲全部 class="marked" 元素內的 p 元素指定一個樣式。（區別於第一種，必須有class屬性地址<div class="marked"></div>
p.marked{ }: 爲全部 class="marked" 的 p 元素指定一個樣式。（<p class="marked">帶下劃線的 p 段落。</p>）

1 <p>這個段落是藍色文本，居中對齊。</p>
2 <div class="marked">
3 <p>這個段落不是藍色文本。</p>
4 </div>
5 <p>全部 class="marked"元素內的 p 元素指定一個樣式，但有不一樣的文本顏色。</p>
6     
7 <p class="marked">帶下劃線的 p 段落。</p>

二、塊級元素和內聯元素app

塊級元素(block)特性：ssh

老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

內聯元素(inline)特性：佈局

和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是裏面文字或圖片的大小;

塊級元素主要有：spa

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

內聯元素主要有：指針

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可變元素(根據上下文關係肯定該元素是塊元素仍是內聯元素)：code

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中塊級、內聯元素的應用：orm

利用CSS咱們能夠擺脫上面表格裏HTML標籤歸類的限制，自由地在不一樣標籤/元素上應用咱們須要的屬性。blog

主要用的CSS樣式有如下三個：繼承

display:block -- 顯示爲塊級元素
display:inline -- 顯示爲內聯元素
display:inline-block -- 顯示爲內聯塊元素，表現爲同行顯示（內聯元素）並可修改寬高內外邊距等屬性（塊級元素）

咱們常將<ul>元素加上display:inline-block樣式，本來垂直的列表就能夠水平顯示了。

三、光標

 1 <body>
 2 <p>請把鼠標移動到單詞上，能夠看到鼠標指針發生變化：</p>
 3 <span style="cursor:auto">auto</span><br>
 4 <span style="cursor:crosshair">crosshair</span><br>
 5 <span style="cursor:default">default</span><br>
 6 <span style="cursor:e-resize">e-resize</span><br>
 7 <span style="cursor:help">help</span><br>
 8 <span style="cursor:move">move</span><br>
 9 <span style="cursor:n-resize">n-resize</span><br>
10 <span style="cursor:ne-resize">ne-resize</span><br>
11 <span style="cursor:nw-resize">nw-resize</span><br>
12 <span style="cursor:pointer">pointer</span><br>
13 <span style="cursor:progress">progress</span><br>
14 <span style="cursor:s-resize">s-resize</span><br>
15 <span style="cursor:se-resize">se-resize</span><br>
16 <span style="cursor:sw-resize">sw-resize</span><br>
17 <span style="cursor:text">text</span><br>
18 <span style="cursor:w-resize">w-resize</span><br>
19 <span style="cursor:wait">wait</span><br>
20 </body>

四、佈局-overflow

CSS overflow 屬性能夠控制內容溢出元素框時在對應的元素區間內添加滾動條。

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

4-21 嵌套選擇器 、塊級元素和內聯元素、光標、佈局-overflow

4-21 嵌套選擇器、塊級元素和內聯元素、光標、佈局-overflow