头部背景图片
小畅童鞋的学习笔记 |
小畅童鞋的学习笔记 |

CSS面经

秋招季,总结一下CSS部分面经~

一. CSS3盒子模型

  • 盒子模型
    IE 盒子模型和标准 W3C 盒子模型的范围包括 margin、border、padding、content
    使用“标准 W3C 盒子模型”:在网页顶部加上Doctype声明。
  • 在不同标准里width的区别
    在标准 W3C 盒子模型中,width指content部分的宽度
    在 IE 盒子模型中,width表示(content+padding+border)这三个部分的宽度
  • box-sizing
    box-sizing: content-box 是 W3C 盒子模型;content-box动态大小 | 受 “边框” “边距” 等属性影响
    box-sizing: border-box 是 IE 盒子模型;border-box固定大小 | 不受 “边框” “边距” 等属性影响

    Image1.png

  • margin和padding可以为负么?
    margin可以为负,而且经常用于布局。
    padding不能为负,即使为负,也会调整为0.

  • margin塌陷解决办法:
    https://www.cnblogs.com/syp172654682/p/7671830.html

二. 块级元素、行内元素、块级行内元素

列举display的值:
Image2.png

1. 行内元素:display:inline

  • 行内元素:a、b、span、img、input、strong、select、label、em、button、textarea(字体、input类、span)等;
  • 特性
    (1) 设置宽高无效;
    (2) margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间;
    (3) 不会自动进行换行;
  • 水平居中:通过给父元素设置 text-align:center
  • 垂直居中
    (1) 子元素line-height:父元素的height;
    (2) 父元素display 为 table-cell(设置为表格单元显示), vertical-align:middle属性

2. 块状元素:display:block

  • 块状元素:div、p、nav、aside、header、footer、section、article、ul-li、address、h1-h6、blockquote、dl、dt、dd;
  • 特性
    (1) 能够识别宽高;
    (2) margin和padding的上下左右均对其有效;
    (3) 可以自动换行;
    (4) 多个块状元素标签写在一起,默认排列方式为从上至下;
  • 水平居中
    (1) margin:0 auto;
    (2) 使用position:relative或absolute 和 left:50%
  • 垂直居中
    (1) 父元素添加display设为flex,再通过align-items:center;
    (2) 父元素:position:relative; 子元素:position: absolute; top: 50%; margin-top=-height(子)/2;
    (3) 父元素:position:relative 子元素:position:absolute; top:0; bottom:0;margin:auto;
  • 水平垂直居中
    (1)父元素:position:relative; 子元素:position: absolute; top: 50%; left: 50%; margin-top=-height(子)/2; margin-right=-width/2;(已知块级元素的宽和高)
    (2)父元素:position:relative 子元素:position:absolute; top:0; left:0; bottom:0; right:0; margin:auto;
    (3)父元素样式属性display:flex; 子元素使用margin:auto;
  • 溢出处理:当内容大于容器
    overflow: hidden;隐藏溢出内容
    overflow: auto;当内容溢出时,显示滚动条
    overflow-y: auto; 只显示上下滚动条
    overflow: scroll;无论是否溢出,都显示滚动条占位:隐藏了元素内容,但空间仍然保持
    visibility: hidden;
    width&height:(min-width max-width用于响应式布局、width:auto与父容器等宽)

3. 行内块状元素:display:inline-block

  • 特征
    (1) 不自动换行
    (2) 能够识别宽高
    (3) 默认排列方式为从左到右;(行内元素和块状元素都使用)

4. 垂直水平居中方法

  • 已知宽高(4种方法)

    Image3.pngImage4.pngImage5.pngImage6.png
  • 未知宽高(考虑flex布局和transform)

三. css相对定位、绝对定位

  • 静态定位(position:static)不脱离标准文档流
    这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。不能使用top?bottom??left??right??z-index???

  • 相对定位(position: relative)不脱离标准文档流
    相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动.

  • 绝对定位(position: absolute)脱离标准文档流
    这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

  • 固定定位(position: fixed)脱离标准文档流
    绝对定位方式,直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。

  • inherit 规定从父元素继承 position 属性的值。

  • 嵌套使用:子容器在父容器底部居中:
    父容器:position:relative;子容器:position:absolute;bottom:0;left:0;right:0;margin: auto

四. Flex布局

容器的属性以下6个属性设置在容器上:

  • flex-direction:决定主轴的方向
  • flex-wrap:定义如果一条轴线排不下,如何换行
  • flex-flow:是flex-direction属性和flex-wrap属性的简写形式
  • justify-content:定义了项目在主轴上的对齐方式
  • align-items:定义项目在交叉轴上如何对齐
  • align-content:定义了多根轴线的对齐方式。

项目的属性以下6个属性设置在项目上:

  • order:定义项目的排列顺序
  • flex-grow:定义项目的放大比例
  • flex-shrink:定义了项目的缩小比例
  • flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)
  • flex:是flex-grow, flex-shrink 和 flex-basis的简写
  • align-self:允许单个项目有与其他项目不一样的对齐方式

设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

五. CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?

CSS 选择符:

  1. id选择器(# myid)
  2. 类选择器(.myclassname)
  3. 标签选择器(div, h1, p)
  4. 相邻选择器(h1 + p)
  5. 子选择器(ul > li)
  6. 后代选择器(li a)
  7. 通配符选择器( * )
  8. 属性选择器(a[rel = “external”])
  9. 伪类选择器(a: hover, li:nth-child)

可继承的样式:

  1. font-size
  2. font-family
  3. color
  4. text-indent

不可继承的样式:

  1. border
  2. padding
  3. margin
  4. width
  5. height

优先级算法:

  1. 优先级就近原则,同权重情况下样式定义最近者为准;
  2. 载入样式以最后载入的定位为准;
  3. !important > 内联> id > class > tag

权值:

  1. 内联样式表的权值最高 1000;
  2. ID 选择器的权值为 100
  3. Class 类选择器的权值为 10
  4. HTML 标签选择器的权值为 1
  5. 多个进行累加,比较总和

六. CSS伪类

1. CSS 伪类用于向某些选择器添加特殊的效果。

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
Image11.png
注意:first-child和last-child都得用于子元素,而不是父元素。

2. 语法

selector : pseudo-class {property: value}
selector.class : pseudo-class {property: value}

3. 锚伪类

a:hover {color: #FF00FF} / 必须被置于 a:link 和 a:visited 之后,才是有效的/
a:active {color: #0000FF} / 选定的链接 必须被置于 a:hover 之后,才是有效的/

4. 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元素。

:first-child与:first-of-type的不同
:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个
:enabled / :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

七. CSS伪元素

1. CSS 伪元素用于向某些选择器设置特殊效果。

与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
Image12.png
注意::first-line和:first-letter伪元素只能用于块级元素。

2. 语法:

selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

八. css3动画

  • 先创建动画:
    @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst
{ 
from {background: red;}
to {background: yellow;}
}
  • 绑定选择器:
    当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
    指定至少这两个CSS3的动画属性绑定向一个选择器:
    规定动画的名称
    规定动画的时长
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

九. CSS3新增内容

  • 边框border-radius(圆角边框)box-shadow(边框阴影)border-image
  • 背景background-size:宽高 background-origin(content-box,padding-box,border-box)
  • 文本效果 text-shadow word-wrap(break-word)text-wrap?s
  • 字体 @font-face {font-family:ddd;src:url(‘.ttf’)}定义自己的字体
  • 字体描述符:font-family,src,font-sketch,font-style…
  • 2D转换 translate(向左移动距离,向下移动)\ratate(度数)
  • 3D转换ratateX() ratateY()
  • 过渡 transition
  • 动画 @keyframes{from,to} animation
  • 多列 column-count:数字创建多列文本
  • 用户界面resize(用户可改变大小),box-sizing(border-box,content-box)

十. 什么是CSS Hack?

CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号,以达到应用不同的CSS样式的目的。(不同浏览器识别不同css样式)
比如IE6能识别下划线“”和星号“”,IE7能识别星号“”,但不能识别下划线” ”,而firefox两个都不能认识。https://blog.csdn.net/qq_31635733/article/details/81660897

十一. 浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?

IE浏览器的内核Trident、Mozilla的Gecko、google的WebKit、Opera内核Presto;

浏览器的兼容性:

  1. png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8位.
  2. 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
  3. IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。…
    https://blog.csdn.net/qq_38892819/article/details/75426133

十二. display:none、visibility:hidden、visibility:collapse和opacity:0的区别

Image7.png
Collapse:是否折叠(即是否不占据文档流位置);
event:是否还能触发事件;
taborder:是否还可以通过tab键选择到。其中,visibility:collapse在表格元素中yes,即不占据文档流位置,在其他元素占据位置

行内元素display:inline对应不显示为display:none
块状元素display:block对应不显示为visibility: hidden

  • display:none设置该样式的元素(对象)的宽度、高度等各种属性值都将“丢失”,其元素不占据文档空间。不会触发事件
  • visibility: hidden设置该样式的元素(对象)仅仅是视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也就是它仍具有高度、宽度等属性值。不会触发事件
  • opacity:0opacity是CSS3的属性,0(完全透明),1(完全不透明),inherit设置此样式的元素(对象)仍然占据空间,并且能触发事件。
  • visibility:collapse在表格元素的tr中使用时,会删除一行或者一列,但是不会影响表格布局。若在td上使用,仅隐藏此单元格内容,仍然占据位置。应用与除表格外的其他元素,则仍然会为其保留位置,不会触发事件,也不会通过tab键选择到。

十三. visibility的值

Image8.png

十四. Float影响,清除浮动几种方法

  • 浮动影响的主要是设置浮动元素之后的元素,对之前没有浮动的元素不产生影响。
    不管是设置浮动还是未设置浮动,其垂直位置不变,紧紧跟在未设置浮动元素之后,上边距与上一个元素的下边距对齐。
  • 如果父元素没有设置高度,在子块没有浮动的情况下,父块会被撑开,但是内部子块浮动的话,就会产生以下影响:
    1. 父元素的背景不能显示
    2. 父元素的边框不能撑开,导致父元素之后的兄弟元素布局乱掉。
    3. margin、padding值不能正确显示

十五. 清除浮动的几种方法:

  1. 设置父元素的高度为子元素的最高高度加上父元素的上下边框宽度。
  2. 给父元素结束标签之前添加一个div标签,将此标签的css设置为:clear:both或者是clear:left;(clear规定哪一侧不允许有浮动元素)
  3. 给父元素添加overflow:hidden
  4. :after作用于浮动元素的父元素将其设置为display:block

其中:
clear:both;指清除所有浮动;
content: ‘.’; display:block;对于FF/chrome/opera/IE8不能缺少,其中content()可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清除浮动。

十六. 为什么要初始化CSS样式。

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)

  1. link属于HTML标签,而@import是CSS提供的;
  2. 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
  3. import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
  4. link方式的样式的权重 高于@import的权重.

十八. 对BFC规范的理解?

BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。
(W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。)

十九. 解释下 CSS sprites,以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是也有限制,一般浏览器都是6个。对于未来而言,就不需要这样做了,因为有了http2

二十. 圣杯布局、双飞翼布局

两边固定,中间自适应。
Image9.pngImage10.png

  • 与圣杯布局相比,双飞翼HTML中为main添加了一个子元素main-wrap,这个小小的改动是为了之后处理main中内容被遮盖的问题,这也是两者实现方式最大的不同点。
  • 与圣杯布局一样,一开始三个col都设置float: left,为了把left和right定位到左右部分,采用负边距,left部分margin-left: -100%,right部分margin-right: -190px。之后就是处理main中内容的遮盖问题,只需设置main-wrap的左右外边距即可解决。
  • 相比圣杯布局,双飞翼不必设置左右栏的position: relative,也不必设置左右left、right值,只需多添加一个子元素包含,相应的padding换成margin。总的说来简单不少。
  • 双飞翼布局的好处:主要的内容先加载的优化;兼容目前所有的主流浏览器,包括IE6在内;
    衍生布局:http://www.cnblogs.com/lyzg/p/5160570.html
    CSS布局面试:http://developer.51cto.com/art/201504/473284.htm
Lililich's Blog