边框属性
- 作用：边框就是环绕在标签宽度和高度周围的线条
- 连写(同时设置四条边的边框)格式：
- border: 边框的宽度 边框的样式 边框的颜色;
- 快捷键:
- bd+ border: 1px solid #000;
- 注意：
- 连写格式中颜色属性可以省略, 省略之后默认就是黑色
- 连写格式中样式不能省略, 省略之后就看不到边框了
- 连写格式中宽度可以省略, 省略之后还是可以看到边框
- 连写(分别设置四条边的边框)格式;
- border-top: 边框的宽度 边框的样式 边框的颜色;
- border-right: 边框的宽度 边框的样式 边框的颜色;
- border-bottom: 边框的宽度 边框的样式 边框的颜色;
- border-left: 边框的宽度 边框的样式 边框的颜色;
- 快捷键:
- bt+ border-top: 1px solid #000;
- br+
- bb+
- bl+
- 连写(分别设置四条边的边框)格式：
- border-width: 上 右 下 左;
- border-style: 上 右 下 左;
- border-color: 上 右 下 左;
- 注意：
- 这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
- 这三个属性的取值省略时的规律：
- 省略左边的时候，左边的取值和右边的一样
- 省略下边和左边的时候，左边的取值和右边的一样，下边的取值和上边一样
- 省略右下左的时候,右下左边取值和上边一样
- 非连写(方向+要素)格式：
- border-left-width: 20px;
- border-left-style: double;
- border-left-color: pink;
内边距属性
- 作用：边框和内容之间的距离就是内边距
- 格式：
- 单独设置四条边：
- padding-top: ;
- padding-right: ;
- padding-bottom: ;
- padding-left: ;
- 同时设置四条边：
- padding: 上 右 下 左;
- 注意：
- 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
- 给标签设置内边距之后, 内边距也会有背景颜色
外边距属性
- 作用：标签和标签之间的距离就是外边距
- 格式：
- 单独设置四条边
- margin-top: ;
- margin-right: ;
- margin-bottom: ;
- margin-left: ;
- 同时设置四条边:
- margin: 上 右 下 左;
- 注意:
- 外边距的那一部分是没有背景颜色的
- 这三个属性的取值省略时的规律同边框属性的规律一样
- 外边距合并现象
- 默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
盒子模型
- 什么是CSS盒模型?
- CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子
- CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
- 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型
- 盒模型宽度和高度
- 内容的宽度和高度
- 就是通过width/height属性设置的宽度和高度
- 元素的宽度和高度
- 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
- 高度 同理可证
- 元素空间的宽度和高度
- 宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
- 高度 同理可证
- 增加了padding/border之后元素的宽高也会发生变化
- 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高
box-sizing属性
- CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
- box-sizing取值
- content-box（默认）
- border-box
- 作用：增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度
盒子居中和内容居中
- margin-top问题
- 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
- 如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
- 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)
- text-align:center;和margin:0 auto;
- 区别：
- text-align: center; 是设置盒子中存储的文字/图片水平居中
- margin:0 auto;是让盒子自己水平居中
