理解盒模型
盒子的分类
不同元素产生不同的盒子类型可能不同,一个元素产生什么样的盒子取决于css的display属性
- 属性:display
- 是否能继承:否
- 默认值:inline
盒子的组成
- margin:外边距(与其他的盒子的距离)
- border:边距
- padding:内边距(边框与内容之间的距离)
- cotent:内容(内容的宽度与高度)
margin
表示边框和相邻盒子的距离分为上(top)右(right)下(bottom)左(left)四个方向
>
> div{
> margin-top : 10px ;
> }
margin-top 上外边距 / 不可继承 / 默认值:0px
- margin有1个数值:上下左右
- margin有2个数值:上下 / 左右
- margin有3个数值:上 / 左右 / 下
- margin有4个数值:上 / 右 / 左 / 下
border 边框
分割内部和外部的界限,上(top)右(right)下(bottom)左(left)。
- 上边框的样式
> border-top-style
> 不可继承 ;默认none
> solid 实线 / dashed 虚线 / dotted 点阵 / double 双实线
- 上边框的厚度
> border-top-width
> 默认值 medium / 一般用px ;em
- 上边框的颜色
> border-top-color
缩写 :border-top (厚度 样式 颜色)
padding
表示边框和内容盒子的距离分为上(top)右(right)下(bottom)左(left)四个方向
>
> div{
> padding-top : 10px ;
> }
padding-top 上外边距 / 不可继承 / 默认值:0px
- padding有1个数值:上下左右
- padding有2个数值:上下 / 左右
- padding有3个数值:上 / 左右 / 下
- padding有4个数值:上 / 右 / 左 / 下
content
width
height
子盒子
边框盒 border-box 由border,padding,content 组成
1. 浏览器调试时,页面中显示的页面尺寸
2. 元素的背景,默认覆盖边框盒(元素的背景色,从边框盒开始渲染)
3. background-clip 设置背景色的渲染区域
填充盒子 由padding ,content 组成
1. 溢出overflow 指填充盒的溢出
内容盒子 由content组成
outline 不占像素,但无样式。
【推荐】中国电信天翼云云端翼购节,2核2G云服务器一口价38元/年
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步