盒子模型 - 内容相关样式
- width : 设置 盒子内容 宽度 、 支持 px, 百分比等单位 （行内元素无法设置宽）
- height : 设置 盒子内容 高度 、 支持 px , 百分比等单位 （行内元素无法设置高）
- box-sizing:
- border-box ： width 和 height 影响的盒子的大小，盒子内容的大小 = 盒子大小（width / height） - 边框 - 内边距
- content-box : width 和 height 影响盒子内容的大小， 盒子大小 = width / height + 边框 + 边框
- display:
- block : 设置元素为 块级元素
- inline : 设置元素为 行内元素
- inline-block : 设置元素为 行内块元素
- none : 隐藏元素， 并释放空间
- visibility ： 设置元素是否可见
- visible : 元素可见，默认值
- hidden : 隐藏元素、空间不释放
- opacity : 设置 盒子 透明度 、值范围是 0 ~ 1 、支持小数。
- 0 ： 完全透明， 内容看不见， 空间还在
- 1 : 不透明
盒子模型 - 边框
- border-top : 设置 上边框样式， 每一个样式由3部分组成、 分别是 粗细 、 风格、颜色
- border-top-width : 设置 边框粗细
- border-top-style: style 的值 参考 text-decaration 线条的值
- boder-top-color : 设置 边框颜色
- border-left : 设置 左边框
- border-right : 设置右边框
- border-bottom : 设置 底边框
- border : 设置 四个边框的信息，是 border-top , border-left, border-right, border-bottom 的简写 。
盒子模型 - 边框弧度
- border-radius
css
border-radius: 5px; /* 四个角弧度均为 5px*/
border-radius: 5px 10px; /*左上、右下 5px , 右上、左下 10px*/
border-radius: 5px 10px 20px; /*左上 5px，右下 20px, 右上 左下 10px*/
border-radius: 5px 10px 20px 30px; /*从左上角开始，顺时针赋值*/盒子模型 - 内边距
内边距 padding : 盒子 内边框 到 内容之间的 距离 ，内边距不能使用 负数。 在标准盒子模式下，填充内边距可以增加盒子大小。
- padding-left : 设置 左侧内边距
- padding-right : 设置右侧内边距
- padding-top : 设置顶部内边距
- padding-buttom : 设置底部内边距
- padding: 可以设置四个方位的内边距
css
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;盒子模型 - 外边距
外边距 margin : 盒子 外边框 到 其他元素 之间的距离 。 外边距可以使用 负数。
margin-top , margin-bottom 指的是 盒子外边距 到 另一个元素 外边框 距离 。margin-left, margin-right 指的是 盒子 外边距 到另一个元素 的 外边距 记录
顶部盒子的 底部外边距 和 底部盒子的 顶部外边距 之间的距离 = 两个 盒子的 最大外边距
左边盒子 的 右外边距 和 右边盒子的 左外边距 之间的 距离 = 两个 盒子的 外边距 之和 。
盒子模型 - 背景
-
background-color : 设置背景颜色
-
background-image : 设置背景图片
-
background-repeat : 设置背景图片是否允许重复
- repeat (默认值) x, y 轴 均可能重复
- repeat-x : x 轴重复
- repeat-y : y 轴重复
- no-repeat : 不重复 （常用）
-
background-position : 背景图片 相对原点 的偏移
- 20px 30px : 相对 x 轴 偏移 20像素、 y轴 偏移 30像素 （支持负数、可以实现雪碧图切图效果）
- x 轴支持 left, right , center , y 轴支持 top , bottom, center (背景图相对于盒子的位置)
-
background-size : 背景图片大小
- 像素 ： 设置 背景图片的 大小
- 百分比 ： 相对于 盒子大小、计算背景图片的大小
-
background-origin : 设置背景图片填充的位置
- padding-box : (默认值) 以内边距左上角为原点 填充图片
- border-box : 以 边框 左上角 为原点 填充图片
- content-box : 以内容左上角 为 原点填充图片
-
background-attachment : 设置背景图的滚动策略
- scroll (默认值) ： 背景图 和 盒子 相对不变、会随滚动条的滚动而进行滚动
- fixed : 背景图 在 盒子可视区 的情况中， 会相对浏览器位置不变。 不会随滚动条滚动而滚动。
-
background : 是上述所有样式的写法 ，推荐的写法是
css/* 0 0 代表 background-position , 120px 120px 代表背景图片的大小 */ background : #f00 url('./xxx/a.jpg') no-repeat border-box fixed 0 0 / 120px 120px ; -
outline : 外轮廓
- outline-width : 设置外轮廓线条宽度
- outline-style : 设置外轮廓线条风格
- outline-color ：设置外轮廓线条颜色