h day3

css主要用来对网页中的内容进行布局和设置样式。
1.标准流： 网页中的内容在没有写样式的时候，默认的布局方式，我们就叫标准流
在标准流中不同类型的标签布局方式不一样：
a.如果是块级标签，一个标签占一行(无视宽度)，默认的宽度是父标签的宽度，默认高度是内容的高度，并且设置宽度和高度有效
b.如果是行内标签，一行可以显示多个，默认的宽度和高度都是内容的宽度和高度，设置宽度和高度无效
c.如果是行内块标签，一行可以显示多个，默认的宽度和高度都是内容的宽度和高度，设置宽度和高度有效

2.标签的默认分组
块级标签：h1~h6, p, table, ol, ul , dl, li, div....
行内标签: font, input, img, a, select, textarea, span....

display属性值代表的是标签的类型：
1.block : 块标签
2.inline : 行内
3.inline-block : 行内块
默认情况下，我们的标签只有行内的和块的，没有行内块的。可以通过修改display属性值来修改标签类型

注意：使用行内块的时候，有一个没有办法修复的坑。行内块到其他标签之间有一个间隙，而且这个间隙不能消除。
     所以不到万不得已不使用行内块

浮动(float)：
letf: 左浮动 - 先上再左
right: 右浮动 - 先上再右
1.浮动会脱标(脱离标准流) - 之前标准流中的布局方式无效;
脱离标准流布局方式：所有标签都可以一行显示多个，默认大小是内容的大小，设置宽高有效

2.浮动

布局原则，努力的向浏览器的左上角靠，先上再左

清除浮动：
1.高度塌陷
指的是清除因为浮动而产生的高度塌陷问题 - 父标签不浮动，子标签浮动就会产生高度塌陷问题
2.清除浮动
a.添加空盒子 - 在高度会塌陷的父标签中的最后添加一个空的div,并且设置这个空的div的样式的clear为both
b.overflow - 选中高度塌陷的标签，设置样式的overflow的值为hidden
c.万能清除法 -

    1.定位属性
    letf - 标签的左边到指定位置的距离（左间距）
    right - 标签的右边到指定位置的距离（右间距）
    top - 标签的顶部到指定位置的距离（上间距）
    bottom - 标签的底部到指定位置的距离(下间距)
    
    2.position属性 - 设置标签定位的时候的参考对象(相对谁去定位)
    initial/static(默认值) - 不相对任何对象定位
    absolute(绝对定位) - 相对于第一个非initial/static的父标签进行定位
    relative(相对定位) - 相对当前标签在标准流中的位置进行定位 
               (注意：一般把一个标签的position设置为relative是为了让当前标签的子标签可以相对自己定位)
    fixed - 相对浏览器进行定位  
    sticky - 当网页中的内容超过一屏(需要滚动),相对浏览器定位;
             当网页中的内容没有超过一屏(不需要滚动)，相对标准流的位置进行定位;(注意：一般只针对最后一个标签)

    注意：定位也会让标签脱标(脱流) - 不管怎么脱，标签都是按脱流的方式进行布局(一行显示多个，设置宽高有效，默认大小是内容大小

html中所有在网页上可见的标签都是盒子模型，有固定的结构.
    所有可见的标签都是由：content、padding、border和margin组成,其中内容、padding、border是可见的，margin不可见
    1.content - a.设置width和height就是在设置content的大小;
                b.标签中添加内容也是添加到content中的
                c.设置背景颜色，会作用于content
    2.padding - a.通过padding相关属性设置padding的大小(4个方向)
                b.设置背景颜色，会作用于padding
                
    3.border(边框) - a.通过border相关属性设置border的大小(4个方向)
               b.边框的颜色需要单独设置
               
    4.margin - a.通过margin相关属性设置margin的大小
               b.不可见，但是占位