目录
一、清除浮动
1、为什么要清除浮动
(1)由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。
(2)如下图所示:
- 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
2、清除浮动本质
清除浮动的本质是清除浮动元素脱离标准流造成的影响。
3、清除浮动策略
闭合浮动只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
4、清除浮动的方法:
(1)父元素overflow
可以给父级添加overflow 属性,将其属性值设置为hidden、auto或scroll
- 优点:代码简洁
- 缺点:无法显示溢出的部分
代码示例如下:
<title>为什么需要浮动</title>
<style>
.box {
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
(2)after之伪元素
:after方式是额外标签法的升级版。也是给父元素添加
代码样式如下所示:
<style>
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
</style>
- 优点∶没有增加标签,结构更简单
- 缺点∶照顾低版本浏览器
- 代表网站:百度、淘宝网、网易等等
(3)双伪元素(类似:after方式)
代码样式如下所示:
<style>
.clearfix::after,
.clearfix::before {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
- 优点︰代码更简洁
- 缺点:照顾低版本浏览器
- 代表网站:小米、腾讯等等
5、清除浮动总结:
为什么要清除浮动:
(1)父级没高度。
(2)子盒子浮动了。
(3)影响下面布局了,我们就应该清除浮动了。
二、PS切图
1、PS有很多的切图方式:图层切图、切片切图、PS插件切图等。
2、简单的切图方式:
(1)右击图层→快速导出为PNG
(2)合并图层→快速导出为PNG
三、定位
1、定位组成
定位︰将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式:用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
边偏移属性如下图所示:
(1)相对定位
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的。
选择器 { position: relative; }
特点:
- 盒子移动时参照点是本身
- 不脱标,继续保留原来位置
代码示例如下所示:
<title>相对定位</title>
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 300px;
background-color: pink;
}
.box2 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
(2)绝对定位
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的。
选择器 { position: absolute; }
特点:
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位。
- 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原先的位置
代码示例如下所示:
<title>绝对定位-特点示例</title>
<style>
.yeye {
position: relative;
width: 800px;
height: 800px;
background-color: hotpink;
padding: 50px;
}
.father {
/* position: relative; */
width: 300px;
height: 300px;
background-color: blue;
}
.son {
position: absolute;
top: 100px;
right: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
(3)固定定位
固定定位是元素固定于浏览器可视区的位置。主要使用场景∶可以在浏览器页面滚动时元素的位置不会改变。
选择器{ position : fixed; }
特点:
- 以浏览器的可视窗口为参照点移动元素。
- 固定定位不在占有原先的位置。
代码示例如下所示:
<title>固定定位小技巧</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
left: 50%;
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
(4)定位总结:
(5)定位叠放次序:
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)
选择器{ z-index: 1; }
注意:
- 数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上
- 如果属性值相同,则按照书写顺序,后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
四、网页布局
(1)通过盒子模型,清楚知道大部分html标签是一个盒子。
(2)通过CSS浮动、定位可以让每个盒子排列成为网页。
(3)一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。
- 垂直的块级盒子显示就用标准流布局。
- 多个块级盒子水平显示就用浮动布局。
- 如果元素自由在某个盒子内移动就定位来布局
五、显示与隐藏
本质:让一个元素在页面中隐藏或者显示出来。
1、display 属性
(1)display属性用于设置一个元素应如何显示。
- display: none ;隐藏对象
- display : block ;除了转换为块级元素之外,同时还有显示元素的意思display隐藏元素后,不再占有原来的位置。
(2)display隐藏元素后,不再占有原来的位置。
2、visibility属性
(1)visibility属性用于指定一个元素应可见还是隐藏。
- visibility : visible;元素可视
- visibility : hidden;元素隐藏
(2)visibility隐藏元素后,继续占有原来的位置。
3、Overflow溢出
(1)overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。
慎用:但是如果有定位的盒子,请慎用overflow:hidden因为它会隐藏多余的部分。
总结:
以上是我对于CSS清除浮动、PS切图、定位、网页布局以及元素显示与隐藏等相关知识的描述,最重要的是对于定位的描述,网页布局基本会涵盖标准流、浮动、定位让盒子等成排列成为网页,感谢大家的观看谢谢!