Day05（11.8）

Day05（11.8）

margin属性（外边距）

margin-top上外边距 margin-bottom 下外边距 margin-left左外边距 margin-right右外边距

（允许负值）

什么是margin？：用于设置盒子和盒子之间的距离

取值：px、em

百分比（相对父元素）

允许使用负值

auto浏览器自动计算

语法：

上边距：margin-top

下边距：margin-bottom

左边距：margin-left

右边距：margin-right

复合写法：

margin:20px; 上下左右都是20的外边距

margin:20px 30px; 上下外边距20、左右外边距30

margin:20px 30px 40px; 上外边距20、左右外边距30、下外边距40

margin:20px 30px 40px 50px; 上外边距20、右外边距30、下外边距40、左外边距50

让盒子居中

margin：0  auto; 上下外边距0  左右外边距自动（居中）

margin的应用：

实现已知宽度的块级盒子水平居中

padding属性（内填充 内边距）

padding-top上填充 padding-bottom下填充 padding-left左填充 padding-right右填充

定义元素边框和元素内容之间的距离

取值：px、em

百分比（相对父元素）

不允许使用负值

单边设置：语法：padding-方向

左填充：padding-left

上填充：padding-top

右填充：padding-tight

下填充：padding-bottom

复合多值写法：

padding:10px;上下左右各填充10

padding:10px 20px;上下填充10，左右填充20

padding:10px 20px 30px;上填充10，左右填充20，下填充30

padding:10px 20px 30px 40px;上填充10，右填充20，下填充30，左填充40（上右下左顺时针顺序）

盒模型

什么是盒模型？

css盒模型本质上就是一个盒子，封装周围的html元素，包括：实际内容（weight+height）+内填充（padding）+边框（border）+外间距（margin）

1. Width:设置宽度 px 百分比
2. height：设置高度

border边框

边框是围绕内容和外边距margin之间的一条或多条线

1. 边框的宽度

语法：border-width

复合写法一：

border-width:10px  四个边都是10像素边框

border-width:10px  20px  上下边框10  左右边框20

border-width:10px  20px  30px  上边框10  左右边框20  下边框30

border-width:10px  20px  30px  40px  上边框10  右边框20  下边框30  左边框40

单独设置边框的宽度：

border-top-width：上边框

border-bottom-width：下边框

border-left-width：左边框

border-right-width：右边框

1. 边框的样式

语法：border-style

取值：solid实线

dashed虚线

dotted点状线

double双实线

none无边框

1. border-color边框颜色

颜色单词：red  yellow  blue

十六进制（ps复制获取）：#008100  #fff  #000

rgb方式：rgb(0,129,0)

复合写法二：

border:宽度  样式  颜色;

例：border:10px solid red;

注意：边框会影响盒子实际大小

边框宽度、样式、颜色没有顺序要求

如果没有宽度，默认是3px

如果没有颜色，默认是黑色

如果没有样式，没有边框---必须属性

三角形：1、宽高为0

1. 设置边框，并且边框颜色为透明色
2. 确定三角形的方向，要去改变该边框的颜色
3. 取消掉该边框的对立边，设为none