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