伪元素与伪类
为什么css要引入伪元素和伪类 https://zhuanlan.zhihu.com/p/46909886
伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素
伪类和伪元素可以理解为有一定逻辑能力的css
- 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。
比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,
可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
还有一种比如first-child看做是顺序选择器 - 伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前
增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
清除浮动
-
1、父级添加高度
- 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
- 优点:简单、代码少、容易掌握
- 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
- 建议:不推荐使用,只建议高度固定的布局时使用
-
2、内结尾处+空div标签再+clear:both (内墙法)
- 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
- 优点:简单、代码少、浏览器支持好、不容易出现怪问题
- 缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
- 建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
-
3、父级div定义 伪类:after (类似第二种)推荐
- 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE专有属性)可解决ie6,ie7浮动问题 (其他浏览器不用)
- 优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
- 缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
- 建议:推荐使用,建议定义公共类,以减少CSS代码。
.clearfloat:after {/* 这三句必须写 */ display:block; clear:both; content:""; }
-
4、与浮动父级(第一个盒子)同级,+空div标签再+clear:both (外墙法)
- 在两个盒子中间添加一个额外的块级元素
- 第一个盒子高度为空,但后面布局会当做有高处理,空导致上下外边距失效
- 给这个额外添加的块级元素设置clear: both;属性
- 外墙法它可以让第二个盒子使用margin-top属性
- 外墙法不可以让第一个盒子使用margin-bottom属性
-
5、父级div定义 overflow:hidden 推荐
- 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
- 优点:简单、代码少、浏览器支持好
- 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
- 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
-
6、父级div定义 overflow:auto
- 与方法4相同,这个不能用滚动条,所以不推荐使用哦!
-
7、父级div 也一起浮动
- 原理:所有代码一起浮动,就变成了一个整体
- 优点:没有优点
- 缺点:会产生新的浮动问题。
- 建议:不推荐使用,只作了解
-
8、父级div定义 display:table
- 原理:将div属性变成表格
- 优点:没有优点
- 缺点:会产生新的未知问题。
- 建议:不推荐使用,只作了解。
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效
-
9、结尾处加 br标签 clear:both
- 与第二种方法一样,这里只要是块元素都是可以的;
overflow:hidden的原理BFC
BFC(Block Formatting Context),块级格式化上下文,它规定了内部的块级元素的布局方式,
默认情况下只有根元素(即body)一个块级上下文
产生条件
只需满足以下条件之一:
- float的值不为none;
- overflow的值不为visible;
- position的值为fixed / absolute;
- display的值为table-cell / table-caption / inline-block / flex / inline-flex。
主要规则
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;
- 外面的元素也不会影响到容器里面的子元素;
计算BFC的高度时,浮动元素也参与计算
BFC的应用
- 1)、消除margin合并
- 元素(包括兄弟、父子元素等)之间之所以会发生margin合并,是因为它们属于同一个BFC。所以,我们就知道怎么办了
- 2)、包含浮动子元素
- 我们可以利用BFC可以包含浮动这一特性来清除浮动
CSS的解析由内到外+css的权重等级
css那些居中
垂直居中
- 1、使用子绝父相(块级元素)(以下选一)
- 负外边距减去自身
- transform: translate(0, -50%);减去自身
- margin: -(自身高/2)% 0 0 0;
- 子: top: 0; bottom: 0;margin: auto;
- 2、使用padding实现子元素的垂直居中
可以利用父元素不设置高度,子元素内边距实现水平垂直居中
#box {
/*父元素是不能设置高度*/
width: 300px;
background: #ddd;
padding: 100px 0;
}
#child {
width: 200px;
height: 100px;
background: #F7A750;
line-height: 50px;
}
- 3、设置第三方基准
<div id="box">
<div id="base"></div>
<div id="child">今天写了第一篇博客,希望可以坚持写下去!</div>
</div>
#box {
width: 300px;
height: 300px;
background: #ddd;
}
#base {
height: 50%;/*空盒子占一半*/
background: #AF9BD3;
}
#child {
height: 100px;
background: rgba(131, 224, 245, 0.6);
line-height: 50px;
margin-top: -50px;/*减去自身*/
}
- 4、flex布局
- display: flex; align-items: center;
- display: flex; flex-direction: column; justify-content: center;
- 5、网格布局
- 6、表格布局
- 7、行内:行高和高相同
水平
- 1、margin:0 auto;(块级)
- 2、text-align: center;(行内)
- 3、子绝父相
- 4、flex
- 5、网格
- 6、表格