43. 内联元素的盒模型
内容区域(content area):指的是一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子(character box)；但是图片这样的替换元素，其显示内容不是文字，因此内容区域可以看成是元素自身。
内联盒子(inline box):不会让内容成块显示，而是排成一行，这里的内联盒子指的是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”
行框盒子(line box):每一行就是一个行框盒子，每个行框盒子都是由一个个内联盒子组成，注意：line-height是作用在行框盒子上的，并最终决定高度(替换元素除外，后面会讲解什么是替换元素)。
包含盒子(containing box):此盒子由一行一行的“行框盒子”组成（css规范中，并没有“包含盒子”的说法，更准确的称呼是“包含块”(containing block)。
width的默认值是auto，auto在不同场景会有不同的表现：
fill-available：充分利用可用空间
fit-content:收缩到合适，典型代表浮动、绝对定位（有例外，设置了对立属性：left、right、top、bottom时，宽度和高度由祖先元素position非static的元素决定，但是替换元素除外：img、video、canvas等）、inline-block、table。利用这个特性我们可以实现，文字整体居中，多行则居左显示
min-content:收缩到最小。
max-content:超出容器限制，内容很长的连续英文或数字，或者内联元素被设置为了white-space: nowrap。
height的默认值也是auto，height: 100%。如果父元素height为auto，则子元素height:100%是无效的,想子元素height: 100%生效，则:
父元素设定显式高度值
使用绝对定位（绝对定位元素的百分比是根据padding box计算的，非绝对定位元素百分比是根据content box计算的)
44. display_visibility
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
45. overflow
规定当内容溢出元素框时发生的事情，所有主流浏览器都支持 overflow 属性。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。可能的值:
visible:默认值。内容不会被修剪，会呈现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的。
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。
46. 文档流
指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
定位属性positon: position的值为absolute、fixed的元素脱离文档流，static、relative没有脱离文档流
47. 浮动
设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面
float属性:
left:元素向左浮动
right:元素向右浮动
none:默认值；元素不浮动，并且显示在其文本中的出现位置。
设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面
48. 文字绕图
在一个图文并茂的网页上，文字环绕图片可以使布局美观紧凑。
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果
7. 内联元素的浮动
1. 支持部分样式（不支持宽、高、margin上下、padding上下）
2. 宽高由内容决定
3. 盒子并行一行
4. 代码换行，盒子之间会产生间距
5. 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
1. 去掉内联元素之间的换行
2. 将内联元素的父级设置font-size为0，内联元素自身再设置font-size
49. 简单布局
.:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*设置头部*/
.header{
/*设置宽度*/
width: 1000px;
/*设置高度*/
height: 150px;
/*设置背景颜色*/
background-color: yellowgreen;
/*设置居中*/
margin: 0 auto;
}
/*设置主体内部*/
.content{
/*设置宽度*/
width: 1000px;
/*设置高度*/
height: 400px;
/*设置背景颜色*/
background-color: orange;
/*设置居中*/
margin: 10px auto;
}
/*设置content中小div的样式*/
.left{
width: 200px;
height: 100%;
background-color: skyblue;
/*向左浮动*/
float: left;
}
.center{
width: 580px;
height: 100%;
background-color: yellow;
/*向左浮动*/
float: left;
/*设置水平外边距0*/
margin: 0 10px;
}
.right{
width: 200px;
height: 100%;
background-color: pink;
/*向左浮动*/
float: left;
}
/*设置页脚*/
.footer{
/*设置宽度*/
width: 1000px;
/*设置高度*/
height: 150px;
/*设置背景颜色*/
background-color: silver;
/*设置居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 头部div -->
<div class="header"></div>
<!-- 主体内容div -->
<div class="content">
<!-- 左侧div -->
<div class="left"></div>
<!-- 中间div -->
<div class="center"></div>
<!-- 右侧div -->
<div class="right"></div>
</div>
<!-- 底部信息div -->
<div class="footer"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*设置ul*/
.nav{
/*去除项目符号*/
list-style: none;
/*为ul设置一个背景颜色*/
background-color: #6495ed;
/*设置一个宽度*/
/*在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout*/
width: 1000px;
/*设置居中*/
margin: 50px auto;
/*解决高度塌陷*/
overflow: hidden;
}
/*设置li*/
.nav li{
/*设置li向左浮动*/
float: left;
width: 12.5%;
}
.nav a{
/*将a转换为块元素*/
display: block;
/*为a指定一个宽度*/
width: 100%;
/*设置文字居中*/
text-align: center;
/*设置一个上下内边距*/
padding: 5px 0;
/*去除下划线*/
text-decoration: none;
/*设置字体颜色*/
.:
color: white;
/*设置加粗*/
font-weight: bold;
}
/*设置a的鼠标移入的效果*/
.nav a:hover{
background-color: #cc0000;
}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="nav">
<li>推荐优惠</li>
<li>美容护肤</li>
<li>时尚美妆</li>
<li>塑身保健</li>
<li>香水</li>
<li>男人专区</li>
<li>个人护理</li>
<li>母婴护理</li>
</ul>
</body>
</html>
