背景颜色
- 如何设置标签的背景颜色?
- 在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的
- 取值:rgb、具体单词、rgba、十六进制
背景图片
- 如何设置背景图片?
- 在CSS中有一个叫做background-image: url();的属性, 就是专门用于设置背景图片的
- 注意点:
- 图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
- 如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
- 如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
背景平铺属性
- 如何控制背景图片的平铺方式?
- 在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的
- 取值:
- repeat 默认, 在水平和垂直都需要平铺
- no-repeat 在水平和垂直都不需要平铺
- repeat-x 只在水平方向平铺
- repeat-y 只在垂直方向平铺
- 应用场景:
边框就是环绕在标签宽度和高度周围的线条
边框属性
- 边框就是环绕在标签宽度和高度周围的线条
边框属性的格式:
- 连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色; - 注意点:
连写格式中颜色属性可以省略, 省略之后默认就是黑色
连写格式中样式不能省略, 省略之后就看不到边框了
连写格式中宽度可以省略, 省略之后还是可以看到边框
连写(分别设置四条边的边框)
- border-top: 边框的宽度 边框的样式 边框的颜色;
- border-right: 边框的宽度 边框的样式 边框的颜色;
- border-bottom: 边框的宽度 边框的样式 边框的颜色;
- border-left: 边框的宽度 边框的样式 边框的颜色;
连写(分别设置四条边的边框)
- 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中所有的标签都是盒子
- 在HTML中所有的标签都可以设置
盒子模型宽度和高度
- 内容的宽度和高度
就是通过width/height属性设置的宽度和高度
元素的宽度和高度
- 宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
清空默认边距
为什么要清空默认边距(外边距和内边距)
- 在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距
box-sizing属性
- CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
- box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
- 和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
box-sizing：border-box；
元素的宽高 = width/height的宽高
注意点:
- 如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
- 如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
- 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
- margin本质上是用于控制兄弟关系之间的间隙的
- 注意点:
1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效
