网页编程和设计 CSS3(四)

简介: 网页编程和设计 CSS3(四)

10.2.2清除浮动

浮动副作用

当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动,

  1. 浮动元素会造成父元素高度塌陷
  2. 后续元素会受到影响
 <style>
.box{
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  left: 100px;
}
 </style>
<div class="box"></div>

 <style>
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
  position:absolute;
  left: 50px;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: green;
}
 </style>
<div class="box1"></div>
<div class="box2"></div>

清除浮动

当父元素出现塌陷的时候,对布局是不利的,所以我们必须清除副作用

解决方案有很多种

  1. 父元素设置高度
  2. 受影响的元素增加clear属性
  3. overflow清除浮动
  4. 伪对象方式

父元素设置高度

如果父元素高度塌陷,可以给父元素设置高度,撑开元素本身大小

 <style>
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
  position:fixed;
  left: 50px;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: green;
}
 </style>
<div class="box1"></div>
<div class="box2"></div>

overflow清除浮动

如果有父级塌陷,并且同级元素也收到了影响,可以使用overflow清除浮动

这种情况下,父布局不能设置高度

父级标签的样式里面加: overflow:hidden;clear: both;

<style>
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
  position:absolute;
  z-index: 2;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: green;
  position:absolute;
  z-index: 1;
}
</style>
<div class="box1"></div>
<div class="box2"></div>

伪对象方式

如果有父级塌陷,并且同级元素也收到了影响,还可以使用伪对象方式处理

为父标签添加伪类after,设置空的内容,并且使用clear:both;

这种情况下,父布局不能设置高度

 <style>
.container {
  width: 350px;
  border: 1px solid red;
}
.container::after {
  content: "";
  display: block;
  clear: both;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: left;
  margin: 5px;
}
.nav {
  width: 100px;
  height: 100px;
  background-color: red;
}
 </style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="nav"></div>

十一、定位

position属性指定了元素的定位类型

描述
relative 相对定位
absolute 绝对定位
fixed 固定定位

其中,绝对定位和固定定位会脱离文档流

设置定位之后:可以使用四个方向值进行调整位置:left、top、right、bottom

11.1相对定位

 <style>
.box{
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  left: 100px;
}
 </style>
<div class="box"></div>

11.2绝对定位

 <style>
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
  position:absolute;
  left: 50px;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: green;
}
 </style>
<div class="box1"></div>
<div class="box2"></div>

11.3固定定位

 <style>
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
  position:fixed;
  left: 50px;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: green;
}
 </style>
<div class="box1"></div>
<div class="box2"></div>

温馨提示

设置定位之后,相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整,如果父级元素不存在定位,则继续向上逐级寻找,直到顶层文档。

11.4Z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

<style>
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
  position:absolute;
  z-index: 2;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: green;
  position:absolute;
  z-index: 1;
}
</style>
<div class="box1"></div>
<div class="box2"></div>

相关文章
|
2天前
|
前端开发 编解码 移动开发
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
|
2天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
7 1
|
12天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
|
19天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
26天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
38 1
|
30天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
1月前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
1月前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
14 1
|
1月前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
1月前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。