盒子模型

笔记

​ border 边框

​ content 内容

​ padding 内边距

​ margin 外边距

border 边框

边框有三部分组成：边框宽度，边框样式，边框颜色

border-width

定义边框粗细，单位是px

border-width: 5px;

border-style

边框的样式

属性值：solid 实线 dashed 虚线 dotted 点线

border-style: dotted;

border-color

边框的颜色

border-color: red;

边框复合写法

可以指定上下左右边框

 div {
 
 	border-top: 5px soild red;
 	border-bottom: 1px dashed black;
 }

使用也遵循层叠性

合并相邻边框

border-collapse: collapse;

表示相邻边框合并在一起

盒子实际大小

div的宽度高度 + 边框的宽度

padding 内边距

属性	作用
top	上内边距
bottom	下内边距
left	左内边距
right	右内边距

复合写法

值的个数	意思
padding: 5px;	1个值，代表上下左右都有5px内边距
padding: 5px 10px;	2个值，代表上下内边距是5px 左右内边距是10px
padding: 5px 10px 20 px	3个值，代表上内边距5px 左右内边距是10px 下边距是20px
padding: 5px 10px 15px 20 px	4个值，上 右 下 左 内边距分别是：5px 10px 15px 20px

盒子实际大小

内边距也会影响盒子的大小

div实际的宽度高度+上下左右内边距

注意：

如果盒子没有指定宽度自适应父级容器padding不会撑大盒子

注意 声明了 width: 100% 不行

宽度会自适应父级容器的宽度，高度会占据内外边距的高度

margin 外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性	左右
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

复合写法与内边距一致

盒子水平居中

div {
	margin: 0 auto;
}

外边距可以让块级盒子水平居中，但是必须满足两个条件

• 盒子必须指定了宽度
• 盒子的左右外边距都设置为auto

对于行内元素或行内块元素

给父级块元素 添加 text-align: ceneter 可以让元素水平居中对齐

外边距合并

相邻块元素垂直外边距的合并

取两个值中的较大者这种现象称为相邻块元素垂直外边距的合并

解决方案：尽量只给一个盒子添加margin值

注意：水平的盒子外边距不会合并

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值

解决方案：

1. 可以为父元素定义上边框

   div {
   	border: 1px soild #000;
   }
   

2. 可以为父元素定义上内边距

   div {
    	padding: 1px;
   }
   

3. 可以为父元素加上 overflow: hidden; 属性

   div {
     overflow: hidden;
   }
   

清除内外边距

 * {
  	padding: 0;
    margin: 0;
 }

CSS3新增

圆角边框

border-radius: length

原理 是根据长度length 作为圆的半径画一个圆

圆和边框的两个交点之间的弧作为圆角边框 半径越大 弧度越大

常用写法

画圆 前提是正方形 半径是宽度的一半

div {
	width: 200px;
	height: 200px;
	border-radius: 50% | 100px;
}

圆角矩形 半径是高度的一半

div {
	width: 300px;
	height: 200px;
	border-radius: 50% | 100px;
}

也可以分开写 例

border-top-left

border-bottom-right

盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset/默认outset	可选。将外部阴影改为内部阴影。

配合伪类标签

文字阴影

text-shadow

值	描述
h-shawdow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊的距离。
color	可选。阴影的颜色。