网页布局的三种方式

1.盒子模型（Box Model）
    1.1边框border

        【属性：border-width粗细；border-style样式（solid实线，dashed虚线，dotted点线）； border-color颜色】    
        【复合写法：border：5px solid red；分开写法：border-top：5px solid red；】
        【表格细线边框：border-collapse：collapse；合并相邻的边框】
    1.2内边距padding

        【属性：padding-left/top/bottom/right】
        【1个值(上下左右)；2个值(上下，左右)；3个值(上，左右，下)，4个值(上，右，下，左)】
        【盒子已经有高度和宽度，再指定内边框会撑大盒子；应让width/height减去多出来的距离大小】
    1.3外边距margin

        【属性：margin-left/top/bottom/right】
        【外边距可以让块级盒子水平居中，条件：1盒子指定了宽度；2盒子左右的外边距都设置为auto；margin：0 auto；】
        【行内元素或者行内块元素水平居中给其父元素添加text-align:center;即可】
   1.4清除内外边距

        【*{margin：0；padding：0；}】
    【注：行内元素为了照顾兼容性，尽量只设置左右内外边距，可转化为块级元素或者行内块元素】
    【去掉li前面的小圆点：li {list-style：none；}】
2.圆角边框border-radius：length；
    【radius半径（圆的半径）原理：(椭)圆与边框的交集形成圆角效果】
    【正方形变圆，设置为高度或者宽度的一半/50%；矩形，设置为高度的一半】
3.浮动float
    【属性：none；left；right；】
    【脱离标准普通流的控制（浮）移动到指定位置（动）；浮动的盒子不再保留原来的位置】
    【如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列；添加浮动后，为行内块元素】
    【约束浮动：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符号网页布局第一准则】
    清除浮动：父盒子不给高度，子盒子浮动不占有位置，父级盒子高度为0，就会影响下面的标准流盒子
        (1)【额外标签法：在浮动元素末尾加上一个空标签，例如<div style="clear:both"></div>;新标签必须为块级元素】
        (2)【父级添加overflow：属性值设置为hidden、auto、scroll】
        (3)【:after伪元素法：给父级添加；.clearfix:after{content:""; display:block; height:0; clear:both; visibility:hidden;}    .clearfix:{*zoom:1;}】
        (4)【双伪元素清除浮动：.clearfix:before，.clearfix:after{content:""；display:table;}    .clearfix:after{clear:both;}    .clearfix:{*zoom:1;}】
4.CSS属性书写顺序（重点）
    (1)【布局定位属性：display/position/float/clear//visibility/overflow】
    (2)【自身属性：width/height/margin/padding/border/background】
    (3)【文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word】
    (4)【其他属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient】
5.页面布局整体思路
    (1)【必须确定页面的版心（可视区），我们测量可知】
    (2)【分析页面中的行模块，以及每个行模块中的列模块，就是页面布局第一准则】
    (3)【一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则】
    (4)【制作HTML结构，我们还是遵循，先有结构，后有样式的准则，结构永远最重要】
    (5)【所以，先理清除布局结构，再写代码尤为重要，这需要我们多谢多积累】
6.导航栏注意点：实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法
    【li+a语义更清晰；如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑，从而影响网站排名】    
    【注：1让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示；、
        2这个导航栏可以不给宽度，将来可以继续添加文字；
        3由于导航栏里面文字不一样多，最好给链接a左右padding撑开盒子，而不是指定宽度】
7.定位=定位模式+边偏移
    (1)定位模式position

        【属性值：static静态；relative相对；absolute绝对；fixed固定】
    (2)边偏移

        【属性：top；bottom；left；right】
    (3)静态定位static

        【默认定位，无偏移】
    (4)相对定位relative

        【参照点为自己原来的位置；不脱标，继续保留原来的位置】
    (5)绝对定位absolute

        【如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Docunment文档）】    
        【如果祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置】
        【绝对定位不再占有原来的位置（脱标）】
    (6)子绝父相

        【1子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子】
        【2父盒子需要加定位限制子盒子在父盒子内显示】
        【3父盒子布局时，需要占有位置，因此父亲只能是相对定位】    
    (7)固定定位fixed

        【1以浏览器的可视窗口为参照点移动元素】
        【2和父元素没有关系；3不随滚动条滚动；4固定定位不再占有原来的位置】
    (8)粘性定位sticky

        【1以浏览器的可视窗口为参照点移动元素】
        【2粘性定位占有原来的位置；3必须添加人top，bottom，left，right中的一个】
    (9)定位叠放次序z-index

        【选择器{z-index：1；}】
        【数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上】