CSS高级操作

会使用盒子属性美化网页元素。

理解标准文档流及其组成和特点？？？？

会使用float属性布局网页并定位网页元素

会使用clear属性清除浮动。

会使用overflow进行溢出处理。

会使用position定位网页元素。

会使用z-index属性调整定位元素的堆叠次序？？？？

1.盒子模型

margin外边距 面包盒子与塑料外包装之间的距离
分别设置对象上下左右的边距
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
设置对象上下间距为0，左右自动。
margin:0 auto
【区别：】margin:auto表示横竖都居中 margin: 0 auto表示横居中，竖不居中；

设置对象上下左右的边距
margin :3px 5px 7px 4px;
设置上下为3px；左右为5px
margin :3px 5px;
设置外边距全部为8 m
argin :8px;
padding内边距
面包和面包盒之间的距离
属性同外边距

盒子模型的尺寸
通俗易懂
塑料盒的宽=左右外边距+左右边框+左右内边距+面包左右厚度
塑料盒的高=上下外边距+上下边框+上下内边距+面包上下厚度
理论
盒子实际高度=上下外边距+上下边框+上下内边距+内容高度

盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度

2.边框样式：

简写：border：solid 1px red;

border-top-style 上边框样式
border-right-style 右边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式
border-style 设置四个边框样式
border-radius 设置圆角
其中border的边框属性值：
none：无边框

solid：实线边框

dashed：虚线边框

dotted：点状边框

double：双线边框

hidden：与none相同，应用于表解决边框冲突
……

3.边框颜色：

border-top-color
border-right-color
border-bottom-color
border-left-color
border-color：red red red red;

边框的粗细使用width宽度
border-width

box-sizing属性
理解：
content-box元素内容的实际高度和宽度
（ppt上：盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框） border-box 盒子的实际高度和宽度包括元素内容、边框和内边距

4.标准文档流的组成（制定了什么占整行）

块级元素

<h1>…<h6>、<p>、<div>、<li>、<tr>		自带换行标签
列表
内联元素
<span>、<a>、<img/>、<strong>、<lable>...		没有换行标签

如果没有设置任何的浮动、定位、则按顺序加载

---

修改
display属性：控制元素的显示和隐藏 块级元素与行内元素的转变

值 说明
none 设置元素不会被显示
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline-block 行内块元素（其实就是也保持在一行 但是有块级元素之间的距离）

行内元素可能遇到的问题（着重听一下）
行内元素的间距问题
两个行内元素在一起，会出现一定的间距，即使将border、padding、
margin都设置为零也无济于事，那么怎么才能去除这些间距呢？

1.重设字体
将行内元素的
直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。

2.借助HTML注释
在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。

---

5.常见网页布局

上下结构

上中下结构

上左右下结构：1-2-1结构

上左中右下结构：1-3-1结构

涉及到的浮动问题
浮动—float属性（父类浮动，子类飘）

属性值 说明
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动
例如：

.layer01 {
	float:left;
}

清除—clear属性（只是清除浮动：控制下面的元素是不是能上来；本身定位不清除，依旧有效）

left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧
例如：
.layer04 {
clear:both;
}

使用clear扩展盒子高度【主要就是为了使用clear属性清除浮动影响【父类框带有浮动时好用】】
.clears {

clear:both;

height:0;

}

overflow属性

visible 默认值。内容不会被修剪，会呈现在盒子之外【内容全，左右齐全，多余的部分被挤出规定范围】
hidden 内容会被修剪，并且其余内容是不可见的【就是visible在盒子内的内容，不在的被剪掉了】
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容【内容全，上下滚动左右显示齐全】
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容【自行按照最好的方法处理，不剪内容】

两者的区别：

使用overflow属性扩展盒子高度减少代码量，【怎么理解？】也减少了空的HTML标签，使代码更加简洁，清晰，
从而提高了代码的可读性和网页性能

如果页面中有定位元素，并且元素超出了父级的范围，就必须使用clear属性来清除浮动来扩展盒子高度

---

6.定位在网页中的应用

position属性

属性值 说明
static 默认值，没有定位【元素的正常位置，以标准流方式显示】

relative 相对定位【设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置了
相对定位的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影
响，它只针对自身原来的位置进行偏移
】

absolute 绝对定位【使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进
行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
绝对定位的元素从标准
文档流中脱离，这意味着它们对其他元素的定位不会造成影响
】

fixed 固定定位【一个固定的位置】

例如：

h2.pos_abs
{
	position:absolute;
	left:100px;
	top:150px
}

z-index属性【重点理解如何重叠的？？，是否和position属性有关？？】
【解答：用到z-index前提是有这个的position，因为只有position属性才能出现叠加的情况发生，打破标
准文档流的组成】

调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了position属性时，z-index属性
可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方

img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

---

总结（或者说是归纳属性该什么时候用）：
盒子属性美化网页元素
float属性布局网页
使用
clear属性清除浮动
使用
overflow进行溢出处理
使用position定位网页元素
使用z-index属性调整定位元素的堆叠次序

---