一. 边框
变宽就是围绕在标签宽度和高度周围的线条。
格式:
1.1 连写(同时设置四条边的边框)
border:边框的宽度 边框的样式 边框的颜色;
1.2 连写(分别设置四条边的边框)
border-top:边框的宽度 边框的样式 边框的颜色;
border-left:边框的宽度 边框的样式 边框的颜色;
border-right:边框的宽度 边框的样式 边框的颜色;
border-bottom:边框的宽度 边框的样式 边框的颜色;
边框样式:不用记忆,文档查询即可。
1.3 连写(分别设置四条边的边框)
border-width:上 右 下 左;
border-style:上 右 下 左;
border-color:上 右 下 左;
1.4 非连写
border-top-width:
border-top-style:
border-top-color:
.................................
二. 内边距
1. 定义:边框和内容之间的距离
2. 格式
2.1 非连写
padding-top:
padding-left:
padding-right:
padding-bottom:
2.2 连写
padding: 上 右 下 左;
3.注意点
1. 设置完内边距之后,标签占有的高度和宽度会发生变化;
2. 内边距也会有背景颜色。
三、 外边距
1. 定义 标签和标签之间的距离,就是外边距。
2. 格式:
2.1 非连写:
margin-top:
margin-right:
margin-bottom:
margin-left:
2.2 连写
margin: 上 右 下 左;
注意点:
1. 在默认布局的竖直方向上,外边距是不会叠加的,出现的是合并现象,谁大谁牛逼。
四、盒模式
1.什么是CSS盒子模式?
CSS盒子模型仅仅只是一种形象的比喻,HTML中每一个标签都是一个盒子。
结论:
1. 在HTML中所有的标签都可以设置宽度、高度、边框、内边距、外边距。
2. 宽度和高度
2.1 内容的宽度和高度
通过标签的width/height属性设置的宽度和高度。
2.2 元素的宽度和高度
宽度:左边框+左内边距+width+右内边距+右边框
高度: 同理可证。
2.3 元素空间的宽度和高度
宽度:左外边距+元素宽度+右外边距
高度:同理可证。
3. box-sizing
1. 作用:CSS3中新增了一个box-sizing属性,这个属性可以保证我们给盒子新增padding和border之后,盒子元素的宽度和高度不变。
和之前学习的原理一样,如果在增加了padding和border之后想要保证盒子元素的宽高不变那么就要减去一部分内容的宽高。
2. 格式:
box-sizing:值;
3. 取值:
1. content-box
元素的宽高 = 边框 + 内边距 + 内容
2. border-box
元素的宽高 = width/height属性。
注意点:
1. 如果两个盒子是嵌套关系,那么设置了里面盒子的外边距,外面盒子一样会顶下来;
2. 如果外面盒子不想被顶下来,那么只要给外边盒子添加边框属性就行;
3. 在企业开发中,一般情况下如果需要控制嵌套关系盒子之间的距离,那么优先考虑padding,其次margin。
margin本质上是用来控制兄弟之间的间隙的,不是用来控制父子之间间隙的。
4. 在嵌套关系的盒子中我们可以使用margin:0 auto;的方式来让里面盒子在外面盒子中水平居中。
5. margin:0 auto;只对水平方向有效,对垂直方向无效。
4. text-align:center; 和 margin:0 auto;的区别
text-align:center作用:设置盒子中存储的文字和图片水平居中
margin:0 auto;让盒子自己水平居中。