网页布局的三种方式

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)【额外标签法：在浮动元素末尾加上一个空标签，例如;新标签必须为块级元素】

(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，数值越大，盒子越靠上】