CSS定位与布局

4.1盒子模型

4.1.1概念：

container：容器
header：页眉
navbar：导航条
main：主要内容
menu：菜单
content：主要内容
sidebar：边条
footer：页脚

4.1.2组成：

4.1.2.1组成：
盒子壁border
内边距padding
盒子内容width + height
margin + border + padding + (conent = width + height)
4.1.2.2内容content：
margin属性:(外边距)顺序:top right bottom left (第二个值设置为auto，表示居中)
padding属性:(内边距)

padding: 100px 200px 150px;/*上右下左 三个值的时间代表;上，左右，下 */

border属性：（框）
{
width：px、thin（粗）、medium（中）、thick（细）
style：dashed（横线）、dotted（点）、solid（实线）、double（双实线）
color：颜色
}

div{
    width: 100px;
    height: 100px;
    background-color: red;
    border: 10px solid black;
    padding: 10px 20px 30px;
    margin: 10px 20px;
}
/*真实宽度 realWidth:160px = width + border*2 +padding
真实高度realHeight:160px = height + border*2 + padding*/

overflow属性：
{
hidden：超出部分不可见
scroll：显示滚动条
auto：如果有超出部分，显示滚动条
}

4.2文档流定位

（与css杂中的块级元素等一样）

4.2.1block元素

特点：(块级元素)
独占一行，元素的height、width、margin、padding都可以设置。
常见元素：<div>、<p>、<h1>..<h6>、<ol>、<ul>、<table>、<form>
其他类型的元素可以显示为block元素，display：block（display设置为block）

4.2.2inline元素

特点：(行级元素)
不但独占一行
width、height不可设置，就是它包含的文字或图片的宽度，不可改变。
常见元素：<span><a>
其他元素显示为inline元素，需要将display设置为inline。
inline元素之间有一个间距问题

4.2.3inline-block元素

特点：(块级行元素)
不但独占一行
元素的height、weight、margin、padding都可设置
常见元素：
其他元素转换为inline-block元素，只需要把display改为inline-block即可。

4.2.4display总共四种

分别为none、block、inline、inline-block

4.3浮动定位

4.3.1float属性（用来设定浮动）

div标签实现横向多列布局
可以向左float:left，右right，不浮动none
浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不见他们
触发了了bfc规则的元素和文本类属性(inline)的元素以及文本，都可以看见透明的浮动元素

4.3.1.1块级父元素包不住浮动的子元素

<div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>        
</div>

.wrapper{
    border: 1px solid red;
}
.content{
    float: left;
    color: #fff;
    background-color: black;
    width: 100px;
    height: 100px;
}

4.3.1.2解决方案

法1.将父级元素也改为浮动元素
法2.采用伪元素

.wrapper::after{
    content: "";
    clear: both;/*clear只对块级元素生效*/
    display: block;
}

4.3.2clear属性

clear可以用来清除浮动。
clear只对块级元素生效。
一般写代码前先清除格式

*{
    margin: 0;
    padding: 0;
}

4.4层定位

主要为position属性
static默认值

4.4.1fixed固定定位：

相对于浏览器窗口直接定位

4.4.2relative相对定位：

保留原来位置进行定位 相对于自己原来的位置进行定位
position：relative
文档流原位置保留
定位参照物为直接父元素（不管父元素是什么定位）

4.4.3absolute绝对定位：

脱离原来位置进行定位
最近的有定位的父级元素进行定位，如果没有，那么相对于文档定位对后续元素有影响
position：absolute
文档流中的原位置不保留
定位参照物为非static的父元素
top上、left左、bottom下、right右

4.4.4操作

一般用relative作为参照物，用absolute进行定位具体样例见奥运五环。

5.z-index属性

z-index用来设置层数，默认值为零，1的话就在零的外面

bfc规则

margin塌陷问题，可以用bfc规则来解决。
bfc规则：block format context
块级格式化上下文
原因：css把每一个元素都当成一个盒子，每个盒子都有渲染规则，
操作：需要通过几种方法来触发bfc规则，从而解决margin塌陷规则。
position:absilute;
display:inline-block;
float:left/right;
overflow:hidden;
这是4个可以触发bfc规则的方法，选择对产品影响最小的来完成。