第六章 盒子模型
1.盒子模型组成
边框(border)
外边距(margin)
内边距(padding)
盒子的内容(content)
2.边框
border-color:边框颜色
border-top-color 上边框颜色
border-right-color右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-width:边框的宽度
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style:边框样式
border-top-style
border-right-style
border-bottom-style
border-left-style
常见样式:
none
hidden
dotted
dashed
solid
double
border:边框简写
同时设置边框的颜色、粗细和样式
例:border: 1px dashed red;
3.外边距margin(CSS外边距是围绕在元素边框的空白区域)
margin-top
margin-right
margin-bottom
margin-left
margin
注意：margin:0px auto;可以使元素居中对齐
4. 内边距padding(元素的内边距在边框和内容区之间)
margin-top
margin-right
margin-bottom
margin-left
margin
5. 盒子模型的尺寸
盒子模型总尺寸=border+padding+margin+内容宽度
6.box-size
content-box:默认值，盒子的总尺度
border-box:盒子的宽度或高度等于元素内容的宽度或高度
inherit:元素继承父元素的盒子模型模式
7.圆角边框(border-radius)
7.1 border-radius:x y z m;
例:border-radius: 20px 10px 50px 30px
注意:四个属性值按顺时针排列
7.2 圆形
a.元素的宽度和高度必须相同
b.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
例:div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
7.3 半圆
a.制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
b.制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
7.4 扇形
a.“三同”是元素宽度、高度、圆角半径相同
b.“一不同”是圆角取值位置不同
7.5 盒子阴影
box-shadow:inset x-offset y-offset blur-radius color;
inset:阴影类型内阴影
x-offset：X轴位移，指定阴影水平位移量
y-offset:Y轴位移，用来指定阴影垂直位移量
blur-radius:阴影模糊半径阴影向外模糊的模糊范围
color:阴影颜色，定义绘制阴影时所使用的颜色
第七章
1.标准文档流
1.1 标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
1.2 标准文档流组成
a.块级元素（block）
<h1>…<h6>、<p>、<div>、列表
b.内联元素（inline）
<span>、<a>、<img/>、<strong>...
注意:内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立.
2.display属性
2.1 属性值
block：块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline：内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block：行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none：设置元素不会被显示
2.2 display特性
a.块级元素与行级元素的转变（block、inline）
b.控制块元素排到一行（inline-block）
c.控制元素的显示和隐藏（none）
3.浮动float
3.1 浮动属性值
left：元素向左浮动
right：元素向右浮动
none：默认值。元素不浮动，并会显示在其文本中出现的位置
3.2 清除浮动
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素
both：在左、右两侧不允许浮动元素
none默认值。允许浮动元素出现在两侧
4.父边框塌陷
4.1 原因
浮动元素脱离标准文档流就可能导致父边框塌陷.
4.2 解决方案
a.浮动元素后面加空div
例:<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子……</div>
<div class="clear"></div>
</div>
.clear{ clear: both; margin: 0; padding: 0;}
b.设置父元素的高度
#father {height: 400px; border:1px #000 solid; }
c.父级添加overflow属性
#father {overflow: hidden;border:1px #000 solid; }
d.父级添加伪类after
<div id="father" class="clear">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子……</div>
</div>
.clear:after{
content: ''; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
5.溢出处理overflow
visible： 默认值。内容不会被修剪，会呈现在盒子之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容