前端面试题之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;
}

示例代码 - 方法一

方法二

给父容器添加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;
}

示例代码 - 方法三

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;
}

点击预览

赞 (0)

相关推荐

  • WEB之CSS系列笔记

    CSS,通常称为CSS样式表或层叠样式表(级联样式表).主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图形的外形(宽高.边框样式.边距等)以及版面布局和外观显示样式. 引入CSS样式 ...

  • (办公)html5与css3的相关知识

    (办公)html5与css3的相关知识

  • 前端面试题整理——HTML/CSS

    如何理解语义化: 对应的内容是用相应意思的标签,增加开发者和机器爬虫对代码的可读性. 块状元素和内联元素: 块状元素有:display:block/table:有div h1 h2 table ul  ...

  • 网络编程及前端面试题！Python入门

    当我们学习Python时,需要掌握的的知识有很多,除了有关Python的专业知识外,我们还需要学习网络编程.前端等知识,对此这篇文章为大家总结一下Python常见面试题之网络编程及前端的问题. 第一: ...

  • 字节跳动最爱考的前端面试题：Node.js 基础

    前端技术优选 今天 前几天,跟我一朋友聊天,他现在是阿里的架构师,说:「他们根本不知道,现在的电商大促有多么依赖 Node.js.」 说真的,我倒并不意外.作为一个定位明确的高性能 Web 服务器,N ...

  • 前端面试题之JavaScript

    ES6语法有哪些,分别怎么用 参考链接:http://es6.ruanyifeng.com/ new的执行过程 创建一个空对象: 将构造函数的 prototype 属性赋值给新对象的 __proto_ ...

  • 前端面试题整理——手写简易jquery

    class jQuery { constructor(selector) { const result = document.querySelectorAll(selector) console.lo ...

  • 前端面试题整理——原型和原型链

    Class的使用: // 父类 class People { constructor(name) { this.name = name } eat() { console.log(`${this.na ...

  • 前端面试题整理——深拷贝

    const obj = { a: 100, b: { b1: [1, 2, 3], b2: 'string' }, c: ['a', 'b', 'c'] } /* * 没做深拷贝的效果 const o ...

  • 前端面试题整理——手写bind函数

    var arr = [1,2,3,4,5] console.log(arr.slice(1,4)) console.log(arr) Function.prototype.bind1 = functi ...

  • 前端面试题整理——作用域和闭包

    什么是闭包,闭包的表现形式: // 作用域应用的特殊情况,有两种表现: // 函数作为参数被传递 // 函数作为返回值被返回 // 函数作为返回值 function create() { let a ...