CSS（三）
网页布局过程
网页布局的核心本质：就是利用CSS摆盒子
1.先准备好相关的网页元素，网页元素基本都是盒子Box
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
盒子模型
所谓的盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边框，内边距，和实际内容。
border边框
border可以设置元素的边框，边框由三部分组成：边框宽度（粗细），边框样式，边框颜色
1.border-width定义边框粗细，单位是px
2.border-style边框的样式
（1）solid实线边框
（2）dashed虚线边框
（3）dotted点线边框
3.border-color边框颜色
一个元素边框的样式，颜色，粗细可以一起写（简单版）
border:1px solid red;（没有顺序）边框分开写发：border-top border-left border-right border-bottom
相邻边框合并
border-collapse：collapse；
边框会影响盒子实际大小（边框会额外增加盒子的实际大小）
1.测量盒子大小的时候，不量边框
2.如果测量的时候包含了边框，则需要width/height减去边框宽度
padding内边距
padding属性用于设置内边距，即边框与内容之间的距离
1.padding-left左内边距
2.padding-right右内边距
3.padding-top上内边距
4.padding-bottom下内边距
padding属性可以有一到四个值
1.padding：5px
一个值，代表上下左右都有5像素内边距
2.padding：5px 10px
两个值，代表上下内边距是5像素 左右内边距是10 像素
3.padding：5px 10px 20px
三个值，代表上内边距5像素 左右内边距10像素 下内边距20像素
4.padding：5px 10px 20px 30px
四个值，上是5像素，右是10像素，下是20像素，左是30像素 （顺时针）
当我们给盒子指定padding值后，发生了2两件事：1.内容和边框有了距离，添加了内边距。2.padding影响了盒子实际大小，也就是说，如果盒子已经有了宽度和高度，此时在指定内边框，会撑大盒子
如果保证盒子跟效果图大小保持一致，这让width/height减去多出来的内边距大小即可
好处：
1.撑开盒子：每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适。
2.有时候用text-indent不精准，实际开发的做法是给padding值这样更加精准。
margin外边距
margin-left（左外边距）
margin-right（右外边距）
margin-top（上外边距）
margin-bottom（下外边距）
他的值和padding一样有四个值，不同的表示
外边距可以让块级盒子水平居中，但是必须满足两个条件
1.盒子必须指定了宽度
2.盒子左右的外边距都设置为auto
.类名{
width : 960 px;
margin : 0 auto;
}ps：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可
（把行内元素或者行内块元素看成文本）
外边距合并
使用margin定义元素的垂直外边距时，可能会出现外边距的合并
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方法：
1.可以为父元素定义上边框(加一个框border)
2.可以为父元素定义上内边距（padding）
3.可以为父元素添加overflow.hidden
4.其他方法， 比如浮动，固定，绝对定位的盒子不会有塌陷问题
清除内外边距
网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距
*{
padding: 0;
margin: 0;
}行内元素为了照顾兼容性，尽量只设置左右内外边距，但是转换为块级和行内块元素就可以了
list-style: none;去掉li前面的项目符号
圆角边框（重点）
border-radius属性用于设置元素的外边框圆角
border-radius: （圆半径的长度）;特点
1.参数值可以为数值或百分比的形式
2.如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
3.如果是个矩形，设置为高度的一半就可以做
4.该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角
5.分开写每个角
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
盒子阴影
box-shadow:
h-shadow v-shadow blur spread color inset;h-shadow
必需，水平阴影的位置，允许负值
v-shadow
必需，垂直阴影的位置，允许负值
blur
可选，模糊距离
spread
可选，阴影的尺寸
color
可选，阴影的颜色
inset
可选，将外部阴影改为内部阴影
注意
1.默认的是外阴影，但是不可以写这个单词，否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列
文字阴影
text-shadow:h-shadow v-shadow blur colorh-shadow
必需，水平阴影的位置，允许负值
v-shadow
必需，垂直阴影的位置，允许负值
blur
可选，模糊距离
color
可选，阴影的颜色
网页布局的本质三种方式
1.标准流
就是标签按照规定好默认的方式排列
1.块级元素会独占一行，从上向下顺序排序
常用元素：div,hr,p,h1~h6,ul,ol,dl,form,table
2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
常用元素：span ,a , i , em等；
以上都是标准布局，我们前面学习就是标准流，标准流是最基本的布局方式。
2.浮动
3.定位
这三种布局方式都是用来摆放盒子的，盒子摆放到合适的位置，布局自然就完成啦
浮动
很多的布局效果，标准流没有办法完成，此时利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
选择器 {float:属性值;}属性值
1.none（元素不浮动（默认值））
2.left（元素向左浮动）
3.right（元素向右浮动）
特性
1.浮动元素会脱离标准流（脱标）
2.浮动的元素会一行内显示并且元素顶部对齐
浮动的元素是互相贴靠在一起的（不会有嫌隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
3.浮动的元素会具有行内块元素的特性
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理
4.浮动的盒子不再保留原先的位置
浮动元素经常和标准流父级搭配使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
一个元素浮动了，理论上其余的兄弟元素也要浮动
以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，由于浮动元素不再占用原文档流的位置，所有它会对后面的元素排版产生影响
清除浮动本质
1.清除浮动的本质是清除浮动元素造成的影响
2.如果父盒子本身有高度，则不需要清除浮动
3.清除浮动之后，父级就会根据浮动盒子自动检查高度。父级有了高度，就不会影响下面的标准流了
选择器{clear :属性值;}属性值
1.left（不允许左侧有浮动元素）（清除左侧浮动的影响）
2.right（不允许右侧有浮动元素）（清除右侧浮动的影响）
3.both（同时 清除左右两侧浮动的影响）（超常用）
清除浮动的策略是：闭合浮动。
清除浮动的方法
1.额外标签也称为隔墙法
会在浮动元素末尾添加一个空的标签（这个空标签必须是块元素）
<div style="clear.both"></div>或者其他标签（如<br/>等）优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
2.父级添加overflow属性
将其属性值设置为hidden，auto或scroll
overflow:hidden;优点：代码简洁
缺点：无法显示溢出的部分
3.父级添加after伪元素
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hodden;
}
.clearfix{ /*IE6,7专有 */
*zoom:1;
}优点：没有添加标签，结构更简单
缺点：照顾低版本浏览器
4.父级添加双伪元素
.clearfix:before，.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{ /*IE6,7专有 */
*zoom:1;
}优点：代码更简洁
缺点：照顾低版本浏览器
在线案例
1.学成在线PSD源文件
2.开发工具=ps（切图）/cutterman插件+vscode（代码）+chrome（测试）
3.案例准备工作（结构与样式相分离思想）
4.CSS属性书写顺序
1.布局定位属性
diaplay/position/float/clear/visibility/overflow
2.自身属性
width/height/margin/padding/border/background
3.文本属性
color/font/text-decoration/text-align.......
4.其他属性
content/cursor.......
4.页面布局整体思路
1.必须确定页面的版心（可视区），我们测量可得知
2.分析页面中的行模块，以及每个行模块中的列模块，其实页面布局第一准则
3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
4.制作HTML结构，我们还是遵循，先有结构，后有样式的原则，结构永远重要。
5.所以，先理清楚布局结构，再写代码尤为重要
实际开发注意点
1.在实际开发中，我们不会直接使用链接啊，而是用li包含链接（li+a）的做法
2.浮动的盒子没有外边距的问题
定位
为什么需要定位
1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的
3.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
4.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
定位组成
将盒子定在某一个位置，所以定位也是在播放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置
定位模式
position属性+属性值
属性值
1.static——静态定位
选择器{position: static;}元素的默认定位方式，无定位的意思
2.relative——相对定位
选择器{position: relative;}元素在移动的时候，是相对于他原来的位置来说的不脱标，继续保留原来的位置
特点
1.他是相对于自己原来的位置来移动的
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他（）
3.absolute——绝对定位
选择器{position: absolute;}元素在移动位置的时候，是相对于他祖先元素来说的（拼爹型）
特点
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置
3.绝对定位不再占有原先的位置（脱标）
自己使用绝对定位，父级则需要相对定位
父盒子需要加定位限制子盒子在父盒子内显示
4.fixed——固定定位
选择器{position: fixed;}元素固定于浏览器可视区的位置（可以在浏览器页面滚动时元素的位置不会改变）
特点
1.以浏览器的可视化窗口为参照点移动元素
（跟父元素没有任何元素）
（不随滚动条滚动）
2.固定定位不在占有原来的位置
sticky——粘性定位
选择器{Position：sticky;
top:10px;
}特点
1.以浏览器的可视化窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加top,left,right,bottom其中一个才有效跟页面滚动搭配使用
4.就是一开始放在一个位置上随滚轮然后碰到顶部就停在顶部
固定在版心右侧位置（小算法）
1.让固定定位的盒子left：50%。走到浏览器可视区（也可以看做版心）的一半位置
2.让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了
定位叠放次序z-index
出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序（z轴）
选择器{z-index：1；}数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序 ，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin：0 auto；水平居中，但是可以通过以下计算方法实现水平和垂直居中。