第三课-CSS盒模型概念及企业应用规则

第三课-CSS盒模型概念及企业应用规则

一、什么是盒模型？

盒模型（英语：box moldel），是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型

二、标准盒模型的概念分析

（一）width/height（content box 内容区）

css样式：

浏览器默认给元素设置的css样式

重置css样式

body,p,h1,h2,h3,h4,h5,h6,ul,ol{margin: 0;padding: 0;}

ul,ol{list-style: none;}

auto 自动计算的

浏览器可以计算出 左右的宽度

高度不好计算

font-size: 字体的大小

color ; 字体颜色

font-weight:bold 加粗

px 像素 前端的一个单位

em 1em=字体的大小

rem html的字体大小

vw 移动端 屏幕的宽度100vw 1vw= 屏幕的宽度/100

vh 高度 1vh = 高度/100

颜色单位

单词 单词为主

十六进制 0-9 a-f 6ge 以#开头 #123456

rgb 0~255 rgb(110,222,140)

rgba 0~255 a透明

​ 色调 饱和度 亮度

HSL(360,50%,50%) 0~360

HSLA 0~360

（二）border（border box 边框区）

第一种写法

​ 宽度 属性 颜色

border: 10px solid green; 设置四个边框

第二种写法

左 上 右 下 设置四个边框

left top right bottom

border-left: 10px solid green;

border-top: 10px solid pink;

border-right: 10px solid yellow;

border-bottom: 10px solid black;

第三种写法

border: 10px solid green;

border-left: 10px solid pink;

第四种写法

border-color: black; 边框颜色

border-width: 10px; 宽度

border-style:solid; 属性

border-color: black green pink yellow;

​ 上 右 下 左

​ 上 左右 下

​ 上下 左右

​ 全部

border-width: 10px 20px;

​ 上 右 下 左

​ 上 左右 下

​ 上下 左右

​ 全部

​ 实线 虚线 圆点线 双横线

border-style:solid dashed dotted double

​ 上 右 下 左

​ 上 左右 下

​ 上下 左右

​ 全部

​ transparent 颜色透明

（三）border（border box 边框区）详解

（四）border（border box 边框区）四方向边框设置模型

（五）padding（padding box 内边距区）

padding 自身没有颜色

​ 根据元素的背景色来定

（六）标准盒模型的整体概念

三、尺寸数据详解

（一）标准盒模型的尺寸数据详解

复合属性

margin 外边距 两个盒子自己的间隙 父子元素 兄弟元素都是间隙

四、怪异盒模型差异分析

怪异盒模型使用padding border会减少宽和高

五、企业级应用规则

（一）父子元素外边距合并现象

（二）父子元素外边距合并原理

（三）父子元素外边距合并解决方案

父子元素外边距合并解决方案(给父元素加一个边框或是padding)

（四）兄弟元素外边距合并现象