写点什么

css 学习笔记【三】浮动,不脱离文档流,继承和层叠

作者:黎燃
  • 2022 年 5 月 19 日
  • 本文字数:868 字

    阅读完需:约 3 分钟

浮动

浮动的元素没有块级一说,原来多大浮起来就是多大,只要是涉及到页面的布局都是用float布局的<style>       #d1 {           height: 200px;           width: 200px;           background-color: red;           float: left;/*向左浮动*/
} #d2 { height: 200px; width: 200px; background-color: blue; float: right;/*向右浮动*/
}
复制代码


浮动带来的影响·解决浮动带来的影响·溢出属性·定位·验证浮动和定位是否脱离文档流·Z-index 模态框·透明度·简单的博客园搭建·JS 编程前戏解决浮动带来的影响带来父标签塌陷的问题解决浮动带来的影响的 推导步骤 1·自己增加一个 div 设置高度 2· 利用 clear 属性


d4 {clear: left;/*该标签的左边(地面和空中)都不能有浮动的元素 clear:right即为右侧不能有,both即为两侧都不能有*/}
复制代码


3·通用的解决浮动带来影响的方法在写 html 之前 先提前写好处理浮动带来印象的 css 代码


.clearfix:after{content:'';display:block;/*把一个空的内容设置为一个块级标签,块级标签自带独占一行的属性*/clear:both;/*使标签两侧都不能存在浮动的标签*/}
复制代码


之后只要出现了标签塌陷的问题就给该塌陷的标签增加一个 clearfix 属性即可

验证浮动和定位是否脱离文档流

浮动相对定位绝对定位固定定位

不脱离文档流

1·相对定位不脱离文档流脱离文档流 1·浮动 2·绝对定位 3·固定定位在学习 H5 与 CSS 的过程中,会遇到很多让人疑惑的地方,我的解决方法是实践与记录。先将问题暂时记在记事本,再在过程中不断试验并记录截图,方便后期总结对比。总结的过程中也会重新发现很多当初没有注意或没有深入思考的点,而正是这些点促成我们的进步。

继承和层叠

层叠是指当元素应用了多个样式规则,哪个规则优先应用。 如果你曾经遇到过无法理解为什么某些 CSS 似乎没有应用的情况,那可能是层叠没有运用好。 层叠与继承紧密相关,继承定义了子元素可以继承父元素的样式属性。 它还与特异性有关,不同的选择器具有不同的特异性,当有几个选择器可以应用于一个元素时,继承可以决定应用哪个规则。

发布于: 刚刚阅读数: 2
用户头像

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

评论

发布
暂无评论
css 学习笔记【三】浮动,不脱离文档流,继承和层叠_5月月更_黎燃_InfoQ写作社区