CSS的布局和定位

CSS的布局和定位

盒子模型

盒子模型：决定元素是什么样的，包括页面元素的大小，边框，和其他元素的距离等。
定位机制：文档流，浮动定位，层定位三种，决定元素放在哪。
盒子模型：
盒子模型的组成：content（内容）；height（高度）；width（宽度）；组成。

一个盒子的实际宽度、高度：content+padding+border+margin。
overflow属性
当盒子的内容溢出边界的时候可以使用该属性决定超出的部分是否显示。
当overflow为hidden的时候是隐藏超出部分，scroll为显示滚动条，auto为如果有产出部分则显示滚动条。

padding属性和margin属性
首先应该对浏览器默认的属性清零，代码如下：
*{
margin=0;
padding=0;
}
设置的时候是按上右下左的顺序。
margin的合并：垂直方向合并，水平方向不合并。谁高合并谁。
使用div标签制作的盒子，会有一个自动换行的效果哦
水平居中的设定：
图片和文字：text-align：center。
盒子div的水平居中：margin：0 auto；浏览器自动计算。第一个值是上下册的，可以随便设定，但第二个值是auto，会自动的计算的。

CSS的定位机制

1：文档流定位属性：flow。默认的
2：浮动流定位属性：float；一个大盒子里拆成若干列的时候。
3：层定位属性：layer：前后网页的元素像图层一样前后能够重叠在一起，上面的可以遮住下面的。
文档流定位：
元素的分类：block类型的每个元素都要独占一行，元素的height，width，margin，padding都可以设置。包括有：div元素，p元素等
将元素显示为black属性：display：block即可。
inline类型的元素：不用单独占一行，width，height不可以进行设置，width就是它包含的文字和图片的宽度，不可改变。常见的有< span >,< a>等
将其他类型的元素转化为inline类型的元素：display:inline;
inline-block类型的标签：
特点不单独占用一行，而且元素的属性可以进行设置哈。
常见的有< img>标签
将其他类型的转为inline-black类型的标签：
display:inline-block;就可以了。
浮动定位




![在这里插入图片描述](https://img-blog.csdnimg.cn/f35583d89df04736bec6f26ac9b2bbc7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5b2S6LevJg==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

float属性即可。
clear属性可以清除浮动。

层定位
当网页的元素可以叠加在另一个元素上面的时候
position属性，决定了相对于谁定位
fixed:固定定位（以浏览器窗口来进行定位）
relative:相对定位直接父元素
absolute:绝对定位
表示现在要相对于谁来进行定位。
z-index属性：最大值在上面。取值大的会遮挡取值小的。

css 的新的特新和浏览器的支持度

1：可以做一个文本的阴影；
2：实现鼠标悬停的效果；
3：文本的分栏分列的设定；
4：盒子的边框，倾斜，阴影的效果；