CSS笔记2（盒子模型div，元素布局，行内元素的盒模型，轮廓和圆角）

一、盒子模型div

1、每一个盒子都由几个部分组成
（1）内容区

元素中所的子元素和文本内容都在内容区中排列；
内容区的大小由width与height两个属性来设置；
width设置内容区宽度
height设置内容区高度
（2）边框（盒子边缘）

边框的大小会影响整个盒子的大小;
三个样式：(1)边框宽度：border-width
（2）边框颜色：border-color
（3）边框样式：border-style

！！！border简写属性（无顺序要求）

与border用法一致

（3）内边距（padding）

内容区和边框之间的距离是内边距；
四个方向内边距：padding-top
padding-right
padding-left
padding-bottom
内边距会影响到盒子大小；
背景颜色会延申到内边距上

（4）外边距（margin）

外边距不会影响盒子可见框的大小，但会影响盒子的位置；

二、元素布局

1、水平布局
（1）元素在父元素水平方向位置由以下几个元素决定

（2）一个元素在其父元素中，水平布局要满足以下等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素在内容区的宽度

！！！若相加不成立则成为过渡约束，等式会自动调整

调整的情况：

2、垂直布局
（1）子元素是在父元素的内容区排列的，若子元素的大小超过了父元素，则子元素会从父元素中溢出

使用overflow属性来处理溢出情况：

3、外边距的折叠
（1）垂直外边距的折叠

• 相邻的垂直方向外边距会发生重叠现象

两种情况

三、行内元素的盒模型

1.行内元素不支持设置宽度和高度

• 可以设置padding，垂直方向的padding不会影响页面的布局
• 可以设置border，垂直方向的border不会影响页面的布局
• 可以设置margin，垂直方向的margin不会影响页面的布局

2、改变元素显示的类型的属性display

可选值：inline–将元素设置成行内元素
block–将元素设置成块元素
inline-block–将元素设置成行内块元素（既可以设置宽度和高度又不会独占一行）
table–将元素设置成一个表格
none–元素不在页面中显示

3、设置元素显示状态的属性visibility

可选值：visible–在页面中正常显示
hidden–在页面中隐藏，但依旧占据位置

四、轮廓和圆角

1、box-shadow–用来设置元素的阴影效果

• 第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值相反
• 第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移动，负值相反
• 第三个值：阴影的模糊半径
• 第四个值：阴影的颜色

2、outline–设置轮廓线，用法与border一样

3、border-radius–设置圆角

若要设置一个圆，则：