03|03 第三章 盒模型解析
1、盒子模型
盒子模型是HTML是网页中一个非常重要的知识点,也是学习HTML的基础
文章图片
image.png 2.边框线border border 边框:元素边框的样式
单样式:
- border-width 大小
- border-style 样式
- border-color 颜色
复合样式:大小 类型 颜色- border :width style color
边框类型 : border-style- solid 实线
- dashed 虚线 (有兼容问题)
- dotted 点线 (有兼容问题)
- double 双边框
边框类型:- border-top 左边框
- border-right 右边框
- border-bottom 下边框
- border-left 左边框
- 去除边框: border:none ;
- =>padding会改变盒子大小
3.margin 外边距
- 英文(颜色英文单词)
- 十六进制 ( #00ff99 )
- rgb( 0-255,0-255,0-255 ) -三个值 r-red红 g-green绿 b-blue蓝
- rgba( 0-255,0-255,0-25,0-1 ) 四个值 r-red红 g-green绿 b-blue蓝 a-透明度
单样式:
- margin-top :顶部外距离
- margin-right :右边外距离
- margin-bottom :底部外距离
- margin-left :左边外距离
复合样式:- 四个值: margin :上 右 下 左
- 三个值: margin :上 左右 下
- 二个值: margin :上下 左右
- 一个值: margin : 四个方向相同的值;
盒子水平居中:
margin: auto || margin:top auto || margin:top auto bottom
- 默认文档流都是从右往左,从小往上排列的
文章图片
image.png
- 兄弟关系的第一个盒子的margin-bottom会和第二个盒子的margin:-top会重叠,谁的值大听谁的。
- 父子关系的第一个盒子的margin-top会和第二个盒子的margin:-top会重叠,谁的值大听谁的。
- 解决父子关系的垂直方向的方法:给父级加一个
overflow:hidden 或者 border-top:1px solid #000; 或者 padding-top:1px;
单样式:5.盒子模型计算公式 盒子宽度 = 左border+左padding+width+右padding +右border 盒子高度 = 上border+上padding+height+下padding+下border
- padding-top :顶部内距离
- padding-right :右边内距离
- padding-bottom :底部内距离
- padding-left :左边内距离
复合样式:- 四个值: padding :上 右 下 左
- 三个值: padding :上 左右 下
- 二个值: padding :上下 左右
- 一个值: padding : 四个方向相同的值;
=>padding会改变盒子大小
6、box-sizing 盒模型解析模式 content-box 标准盒模型(和css2一样的计算)
文章图片
image.png
【03|03 第三章 盒模型解析】宽度和高度之外绘制元素的内边距和边框 width,height外绘制padding,border,盒子大小变大
- border-box 怪异盒模型
从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
width,height内绘制padding,border,盒子大小不变
推荐阅读
- 第三章第一节|第三章第一节 从哪里开始?2
- JVM|6、JVM分代模型--老年代 的垃圾回收
- 白盒测试中的几种覆盖方法
- 目标模型_16期4组鱼鱼
- 目标检测|NCNN+Int8+YOLOv4量化模型和实时推理
- 机器学习|机器学习模型的可解释性
- R语言广义矩量法GMM和广义经验似然GEL估计ARMA、CAPM模型
- 大数据|大数据实战电商推荐系统(3)-基于隐语义模型的离线推荐模块
- 【USENIX ATC'22】支持异构GPU集群的超大规模模型的高效的分布式训练框架Whale
- css|盒子模型、文档流、定位、布局和响应式设计