继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS知识点与面试题解析

浪里行舟_前端工匠
关注TA
已关注
手记 58
粉丝 1.1万
获赞 786

前言

CSS 和 HTML 是网页开发中布局相关的组成部分,涉及的内容比较多和杂乱,本小节重点介绍下常考的知识点。

选择器的权重和优先级

CSS 选择器有很多,不同的选择器的权重和优先级不一样,对于一个元素,如果存在多个选择器,那么就需要根据权重来计算其优先级。

权重分为四级,分别是:

  • 代表内联样式,如style=“xxx”,权值为 1000;
  • 代表 ID 选择器,如#content,权值为 100;
  • 代表类、伪类和属性选择器,如.content、:hover、[attribute],权值为 10;
  • 代表元素选择器和伪元素选择器,如div、p,权值为 1。

需要注意的是:通用选择器(*)、子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为 0。 权重值大的选择器其优先级也高,相同权重的优先级又遵循后定义覆盖前面定义的情况。

盒模型

什么是“盒子”

初学 CSS 的朋友,一开始学 CSS 基础知识的时候一定学过padding border和margin,即内边距、边框和外边距。它们三者就构成了一个“盒子”。就像我们收到的快递,本来买了一部小小的手机,收到的却是那么大一个盒子。因为手机白色的包装盒和手机机器之间有间隔层(内边距),手机白色盒子有厚度,虽然很薄(边框),盒子和快递箱子之间还有一层泡沫板(外边距)。这就是一个典型的盒子。


如上图,真正的内容就是这些文字,文字外围有 10px 的内边距,5px 的边框,10px 的外边距。看到盒子了吧?

题目:盒子模型的宽度如何计算

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">
    之前看过一篇文章,叫做《浏览器工作原理:新式网络浏览器幕后揭秘》,
    文章言简意赅的介绍的浏览器的工作过程,web前端
</div>

如上图,得到网页效果之后,我们可以用截图工具来量一下文字内容的宽度。发现,文字内容的宽度刚好是 300px,也就是我们设置的宽度。
图片描述
因此,在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:(内容宽度 + border宽度 + padding宽度 + margin宽度)之和。

浮动float

float 用于网页布局比较多,使用起来也比较简单,这里总结了一些比较重要、需要注意的知识点,供大家参考。

浮动的特点,可以用八个字总结:脱标、贴边、字围和收缩。
浮动的缺点:

  • 破坏性

float 破坏了父标签的原本结构,使得父标签出现了坍塌现象。导致这一现象的最根本原因在于:被设置了 float 的元素会脱离文档流。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题。

  • 包裹性

普通的 div 如果没有设置宽度,它会撑满整个屏幕,在之前的盒子模型那一节也讲到过。而如果给 div 增加float:left之后,它突然变得紧凑了,宽度发生了变化,把内容中的三个字包裹了——这就是包裹性。

如何清理浮动?

清除浮动不是不用浮动,清除浮动产生的父容器高度塌陷

套路1:给浮动元素的父元素添加高度(扩展性不好)

如果一个元素要浮动,那么它的父元素一定要有高度。高度的盒子,才能关住浮动。可以通过直接给父元素设置height,实际应用中我们不大可能给所有的盒子加高度,不仅麻烦,并且不能适应页面的快速变化;另外一种,父容器的高度可以通过内容撑开(比如img图片),实际当中此方法用的比较多。

套路2:clear:both;

在最后一个子元素新添加最后一个冗余元素,然后将其设置clear:both,这样就可以清除浮动。这里强调一点,即在父级元素末尾添加的元素必须是一个块级元素,否则无法撑起父级元素高度

	<div id="wrap">
	    <div id="inner"></div>
	    <div style="clear: both;"></div>
	</div>
	#wrap{
	      border: 1px solid;
	}
	#inner{
	      float: left;
	      width: 200px;
	      height: 200px;
	      background: pink;
	}

套路3:clearfix

清除浮动的影响,一般使用的样式如下,统称clearfix代码。所有 float 元素的父容器,一般情况下都应该加clearfix这个 class。

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}
<div class="clearfix">
    <img src="image/1.png" style="float: left"/>
    <img src="image/2.png" style="float: left"/>
</div>

给浮动元素的父容器添加一个clearfix的class,然后给这个class添加一个:after伪元素,实现元素末尾添加一个看不见的块元素来清理浮动。这是通用的清理浮动方案,推荐使用

套路4:给父元素使用overflow:hidden;

这种方案让父容器形成了BFC(块级格式上下文),而BFC可以包含浮动,通常用来解决浮动父元素高度坍塌的问题。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC:

  • float 为 left | right

  • overflow 为 hidden | auto | scorll

  • display 为 table-cell | table-caption | inline-block

  • position 为 absolute | fixed

这里可以给父元素设置overflow:auto,但是为了兼容IE最好使用overflow:hidden。

但这种办法有个缺陷:如果有内容出了盒子,用这种方法就会把多的部分裁切掉,所以这时候不能使用。

BFC的主要特征:

  • BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。

  • BFC不会重叠浮动元素

  • BFC可以包含浮动,这可以清除浮动。

参考文章

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP