前端面试题之CSS

两种盒模型

盒模型分为W3C的标准模型IE模型

盒模型又称为框模型,包含了元素内容(content)、内边距(padding)、外边距(margin)、边框(border)

如图:

W3C的标准模型:width/height属性指content

IE模型:width/height属性由content+padding+border组成

这两种模型的区别就是计算的宽度和高度不同

通过CSS3新增的属性box-sizing:content-box | border-box分别设置盒模型为标准模型(content-box)和IE模型(border-box)
W3C的标准模型:

<div class="content-box"></div>
.content-box {
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid red;
  margin: 10px;
}

其中:width=100px


IE模型:

<div class="border-box"></div>
.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid red;
  margin: 10px;
}

其中:width= content + 2padding + 2border = 100px

相对比较而言:border-box更好用!!!

扩展:JS如何设置获取盒模型对应的宽和高呢?

dom.style.width / height;   // 设置获取的是内联样式
dom.currentStyle.width / height;   // IE支持
window.getComputedStyle(dom).width / height;   // 兼容性好
dom.getBoundingClientRect().width / height;   // 计算一个元素的绝对位置

为什么要初始化CSS样式

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

对CSS样式初始化后会对SEO有一定的影响,所以力求影响最小的情况下进行初始化。

最简单也不建议初始化的方式:

* {
  margin: 0;
  padding: 0;
}

可以使用normalize.css进行CSS初始化。

以下是淘宝的样式初始化代码:

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

块级元素与行内元素分别有哪些以及各有什么特点

行内元素

一个行内元素只占据它对应标签的边框所包含的空间,行内元素前后不会产生换行,一系列的行内元素都在一行显示,直到该行排满为止再另起一行。

行内元素有:a、img、span、button、input、textarea、label、em、kbd、br、b、i、tt等等

特点:

  1. 和其他元素都在同一行上;
  2. 宽度(width)、高度(height)、内边距的top / bottom(padding-top / padding-bottom)和外边距的top / bottom(margin-top / margin-bottom)都不可改变,但是padding、margin的left和right是可以设置的,line-height也是有效的。
  3. 宽度就是它的文字或图片的宽度,是不可改变的。
  4. 行内元素只能容纳文本或者其他行内元素,不能容纳块级元素。
  5. 行内元素会在一条直线上排列,都是同一行的,水平方向排列。

块级元素

块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。

块级元素有:div、p、h1~h6、hr、ul、ol、li、dd、dl、table等等

特点:

  1. 独占一行,每一个块级元素都会从新的一行重新开始
  2. 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可设置
  3. 如果宽度没有设置,则默认宽度为容器的100%
  4. 块级元素可以容纳行内元素和其他块级元素
  5. 块级元素各占据一行,垂直方向排列。

position有哪些常用的值

static

static是position属性的默认值,如果省略了position属性,浏览器就认为该元素为static定位。

浏览器会按照源码的顺序,决定每个元素的位置,这称为"正常的页面流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。

static定位所导致的元素位置,是浏览器自主决定的,所以这时top、bottom、left、right这四个属性无效,并且z-index设置也无效。

relative

relative表示相对定位,是默认参照父级的原始点为原始点来定位的,若无父元素则按照上一个元素的底部为原始点进行定位。

  1. 相对定位不会影响元素本身的特性
  2. 不会使元素脱落文档流
  3. 没有定位偏移量时对元素无影响
  4. top、bottom、left、right、z-index属性有效

absolute

absolute表示绝对定位,相对于static定位以外的第一个父元素进行定位。

  1. 使元素完全脱离文档流
  2. 可以改变行内元素的特性,即可以设置宽高
  3. 在未设置宽度时,宽度由内容撑开宽度
  4. 相对于最近的一个有定位的父元素偏移,若父元素没有定位则逐层向上找直至body为止
  5. top、bottom、left、right、z-index属性有效

fixed

fixed表示绝对定位,相对于浏览器窗口进行定位。即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,就好像固定在网页上一样。

搭配top、bottom、left、right这四个属性一起使用,表示元素的初始位置是基于视口计算的,否则初始位置就是元素的默认位置。


CSS中伪类与伪元素的区别

参考文章 - 总结伪类与伪元素


如何垂直居中

传送门 - CSS实现垂直居中的几种方法


如何水平居中

传送门 - CSS实现水平居中的几种方法


flex怎么用,常用属性有哪些

传送门 - Flex布局

腾讯云加社区 - 30分钟彻底弄懂flex布局


grid布局怎么用

阮一峰 - CSS Grid网格布局教程


display:none; 、visibility:hidden; 、opacity:0; 有什么区别

display:none;

  1. 隐藏对应的元素,浏览器不会渲染,在文档布局中不占据空间;
  2. 无法进行 DOM 事件监听;
  3. 会引起重排,性能较差;
  4. 不会被子元素继承;

visibility:hideen;

  1. 隐藏对应的元素,浏览器会渲染,在文档布局中占据原来的空间;
  2. 无法进行 DOM 事件监听;
  3. 只会引起重绘,性能较高;
  4. 会被子元素继承,子元素可以设置 visibility: visible; 来进行显示;

opacity:0;

  1. 将透明度为 100%,元素被隐藏了,在文档布局中占据原来的空间;
  2. 可以进行 DOM 事件监听;
  3. 提升为合成层,不会触发重绘,性能较高;
  4. 会被子元素继承,但是子元素设置 opacity: 1; 无效;

使用 display:none; 属性后,HTML 元素(对象)的宽度、高度等各种属性值都将丢失;使用 visibility:hideen; 属性后,HTML 元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在;而使用opacity:0;属性后,也仅仅是将透明度设置成了 100%,以致于在视觉上完全看不见。

示例代码


BFC是什么,举例回答

传送门 - 理解CSS中的BFC

[译]:BFC与IFC


CSS选择器的优先级

  1. 越具体优先级越高;
  2. 写在后面的覆盖前面的;
  3. !important,最高,但是要少用!
  4. !important > 行内样式 > id > class > tag

MDN - 优先级

有趣:256个class选择器可以干掉1个id选择器


CSS哪些属性可以继承

继承就是指子节点默认使用父节点的样式属性。

可继承的属性大概有颜色、文字、字体间距、行高、对齐方式、列表的样式。

  1. 所有元素可继承:元素可见性(visibility)、光标属性(cursor);
  2. 内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction;
  3. 块状元素可继承:text-indent、text-align;
  4. 列表元素可继承:list-style、list-style-type、list-style-position、list-style-image;

如何清除浮动

方法一

为float后的元素添加clear属性

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
.a,
.b {
  width: 100px;
  height: 100px;
  border: 5px solid red;
}
.b {
  float: right;
}
.a {
  float: left;
}
.c {
  border: 5px solid blue;
  height: 100px;
  clear: both;
}

添加clear属性

示例代码 - 方法一


方法二

给父容器添加clearfix的class,用伪元素clearfix::after设置样式,清除浮动。

<div class="parent clearfix">
    <div class="a">a</div>
    <div class="b">b</div>
</div>
.parent {
  border: 5px solid red;
}
.a,
.b {
  width: 100px;
  height: 100px;
  border: 5px solid blue;
}
.a {
  float: left;
}
.b {
  float: right;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

使用伪元素

示例代码 - 方法二


方法三

给父容器添加overflow:hidden或者auto。

<div class="parent">
    <div class="a">a</div>
    <div class="b">b</div>
</div>
.parent {
  border: 5px solid red;
  overflow: auto;
}
.a,
.b {
  width: 100px;
  height: 100px;
  border: 5px solid blue;
}
.a {
  float: left;
}
.b {
  float: right;
}

添加overflow

示例代码 - 方法三


em与rem

传送门 - 动态REM


CSS3有哪些新特性

  1. 新增各种css选择器,例如::root:last-child:first-of-type:last-of-type等等
  2. 三个动画相关特性:过渡(transition)、2D或3D转换(transform)、动画(animation)
  3. 三个边框属性:圆角边框(border-radius)、添加阴影(box-shadow)、使用图片来绘制边框(border-image)
  4. 背景属性:确定背景画区(background-clip)、确定背景的位置(background-origin)、调整背景图片的大小(background-size)
  5. 文字效果:强制换行(word-wrap)、当文本溢出包含它的元素该如何显示(text-overflow)、文本阴影(text-shadow)、规定添加到文本的修饰(text-decoration)
  6. 渐变:线性渐变(linear-gradient)、径向渐变(radial-gradient)
  7. 多列布局
  8. 媒体查询:@media
  9. 字体:@font-face

去除inline-block元素间间隙的方法

传送门 - 去除inline-block元素间间隙的几种方法


如何适配各种移动设备

白树 - 移动web资源整理

流云诸葛 - 从网易与淘宝的font-size思考前端设计稿与工作流


如何添加代码使得图片宽度为300px

<img src="#.png" style="width:500px!important;">

使用 CSS 有如下三种方法:

// 1. 最简单的就是直接在后面添加宽度并设置 !important 来覆盖掉
<img src="#.png" style="width:500px!important; width:300px!important;">

// 2. 设置最大宽度
<img src="#.png" style="width:500px!important; max-width:300px;">

// 3. 使用 transform 来缩小
<img src="#.png" style="width:500px!important; transform:scale(0.6,0.6);">

使用 JS 的方法:

// 使用 setAttribute 来属性
let img = document.querySelector("img")
img.setAttribute("style", "width:300px;")

示例代码


用纯CSS创建一个三角形

CSS代码如下:

.triangle {
  width: 0;
  height: 0;
  border-width: 40px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

点击预览😀


width:auto;和width:100%;的区别是什么

首先它们都是由父级元素所决定的,其次有以下区别:

  1. width:100%;:会使元素的宽度等于父元素的宽度,子元素增加 padding,会使得元素超过父元素的边界;
  2. width:auto;:会使元素撑满整个父元素,margin、border、padding、content 区域会自动分配水平空间;

参考代码

posted @ 2020-08-24 13:11  LqZww  阅读(87)  评论(0编辑  收藏