Web — 选择器+浮动+清除

文章目录

一丶包含选择器
二丶分组选择器
三丶通配符选择器
四丶浮动
五丶清除浮动的三种方法

需求：现在需要这些标签设定成特殊的样式，要怎么做到呢？

一丶包含选择器

两个都是兄弟元素，拥有同一个父亲时，可用！

h3,ul{color: red;
}

二丶分组选择器

两个都是兄弟元素，拥有同一个父亲时，可用！

#div h3{color: red;
}
#div ul{color: green;
}

三丶通配符选择器

对所有此id的元素，都会变成该样式，但是它的优先级最低

.uil{color: green;
}

四丶浮动

意思就是说，使得网页突然变成三位立体的感觉，下面的东西会认为上面的高度是0，就会上来，此时浮动的元素就会覆盖上来的界面

五丶清除浮动的三种方法

【1】直接在内联样式中清除 【不推荐】

         <div  id="left" style="clear: both;"></div>

【2】给浮动元素的父元素添加 overflow 属性 【不推荐】

 <div id="main" style="overflow: hidden;"><div id="left"></div><div id="right"></div>

【3】使用after伪元素清除浮动
html代码：

     <div class="clearfix" id="main" ><div  id="left" "></div><div id="center"></div><div id="right" ></div></div>

css代码：

 .clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}

Web — 选择器+浮动+清除相关推荐

2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
CSS清除浮动清除float浮动
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 1.背景不能显示由于浮动产生,如果对父级设置了(CSS b ...
css浮动清除以及BFC
浮动浮动原理: 在一个容器中,有两个浮动的子元素,会造成显示结果意想不到的问题.在 CSS 规范中,浮动定位不属于正常的页面流, 而是独立定位的.浮动的框可以左右移动,直到它的外边缘遇到包含框或 ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
html消除绝对定位的影响,CSS 绝对定位 ,浮动,清除浮动
首先: 我们需要知道div元素(块级元素)独占一行 box1 box2 如下图所示,box1和box2独占一行,可见如果每个div都独占一行,我们根本无法进行布局,所以我们就需要绝对定位和浮动来帮助我 ...
小米商城练习(鼠标移入阴影偏移向上抬起浮动清除),边框盒(怪异盒子,ie盒子),因为换行导致出现空格距离怎么解决？
一.鼠标移入阴影偏移向上抬起 .效果块i:hover{/* background-color: orangered; */box-shadow: 4px 4px rgb(234, 234, 234) ...
Web前端CSS清除浮动的5种方法
在移动端清除浮动布局,常用的5种方法: 使用清除浮动的类: 使用overflow属性: 使用 flex 布局: 使用grid 布局: 使用 table 布局. 根据实际情况选择适合的方法,需要注意兼容 ...
CSS学习（05结构伪类选择器浮动及清除）
文章目录一结构伪类选择器 1.1 作用与优势: 1.2 选择器 1.3 n的注意点二伪元素 2.1 区别: 2.2 种类: 2.3 注意点: 三标准流四浮动 4.1 浮动的产生 4.2 ...
web前端css清除浮动的方法总结
方法1:祖先加高法 //不常用,不能适应页面的快速变化如果一个元素要浮动,那么它的祖先元素一定要有高度.有高度的盒子,才能关住浮动. 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元 ...

Web — 选择器+浮动+清除

文章目录

一丶包含选择器

二丶分组选择器

三丶通配符选择器

四丶浮动

五丶清除浮动的三种方法

Web — 选择器+浮动+清除相关推荐

最新文章

热门文章

Web — 选择器+浮动+清除

文章目录

一丶 包含选择器

二丶 分组选择器

三丶 通配符选择器

四丶 浮动

五丶 清除浮动的三种方法

Web — 选择器+浮动+清除相关推荐

最新文章

热门文章

一丶包含选择器

二丶分组选择器

三丶通配符选择器

四丶浮动

五丶清除浮动的三种方法