CSS第三天之盒子模型

1.盒子模型

1.1看透网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本上都是盒子
2. 利用CSS设置好盒子的样式，并且将盒子摆放在合适的位置。
3. 往盒子里面装内容：网页布局的核心：利用css摆盒子。

1.2 边框（border）

border可以设置盒子得边框，边框有三个属性（粗细，样式，颜色）

属性	作用
border-width	设置边框的宽度
border-style	设置边框的样式
border-color	边框的颜色
border-collapse ：collapse	相邻的表格边框合在一起

注意：
在设置边框是会改变盒子的实际大小，因此我们在设置盒子大小是应当减去盒子边框的宽度。

1.3内边距（padding)

设置盒子的内边距，即内容和边框之间的距离

属性	作用
padding-top	设置上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距

padding简写属性，一共四个

属性	含义
padding：1px	四个边的内边距
padding: 1px 2px	上下为1px,左右为2px
padding：1px,2px,3px	上内边距为1px，左右为2px，下内边距为3px
padding:1px,2px,3px,4px	上：1px,右：2px,下：3px，左：4px

同样的内边距也会影响到盒子的实际大小，再进行设置时要多出来的内边距的大小不同的是如果盒子没有设置width/height,这是padding不会影响到盒子的大小。

1.4外边距（margin）

外边距的属性即简写属性和内边距一样

外边距的应用

margin可以将块级盒子居中，方法如下：
1.设置盒子的宽度。
2.将盒子的左右外边距设置为auto;
常见的有三种写法，效果都一样：

• margin-left :auto margin-right: auto
• margin :auto
• margin:0 auto
  这种方法是将块元素居中，行内元素或者行内块元素只需要给父元素添加：text-align:center 即可

1.5圆角边框

border-radius用来设置外边框圆角
语法：

border-radius:length;

• 参数可以是百分比形式或者数值，如果想要设置一个圆，只需要将参数设置为宽度的50%即可。
• 上面的语法是简写属性，分别为：左上角，右上角，右下角，左下角。
• 单独设置为:border-top-left-radius:表示左上角，其他类似。

1.6盒子阴影（box-shadow)

box-shadow:h-shadow,v-shadow,blur,spread,color,inset;

值	描述
h-shadow	必需有，水平阴影的位置，可以为负数
v-shadow	必须有，竖直阴影的位置，可以为负数
blur	模糊距离
spread	阴影的尺寸（注意别和blue混淆了）
color	阴影的颜色
inset	内阴影（默认为外阴影）

1.7文字阴影（text-shadow）

用法同盒子阴影，但是没有spread和inset两个值。