CSS伪元素/伪类/清除浮动/居中等问题的总结

最新推荐文章于 2024-08-12 12:31:02 发布

夏草v

最新推荐文章于 2024-08-12 12:31:02 发布

阅读量761

点赞数 1

分类专栏：春招面试题库

本文链接：https://blog.csdn.net/qq_16546829/article/details/87098444

版权

春招面试题库专栏收录该内容

1 篇文章 0 订阅

订阅专栏

伪元素与伪类

为什么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;/*减去自身*/
}