css--盒子模型

页面布局学习的三大核心：盒子模型、浮动和定位。学好盒子模型对我们页面布局非常有利

网页布局过程：1、准备好相应的盒子box

2、利用css设置好盒子样式，摆到相应位置

3、往盒子里装内容

盒子模型组成

一、边框（border）

border可以设置元素的边框，边框由边框粗细，边框样式和边框颜色三部分组成。

border-width ：边框粗细单位是px

border-style：边框样式（solid实线 dashed虚线  dotted点线）

border-color：边框颜色

边框简写：border：1px solid red;    没有顺序

分开写：border-top:1px solid red; 

border-collapse合并相邻边框。

语法：border-collapse：coollapse;

边框会影响盒子的大小

二、内边距（padding）

padding属性设置内边距，边框与内容之间的距离

padding-left ：左边距

padding-right：右边距

padding-top：上边距

padding-bottom：下边距

简写：padding：5px;一个值，上下左右都有5像素内边距

padding：5px  10px；两个值，上下内边距5px，左右内边距10px

padding：5px  10px  20px;三个值，上内边距5像素，左右内边距10px，下边距20px

padding：5px 10px 20px 30px ;四个值，上5，右10，下20，左30  顺时针

当我们给盒子指定padding值后，会有两个变化：

1、内容和边框有了距离

2、在盒子指定宽高后，padding影响了盒子原来的大小（指定内边距会撑大盒子）

解决方案：用width/height减去多出来的内边距大小即可

三、外边距（margin）

margin属性设置外边距，即盒子与盒子之间的距离

margin-left;左外边距

margin-right;右外边距

margin-top;上外边距

margin-bottom;下外边距

maagin简写方式代表意义与padding一样（略）

margin的应用：

外边距可以让盒子水平居中，但必须满足两个条件：

1、盒子必须指定了宽度（width）

2、盒子左右外边距都为auto

常见的写法有：

1、margin-left：auto；  margin-right：auto；

2、nargin：auto;

3、margin：0 auto；（常用）

四、清除内外边距

网页元素很多都有默认的内外边框，而我们第一件事要清除内外边框

* {
 padding：0；清除内边距
margin：0；清除外边距
}

五、圆角边框

border-radius属性设置元素的外边框圆角。

语法：border-radius：length；

   参数值为数值或百分比

正方形设置成圆：把数值修改为高度或宽度的一半

该属性为简写属性，四个值，分别是左上角，右上角，右下角，左下角

五、盒子阴影

box-shadow属性为盒子阴影。（盒子阴影不占用盒子空间，不影响其他盒子排列）

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

六、文字阴影

text-shadow属性为文字阴影。

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。