第六章

Posted 2020-11-02 ww张炜啊

盒子模型

1.盒子（box）模型
内容（content）、填充（padding）、边框（border）、边界（margin）
2.不同部分的说明
Content（内容）：盒子中的内容，显示文本或图片
Padding（内边距）：清除内容周围的区域，内边距的透明度
Border（边框）：围绕在外边距和内容的边距
Margin（外边距）：清除边框外的区域，边外距是透明的
3.Border边框
属性：
①color：颜色
②width：粗细
③style：样式
↓
(1)border-color：边框的颜色
①一个颜色:四个边框一个色
②两个颜色:上下/左右
③三个颜色:上/左右/下
④四个颜色:上/右/下/左

语法:
border-top-color：上边框颜色
border-right-color：右边框颜色
border-bottom-color：下边框颜色
border-left-color：左边框颜色

(2)border-width:粗细
Thin:设置细边框
Mediue:默认值,中边框
Thick:粗
px:像素值→自定义颜色

语法:
border-top-width：上边框粗细
border-right-width：右边框粗细
border-bottom-width：下边框粗细
border-left-width：左边框粗细

(3)border-style:边框样式
*01.none:定义无边框
*02.hidden:与none相同,不过应用表时除外,hidden用于解决边框冲突问题
03.dotted:定义点状边框
04.dashed:定义虚线
05.solid:定义实线
06.double:定义双线,定义的宽度等于border-width的值
07.groove:定义3D凹槽边框,效果取决于border-color的值
08.ridge:定义3D垄状边框,效果取决于border-color的值(插入)
09.inset:定义 3D inset 边框。其效果取决于 border-color 的值。()
010.outset:定义 3D outset 边框。其效果取决于 border-color 的值。
011.inherit:规定应该从父元素继承边框样式。

语法:
border-top-style：上边框样式
border-right-style：右边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式

4.margin(外边距):位于盒子的外边框,指与其他盒子间的间距,元素与元素之间的间距

(1)margin：边框的值
①一个:四个边框一个
②两个:上下/左右
③三个:上/左右/下
④四个:上/右/下/左

语法:
margin-top：上边框样式
margin-right：右边框样式
margin-bottom：下边框样式
margin-left：左边框样式

5.padding(内边距):用于控制内容与边距之间的距离

(1)padding：边框的值
①一个:四个边框一个
②两个:上下/左右
③三个:上/左右/下
④四个:上/右/下/左

语法:
padding-top：上边框样式
padding-right：右边框样式
padding-bottom：下边框样式
padding-left：左边框样式

6.盒子尺寸
内盒的总尺寸=border+padding+内容的高和宽
外盒的总尺寸=border+padding+margin+内容的高和宽

7.Box-sizing(拯救式布局)
语法:
box-sizing:
content-box:默认值,盒子的宽度和高度
border+padding+margin+宽度/高度
border-box:指定宽度和高度(最小、最大属性)
lnherit:指定box-sizing属性的值,应用父类
8.圆角边框

语法:
height:50px;
width:50px;
background-color:#00F;
*border-radius:10px 20px 30px 4px;

9.盒子阴影
语法:
box-shadow:
inset
x-offset
y-offset
blur-radiue
color