盒子模型&浮动&定位

块级，行级，行块级标签

块级标签：无论内容多少，占据一行。

<p>、<h1>、<ul>、<ol>、<hr/>

行级标签：只占自身大小的标签，不会占一行。

<font>、<b>、<i>、<a>

行块级标签：

<input/> <img>

注意：一般使用块级标签包含行级标签，不适用行级标签包含块级标签。
a可以包含任何标签
p不可以包含块标签

display样式

display:block;
    inline
    inline_block
    none

block 设置为块标签
inline 设置为行标签
inline-block 设置为行级块标签
none 隐藏标签

盒子模型

• CSS处理网页时，他认为每个标签都包含在一个不可见的盒子里。
  把所有的标签都想象成盒子，我们对网页的布局就相当于是摆放盒子。

内容区（content）
内边距（padding）
边框（border）
外边框（margin）

内容区

盒子中放置内容的区域，也是标签中的文本内容

width
height

width和height属性只适用于块标签（包括行级块）

内边距

内边距：内容和边框之间的距离

padding：
top，right，bottom，left
padding-top

div{
    padding:10px 20px
}
padding-left:10px; 
padding-right:10px; 
padding:10px 20px 30px 40px 
这样会设置标签的上、右、下、左四个方向的内边距。

内边距影响盒子实际大小

边框

//边框宽，颜色，样式
div{
    border:1px red solid
}

border-style:
dotted （点线）
dashed （虚线）
solid （实线）
double （双线）
groove （槽线）

//border-radius 设置四个角为圆角边框,要设置值
div{
    border-radius:5px;
}

border-radius 设置四个角为圆角边框
border-top-left-radius 设置坐上为圆角边框
注意：
边框会影响盒子实际大小

外边距

标签边框与周围标签相距的空间。

margin-top，right，bottom，left

margin可以是负值
margin的值可以是auto，设置外边距为最大值，

水平居中
margin-left:auto;
margin-right:auto;
margin:auto;
margin:0 auto;

div{
//上下0，左右自动
    margin:0 auto;
}

以上方法是让块级元素水平居中，行内元素或者行内块原色水平居中给其父元素添加text-align：center即可。

常见事项

父标签高度0，子标签无法撑起父标签

div{
    overflow:auto;
}

浏览器在页面中没有样式时，会默认设置margin和padding
一般会清除内外边距

*{
    margin:0;
    padding:0;
}

浮动

CSS布局的三种机制

文档流，浮动，定位

• 文档流，指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。

块级标签就会占一行。

• 浮动，让盒子从文档流中浮起来，主要作用让多个级块盒子一行显示。
  使标签脱离文档流。

float:none; 不浮动
left 向左浮动
right 向右浮动

选择器{ float:属性值;}

特点：

• 行级标签、块级标签都可以浮动，行级标签浮动后将会自动变为一个块级标签。
• 浮动起来脱离文档流，下方标签上移，不再影响父标签的高度，不会撑开父标签。

定位

将盒子定位在浏览器的一个位置。

定位，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

定位的盒子，是通过偏移来移动位置。偏移量为0，不会移动。
top:90px;
有上没有下，有左没有右
bottom
left
right

定位模式（position)

选择器{position:属性值;}

相对定位（relative）

当标签的属性设置为相对定位时，会相对于它原来的位置偏移，不会脱离文档流。

特点：相对于自己原来在文档流中的位置移动
原来在文档流中的区域继续占有。

绝对定位（absolute）

• 运用了绝对定位的标签会浮动起来。是标签以带有定位的父级标签来移动位置。
• 通常父类标签会是相对定位，子类标签绝对定位。

特点：

1. 开启绝对定位，会使标签脱离文档流
2. 绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）
   a. 如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位
3. 绝对定位会使标签提升一个层级
4. 绝对定位会改变标签的性质，行级标签变成块标签

轮换图箭头案例
方向箭头在图片上，应该使用绝对定位
父级盒子应该使用相对定位