个人认为这是css中最重要的知识，必须巩固巩固再巩固！！
总定义
image.png
图像：
image.png
内容区
image.png
对元素设置的width和height都是对盒子内容的大小设置
边框
image.png
边框+内容的大小=整个盒子的大小
image.png
border-color(边框颜色)属性设置
image.png
border-width（边框的粗细）常用属性值
(1) .thin:细
(2) .medium：默认值
(3) .thick：精
(4) .像素值
border-style（边框类型）的常用属性值
(1) .none
(2) .hidden
(3) .dotted
(4) .dashed
(5) .solid
(6) .double
border简写（常用）
同时设置边框的颜色、粗细和样式
注意：这三个属性没有先后顺序，建议的顺序：粗细、颜色和样式
例：border：#000 10px solid；
以下四个属性也可以简写
image.png
例：只单独去掉右边的边框
image.png
内边距（padding）
表示边框和内容之间的距离
<title>111</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: pink;
border: 10px red solid;
padding-top: 50px;
}
.inner{
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner"></div>
</div>
</body>
image.png
1.inner的效果为将父元素box1的内容区充满，颜色为蓝色，粉色区域为内边距，也就是边框和内容区之间的区域。
2.一个盒子的可见大小=内容区+内边距+边框！！！
3.padding同时指定四个方向的内边距规则和border属性一样。
外边距（margin）
image.png
margin的左边和上边是移动自身，右边和下边是使自己和别的对象保持距离。margin的赋值规则和border一样。
水平方向的布局
image.png
意思就是说子元素的长宽是由外边距、边框、内边距、内容组合起来的，加起来必须等于父元素的长宽。如果等式不成立就是过度约束，等式会自动调整。如果其他的值都是默认的情况下，就自动调节外边距，右边或者下面（我国的书写习惯是自左向右）
一般来说，过度约束都会去调节margin-right，所以平时也不用过多调节margin-right，因为浏览器会自动调节。如果相加的数值大于父元素，那么margin-right为负值。
image.png
以上意思为如果等式的七个值没有auto，就自动调节margin-right。可以设置的auto的值有三个，如果只有一个auto，那就调节auto的值，如果有多个auto，有宽度就调节宽度外边距为0，没宽度就平均分。
我们可以利用这一特性使一个元素在父元素中水平居中。
image.png
这就表明一个元素宽度为100px，margin的0表示上下的外边距为0，左右的外边距是auto，也就是居中，所以这个元素就已经水平居中了。
垂直方向的布局
要注意的点：父元素如果没有设置长宽，其大小是由子元素撑开的。
overflow的具体数值如下：
image.png
overflow是用来处理溢出的子元素！
overflow-x：处理水平方向。
overflow-y：处理垂直方向。
外边距的折叠
image.png
要注意的是父子元素外边距的重叠，子元素会传递给父元素，但是有可能会出现以下这种情况
image.png
在调节子元素的外边距时，父元素也被调节了，因为这时候父元素和子元素的上外边距是一样的，现在如果要修改有两种方法：
1.（修改父元素的padding）注意此方法要调节父元素的高度
image.png
2.（给父元素加边框）注意此方法要调节外边距的大小
image.png
行内元素的盒子模型
image.png
要注意的是水平的margin就算相同数值也是累加的。
image.png
display：将元素转换成指定的类型，要注意的是在display中，设置none之后，网页中不会留这个元素的位置。
image.png
visibility：要注意的是visibility设置hidden后，页面还会保留这个元素的位置，只是元素不显示而已。
浏览器的默认样式
image.png
像以下这种情况，并没有设置样式，但是浏览器自带了样式，边距之类的。
image.png
解决方法有两个：
image.png
2.引入已有的css样式，有两种
image.png
用的比较多的就是reset.css
网友评论