05HTML和CSS知识点总结

Posted yujiao-99

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了05HTML和CSS知识点总结相关的知识，希望对你有一定的参考价值。

[目录]

目录

1、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？

    • id选择器(myid)
    • 类选择器(.myclassname)
    • 标签选择器(div,h1,p)
    • 相邻选择器(h1+p)
    • 子选择器(ul<li)
    • 后代选择器(li a)
    • 通配符选择器(*)
    • 属性选择器(a[rel = "external"])
    • 伪类选择器(a:hover,li:nth-child)
  • 可继承：font-size, font-family, color, ul, li, dl, dd, dt
  • 不可继承：border, padding, margin, width, height
  • 优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准
    • !import>id>class>tag(!import比内联优先级高)
  • CSS3新增伪类举例：
    • p:first-of-type:选择属于其父元素的首个<p>元素的每个<p>元素
    • p:last-of-type:选择属于其父元素的最后的<p>元素的每个<p>元素
    • p:only-of-type:选择属于其父元素唯一的<p>元素的每个<p>元素
    • p:only-child:选择属于其父元素的唯一子元素的每个<p>元素
    • p:nth-child(2):选择属于其父元素的第二个子元素的每个<p>元素
    • ：enabled和:disabled控制表单控件的禁用状态
    • :checked单选框或复选框被选中

2、如何居中div，如何居中一个浮动元素？

  • 居中div，给div设置一个宽度，然后添加margin:0 auto属性
div{
    width:200px;
    margin:0 auto;
}
  • 居中浮动元素，确定容器的宽高，设置层外的外边距
.div{
    width:500px;
    height:300px;
    margin:-150px 0 0 -250px;
    position:relative;
    background-color:pink;
    left:50%;
    top:50%;
}

3、display的值和它们的作用

  • block：像块类型元素一样显示
  • none：像行内元素类型一样显示
  • inline-block：像行内元素一样显示，但其内容像块类型元素一样显示
  • list-item：像块类型元素一样显示，并添加样式列表标记

4、position的值和它们的作用

  • absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
  • fixed（老IE不支持）：生成绝对定位的元素，相对于浏览器的窗口定位
  • relative：生成相对定位的元素，相对于其正常位置进行定位
  • static：默认值，没有定位，元素出现在正常的流中
  • inherit：规定从父元素继承position属性的值

5、CSS的基本语句构成是什么？

选择器｛属性1：值1；属性2：值2；……｝

6、什么是Css Hack？ie6,7,8的hack是什么？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack

//例子
#test{
    width:300px;
    height;300px;
    
    background-color:blue;/*firefox*/
    background-color:red9;/*all ie*/
    background-color:yellow;/*ie8*/
    +background-color:pink;/*ie7*/
    _background-color:orange;/*ie6*/
}
:root #test{background-color:purple9;}/*ie9*/
@media all and(min-width:0px){#test{background-color:black;}}/*opera*/
@media screen and(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}/*chrome and safari*/

7、CSS 里的 visibility 属性有个 collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

  • 对于一般的元素，它的表现跟visibility：hidden;是一样的。元素是不可见的，但此时仍占用页面空间
  • 但例外的是，如果这个元素是table相关的元素，例如table行，tablegroup，table列，tablecolumngroup，它的表现却跟display:none一样，也就是说，它们占用的空间也会释放

在不同浏览器下的区别：在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别；在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置

8、绝对定位元素与非绝对定位元素的百分比计算的区别

绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的paddingbox来计算的；非绝对定位元素的宽高百分比则是相对于父元素的contentbox来计算的

9、图片 base64 编码的优点和缺点是什么？

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性，一般一些网站的小图标可以使用base64图片来引入

  • 优点：减少一个图片的HTTP请求
  • 缺点：
    • 根据base64的编码原理，编码后的大小会是原文件大小大的1/3，如果把大图片编码到html/css中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间
    • 使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比于直接缓存图片的效果要差很多
    • 兼容性的问题，ie8以前的浏览器不支持

10、‘display‘、‘position‘和‘float‘有什么相互关系？

  • 首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现
  • 然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值
  • 如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位
  • 如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变

总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，‘display‘的值也需要调整；其次，元素的‘float‘特性的值不是"none"的时候或者它是根元素的时候，调整‘display‘的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，‘display‘特性值同设置值

11、margin 重叠问题的理解

margin重叠指的是在垂直方向上，两个相邻元素的margin发生重叠的情况，一般来说可以分为四种情形：

  • 第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。这种情况下我们可以通过设置其中一个元素为BFC来解决
  • 第二种是父元素的margin-top和子元素的margin-top发生重叠。它们发生重叠是因为它们是相邻的，所以我们可以通过这一点来解决这个问题。我们可以为父元素设置border-top、padding-top值来分隔它们，当然我们也可以将父元素设置为BFC来解决
  • 第三种是高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠。它们发生重叠一个是因为它们相邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置border-bottom、padding-bottom来分隔它们，也可以为父元素设置一个高度，max-height和min-height也能解决这个问题。当然将父元素设置为BFC是最简单的方法
  • 第四种情况，是没有内容的元素，自身的margin-top和margin-bottom发生的重叠。我们可以通过为其设置border、padding或者高度来解决这个问题

12、对 BFC 规范（块级格式化上下文：blockformattingcontext）的理解

FC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也
不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响，一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC，display属性的值为inline-block、flex这些属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC

13、IFC 是什么？

IFC指的是行级格式化上下文，它有这样的一些布局规则：

  • 行级上下文内部的盒子会在水平方向，一个接一个地放置
  • 当一行不够的时候会自动切换到下一行
  • 行级上下文的高度由内部最高的内联盒子的高度决定

14、为什么需要清除浮动？清除浮动的方式有哪些？

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

清除浮动的方式：

  • 使用clear属性清除浮动
  • 使用BFC块级格式化上下文来清除浮动

因为BFC元素不会影响外部元素的特点，所以BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元
素高度塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定

15、使用 clear 属性清除浮动的原理

使用clear属性清除浮动，其语法如下：

clear:none|left|right|both

如果单看字面意思，clear:left应该是“清除左浮动”，clear:right应该是“清除右浮动”的意思，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。官方对clear属性的解释是：“元素盒子的边不能和前面的浮动元素相邻。”，我们对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动

还需要注意的一点是clear属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3个字，也就是clear属性对“后面的”浮动元素是不闻不问的。考虑到float属性要么是left，要么是right，不可能同时存在，同时由于clear属性对“后面的”浮动元素不闻不问，因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left等同于设置clear:both；同样地，clear:right如果有效也是等同于设置clear:both。由此可见，clear:left和clear:right这两个声明就没有任何使用的价值，至少在CSS世界中是如此，所以可以直接使用clear:both

一般使用伪元素的方式清除浮动

.clear::after{
content:‘‘;
display:table;//也可以是‘block‘，或者是‘list-item‘
clear:both;
}

clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因

16、zoom:1 的清除浮动原理

清除浮动，触发hasLayout；zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。zoom属性是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在CSS3.0规范草案中。目前非ie由于不支持这个属性，它们可以通过css3里面的动画属性scale进行缩放。

17、移动端的布局用过媒体查询吗？

假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

18、使用 CSS 预处理器吗？喜欢哪个？

SASS（SASS、LESS没有本质区别，只因为团队前端都是用的SASS）

19、CSS 优化、提高性能的方法有哪些？

  • 加载性能：
    • css压缩：将写好的css进行打包压缩，可以减少很多的体积
    • css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top0bottom0;但margin-bottom:bottom;margin-left:left;执行的效率更高
    • 减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载
  • 选择器性能：
    • 关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等
    • 如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）
    • 避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择
    • 尽量少的去对标签进行选择，而是用class
    • 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素
    • 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则
  • 渲染性能：
    • 慎重使用高性能属性：浮动、定位
    • 尽量减少页面重排、重绘
    • 去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积
    • 属性值为0时，不加单位
    • 属性值为浮动小数0.**，可以省略小数点之前的0
    • 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后
    • 不使用@import前缀，它会影响css的加载速度
    • 选择器优化嵌套，尽量避免层级过深
    • css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用
    • 正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能
    • 不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。webfonts通常体积庞大，而且一些浏览器在下载webfonts时会阻塞页面渲染损伤性能
  • 可维护性、健壮性：
    • 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性
    • 样式与内容分离：将css代码定义到外部css中

20、浏览器是怎样解析 CSS 选择器的？

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。试想一下，如果采用从左至右的方式读取CSS规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配

21、在网页中应该使用奇数还是偶数的字体？为什么呢？

  • 偶数字号相对更容易和web设计的其他部分构成比例关系。比如：当我用了14px的正文字号，我可能会在一些地方用14×0.5=7px的margin，在另一些地方用14×1.5=21px的标题字号
  • 浏览器缘故，低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px
  • 系统差别，早期的Windows里，中易宋体点阵只有12和14、15、16px，唯独缺少13px

22、margin 和 padding 分别适合什么场景使用？

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。

何时应当使用margin：

  • 需要在border外侧添加空白时。
  • 空白处不需要背景（色）时
  • 上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

何时应当时用padding：

  • 需要在border内测添加空白时。
  • 空白处需要背景（色）时。
  • 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

23、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

把常用的css样式单独做成css文件……通用的和业务相关的分离出来，通用的做成样式模块儿共享，业务相关的，放进业务相关的库里面做成对应功能的模块

24、css3 的 all 属性

all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direction这两个CSS属性。支持三个CSS通用属性值，initial,inherit,unset

  • initial是初始值的意思，也就是该元素都除了unicode-bidi和direction以外的CSS属性都使用属性的默认初始值
  • inherit是继承的意思，也就是该元素除了unicode-bidi和direction以外的CSS属性都继承父元素的属性值
  • unset是取消设置的意思，也就是当前元素浏览器或用户设置的CSS忽略，然后如果是具有继承特性的CSS，如color，则使用继承值；如果是没有继承特性的CSS属性，如background-color，则使用初始值

25、为什么不建议使用统配符初始化 css 样式

采用{pading:0;margin:0;}这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即可，并不需使用通配符来初始化。

26、absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？

  • 内联元素也可以作为“包含块”所在的元素
  • “包含块”所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素
  • 边界是paddingbox而不是contentbox。

27、对于 hasLayout 的理解？

hasLayout是IE特有的一个属性。很多的IE下的cssbug都与其息息相关。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

28、元素竖向的百分比设定是相对于容器的高度吗？

如果是height的话，是相对于包含块的高度；如果是padding或者margin竖直方向的属性则是相对于包含块的宽度。

29、全屏滚动的原理是什么？用到了 CSS 的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器及容器内的页面取当前可视区高度，同时容器的父级元素overflow属性值设为hidden，通过更改容器可视区的位置来实现全屏滚动效果。主要是响应鼠标事件，页面通过CSS的动画效果，进行移动。

overflow：hidden；transition：all1000msease；

30、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。

参考：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md

以上是关于05HTML和CSS知识点总结的主要内容，如果未能解决你的问题，请参考以下文章

IFE_part1(task1-7)_blog.html总结

Tailwind.css 体验总结

Tailwind.css 体验总结

HTML和CSS(部分)知识点总结

HTML和CSS(部分)知识点总结

HTML和CSS(部分)知识点总结