CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

分组和嵌套 

分组选择器

——————>  

嵌套选择器

能适用于选择器内部的选择器的样式

• p{ }: 为所有 p 元素指定一个样式。
• .marked{ }: 为所有 class="marked" 的元素指定一个样式。
• .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
• p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

尺寸

控制高宽

增加行间距

Display显示与Visiblity可见性

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素

• 块元素是一个元素，占用了全部宽度，在前后都是换行符【如<p> <h1> <div>】
• 内联元素只需要必要的宽度，不强制换行【如<a> <span>】

内敛元素和块元素的相互转换

li {display:inline;}　　//变为内敛

span {display:block;}   //变为块

内敛和块的特性

visibility属性

position定位

• static
• relative
• fixed
• absolute
• sticky

sticky粘性定位效果

——————> 

重叠的元素————z-index指定堆叠顺序

定位属性

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明

overflow

控制内容溢出元素框时显示的方式

添加滚动条

元素溢出元素框【显示在外面】

 float浮动

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

彼此相邻的浮动

——————>   

清除浮动

clear 属性指定元素两侧不能出现浮动元素