一、浮动
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
1.什么是浮动
将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
选择器{ float : 属性值; }
none:元素不浮动
left:元素左浮动
right:元素右浮动
2.浮动特性(重点)
(1)脱离标准普通流的控制(浮)移动到指定位置(动),即脱标
(2)浮动的盒子不再保留原先的位置
(3)行显示
- 多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对齐排列
- 浮动的元素是互相贴靠在一起的(没缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子另起一行。
(4)浮动元素均具有行内块元素
- 如果块级盒子没设置宽度,默认和父级一样,添加浮动后大小根据内容改变
3.浮动元素+标准流父级 搭配使用
先用标准流的父元素排列上下位置,内部子元素采取浮动排列左右位置。
二、常见网页布局
1.常见布局
2.浮动布局注意点
- 一个元素浮动了,理论上其余的兄弟元素也要浮动
- 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
三、清除浮动
1.由于父级盒子很多情况下不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时就会影响下面的标准流盒子
属性值 | 描述 |
left | 不允许左侧有浮动元素 |
right | 不允许右侧有浮动元素 |
both(用的最多) | 同时清除左右两侧浮动的影响 |
闭合浮动
2.清除浮动方法
- 额外标签法,即隔墙法,W3C推荐做法
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
3.额外标签法
在浮动元素末尾添加一个空的标签。例如<div style = "clear : both"></div>,或者其他标签(<br/>)
这个新的空标签必须是块级元素
4.父级添加overflow属性
给父级添加overflow属性,值有hidden、auto或scroll
优点:简洁
缺点:无法显示溢出部分
5.父级添加after伪元素
.clearfix::after {
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
记得给body里的父盒子添加类名 空格隔开
优点:没有增加标签,结果简单
缺点:照顾低版本浏览器
6.父级添加双伪元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
记得给body里的父盒子添加类名(clearfix) 空格隔开
优点:代码更简洁
缺点:照顾低版本浏览器
代表网站:小米、腾讯
7.总结
四、PS切图
1.常见图片格式
2.图层切图
3.切片切图
4.切片工具