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

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

浮动

浮动的元素没有块级一说,原来多大浮起来就是多大,
只要是涉及到页面的布局都是用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似乎没有应用的情况,那可能是层叠没有运用好。 层叠与继承紧密相关,继承定义了子元素可以继承父元素的样式属性。 它还与特异性有关,不同的选择器具有不同的特异性,当有几个选择器可以应用于一个元素时,继承可以决定应用哪个规则。

相关文章
|
5月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
40 4
|
28天前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
35 2
|
2月前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
3月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
2月前
|
前端开发
哪些 CSS 属性可以继承?
哪些 CSS 属性可以继承?
53 0
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
3月前
|
前端开发
CSS层叠性与继承性
CSS层叠性与继承性。
43 2
|
4月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
5月前
|
前端开发
CSS:浮动
CSS:浮动