页面布局三大核心，盒子模型，浮动和定位
1.盒子模型
盒子模型组成：
盒子模型组成的主要有 边框border，外边距margin ，内边距padding，内容content；
边框border:
border可以设置元素的边距，边距有三部分，宽度，验收，颜色
border: border-width || border-style || border-color
边框四个边可以分开来写，如border-top:
border-collapse:collapse可以合并表格的相邻边框
边框会影响盒子的实际大小；增加盒子大小，盒子的总大小为宽度或高度加上两个边框的大小；内边距
padding用于设置内边距，即盒子边框和内容的距离.默认是0
语法 padding : 上 右 下 左
padding也会影响盒子的大小；如果盒子已有宽度和高度，内边距会撑大盒子的大小
如果盒子没有指定高度和宽度，那么padding不会撑开盒子；只有指定宽度才会撑大宽度，指定高度才会撑大高度；
外边距margin
margin用于设置外边距，即盒子与盒子之间的距离
语法 margin: top right bottom left 上右下左
外边距可以让设置了width的块级元素水平居中:
{margin: 0 auto}行内元素或行内快级元素水平居中，给父元素添加属性text-align: center
嵌套关系的块级元素垂直外边距的塌陷问题；在父元素和子元素同时具有margin-top属性时，以最大值为准；
解决方式有：给父元素
设置边框 border {1px }
设置内边距
添加overflow: hidden
浮动的盒子不会有这个塌陷问题---
清除内外边距：
不同的网页元素带有不同的内外边距，不同浏览器也不一样，此时考虑清除内外边距； * { margin:0 padding:0 }
行内元素尽量只设置左右边距，考虑兼容性问题；
CSS3盒子属性
圆角边框:
用于设置元素的外边框圆角
border-radius : length 单位是px 或者是百分比
原理：盒子矩形边框和圆形的交集
border-radius是复合属性，最多可以有四个值，表示四个角；左上、右上、右下，坐下盒子阴影
box-shadow，属性如下图：
盒子阴影不占空间，不影响盒子大小
文字阴影
text-shadow： h-shadow v -shadow blur color
2.浮动
传统网页布局的三种方式： 普通流，浮动，定位普通流(标准流)：就是标签按照默认方式排列；
块级元素独占一行，从上向下顺序排列，行内元素从左向右排列；碰到父元素边缘则自动换行
网页布局第一准则：
多个块级元素纵向排列找标准流，横向排列找浮动
什么是浮动：
float属性用于创建浮动层，将其移动到一边，直到左边缘或右边缘触及到包含块或另一个浮动框的边缘；
浮动特性
浮动元素会脱离标准流
- 浮动的盒子不再保留原来的位置
- 脱离了标准流的控制
浮动元素会一行内显示
- 如果多个盒子都添加了浮动，那么所有浮动的盒子将会在一行内显示，并且顶端对齐；
- 浮动的元素是互相紧贴到一起，如果父级元素的宽度装不下元素，浮动元素会另起一行靠左排列
浮动元素会具有行内块元素的特点
- 任何元素都可以浮动，给元素添加了浮动，元素就具有了行内块元素的特性；
- 如果行内元素给了浮动，那么行内元素就可以设置高度和宽度
- 如果块级元素添加了浮动，且没有设置宽度，那它的大小根据内容而定；
为了约束浮动元素位置，网页布局时，先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右的位置
浮动布局要点
- 先父元素上下布局，后浮动元素左右布局
- 理论上一个元素浮动，后面的兄弟元素也要浮动；
- 浮动的盒子只会影响后面盒子的标准流，不会影响前面的标准流；div在服务的盒子前面，还是会独占一行；
清除浮动
很多情况下，父盒子不方便给高度，但子盒子浮动又不占有位置，最后父盒子的高度是0，就会影响到下面的标准流盒子;这个时候就需要清除服务，就是清除浮动元素的影响；
清除浮动后，父元素就会根据浮动的子元素自动计算高度；
- 语法：
清除浮动的方法：
-
- 清除浮动的策略是闭合浮动，只让浮动在父元素内影响，不影响父盒子外面的盒子；
- 额外标签法：在最后一个浮动元素的后面添加一个元素，添加样式属性 div style= "clear:both"></div； 会添加多个无意义的标签
- 父级添加overflow属性，设置为auto,hidden 或scroll
- 父元素添加：after伪类； 不需要添加额外标签，
- 给父元素添加 双伪元素；before和after; 原理是在父盒子中的第一个元素和最后一个元素添加一个块级元素；
定位
为什么需要定位
定位可以让盒子在指定盒子内自由移动位置，并压住其他盒子，而浮动只能让盒子排在一行；
定位的组成
定位是定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，使用CSS属性 position；值包括static、relative，absolute,fixed
边偏移决定了改元素的最终位置；CSS中有top left right bottom四个属性；配合定位属性position使用静态定位static
是元素的默认定位方式，按照标准流特性摆放位置，没有偏移
相对定位relative
元素在移动时会以自己原来的位置移动； 原来在标准流中的位置还保留,后面的盒子以标准流对待它(不脱标)
绝对定位absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素移动；
如果没有祖先元素或祖先元素没有定位，则以浏览器为准对齐
如果祖先元素有定位，则以最近一级有定位的祖先元素为准移动位置；
觉得定位不占用原来标准流的位置，即脱标子绝父相：
子元素是绝对定位， 父元素则需要是相对定位，因为相对定位会保留位置，而绝对定位不保留位置；
固定定位fixed
以浏览器的可视窗口为准移动元素
与父元素没有任何关系
不随着滚动条的滚动而滚动
不占用标准流的位置，是一种特殊的绝对定位粘性定位 sticky
粘性定位可以被认为是相对定位和固定定位的混合
已可视窗口为参考点
占有标准流位置
必须要有left，top right bottom中的一个属性- 定位总结；
定位布局的叠放顺序属性 z-index
默认值auto,属性为数字，可以有负值，但没有单位
当都没有z-index属性，按照属性叠放,后来居上绝对定位盒子居中：
> left和top 设置 父元素宽度50% > margin-left和margin-top设置自身元素宽度的一半定位的特殊特性
行内元素添加定位，可以直接设置宽度和高度
块内元素添加定位，默认的是内容的高度和宽度
脱标的盒子不会触发外边距塌陷问题浮动和定位的区别：
浮动会压住后面的盒子，不会压住盒子中的文字；(浮动最初的目的是为了做文字环绕效果的，文字会围绕着浮动元素)
绝对定位会压住标准流的盒子内容；
网页布局总结：
- 网页布局是通过标准流，浮动，定位一起完成的；
- 标准流可以让盒子上下或左右排列
- 浮动可以让多个块级元素一行显示或左右对齐盒子
- 定位有层级概念，可以让多个盒子前后叠压显示；
部分开发规范
#### CSS属性书写顺序
- 布局定位：display 等
- 自身属性：width,height 等
- 文本属性：color font text- 等
- 其他属性：css3属性等
布局整体思路
- 确定页面的版心（可视区）
- 分享行模块，以及行模块里的列模块；
- 一行中的列模块经常为浮动布局，先大小，后位置
- 先结构，后样式。
- 先布局，后代码。
html结构
导航栏的实际开发中，不会直接使用连接a,而是使用li包含链接的做法
直接使用a,搜索引擎会辨别为关键字堆砌，有降权的风险
-
