个人认为这是css中最重要的知识,必须巩固巩固再巩固!!
总定义

图像:

内容区

对元素设置的width和height都是对盒子内容的大小设置
边框

边框+内容的大小=整个盒子的大小

border-color(边框颜色)属性设置

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;
以下四个属性也可以简写

例:只单独去掉右边的边框

内边距(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>
效果图如下:

1.inner的效果为将父元素box1的内容区充满,颜色为蓝色,粉色区域为内边距,也就是边框和内容区之间的区域。
2.一个盒子的可见大小=内容区+内边距+边框!!!
3.padding同时指定四个方向的内边距规则和border属性一样。
外边距(margin)

margin的左边和上边是移动自身,右边和下边是使自己和别的对象保持距离。margin的赋值规则和border一样。
水平方向的布局

意思就是说子元素的长宽是由外边距、边框、内边距、内容组合起来的,加起来必须等于父元素的长宽。如果等式不成立就是过度约束,等式会自动调整。如果其他的值都是默认的情况下,就自动调节外边距,右边或者下面(我国的书写习惯是自左向右)
一般来说,过度约束都会去调节margin-right,所以平时也不用过多调节margin-right,因为浏览器会自动调节。如果相加的数值大于父元素,那么margin-right为负值。

以上意思为如果等式的七个值没有auto,就自动调节margin-right。可以设置的auto的值有三个,如果只有一个auto,那就调节auto的值,如果有多个auto,有宽度就调节宽度外边距为0,没宽度就平均分。
我们可以利用这一特性使一个元素在父元素中水平居中。

这就表明一个元素宽度为100px,margin的0表示上下的外边距为0,左右的外边距是auto,也就是居中,所以这个元素就已经水平居中了。
垂直方向的布局
要注意的点:父元素如果没有设置长宽,其大小是由子元素撑开的。
overflow的具体数值如下:

overflow是用来处理溢出的子元素!
overflow-x:处理水平方向。
overflow-y:处理垂直方向。
外边距的折叠

要注意的是父子元素外边距的重叠,子元素会传递给父元素,但是有可能会出现以下这种情况

在调节子元素的外边距时,父元素也被调节了,因为这时候父元素和子元素的上外边距是一样的,现在如果要修改有两种方法:
1.(修改父元素的padding)注意此方法要调节父元素的高度

2.(给父元素加边框)注意此方法要调节外边距的大小

行内元素的盒子模型

要注意的是水平的margin就算相同数值也是累加的。

display:将元素转换成指定的类型,要注意的是在display中,设置none之后,网页中不会留这个元素的位置。

visibility:要注意的是visibility设置hidden后,页面还会保留这个元素的位置,只是元素不显示而已。
浏览器的默认样式

像以下这种情况,并没有设置样式,但是浏览器自带了样式,边距之类的。

解决方法有两个:

2.引入已有的css样式,有两种

用的比较多的就是reset.css
网友评论