web前端最全面试宝典html篇(web前端CSS高频面试题)

CSS盒子模型

1. 盒模型分为标准盒模型和怪异盒模型(IE模型)

2. box-sizing:content-box //标准盒模型

3. box-sizing:border-box //怪异盒模型

web前端最全面试宝典html篇(web前端CSS高频面试题)(1)

4. 标准盒模型:元素的宽度等于style里的width margin border padding宽度

如下代码,整个宽高还是120px

div{ box-sizing: content-box; margin: 10px; width: 100px; height: 100px; padding: 10px; }

5. 怪异盒模型:元素宽度等于style里的width宽度

如下代码,整个宽高还是100px

div{ box-sizing: border-box; margin: 10px; width: 100px; height: 100px; padding: 10px; }

注意:如果你在设计页面中,发现内容区被撑爆了,那么就先检查一下border-sizing是什么,最好在引用reset.css的时候,就对border-sizing进行统一设置,方便管理

rem与em的区别

1. rem是根据根的font-size变化,而em是根据父级的font-size变化

2. rem:相对于根元素html的font-size,假如html为font-size:12px,那么,在其当中的div设置为font-size:2rem,就是当中的div为24px

3. em:相对于父元素计算,假如某个p元素为font-size:12px,在它内部有个span标签,设置font-size:2em,那么,这时候的span字体大小为:12*2=3D24px

CSS常用选择器

1. 通配符:*

2. ID选择器:#ID

3. 类选择器:.class

4. 元素选择器:p、a 等

5. 后代选择器:p span、div a 等

6. 伪类选择器:a:hover 等

7. 属性选择器:input[type=3D”text”] 等

css选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

CSS新特性

1. transition:过渡

2. transform:旋转、缩放、移动或者倾斜

3. animation:动画

4. gradient:渐变

5. shadow:阴影

6. border-radius:圆角

绝对定位和相对定位的区别

1. position: absolute绝对定位:是相对于元素最近的已定位的祖先元素

2. position: relative相对定位:相对定位是相对于元素在文档中的初始位置

水平垂直居中

1. flex布局

1). display: flex //设置Flex模式

2). flex-direction: column //决定元素是横排还是竖着排

3). flex-wrap: wrap //决定元素换行格式

4). justify-content: space-between //同一排下对齐方式,空格如何隔开各个元素

5). align-items: center //同一排下元素如何对齐

6). align-content: space-between //多行对齐方式

2. 水平居中

1). 行内元素:display: inline-block;

2). 块级元素:margin: 0 auto;

3). Flex: display: flex; justify-content: center

3. 垂直居中

1). 行高 =3D 元素高:line-height: height

2). flex: display: flex; align-item: center

2.8. Less,Sass,Styus三者的区别

1. 变量

1). Sass声明变量必须是『$』开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号:分隔开。

2). Less 声明变量用『@』开头,其余等同 Sass。

3). Stylus 中声明变量没有任何限定,结尾的分号可有可无,但变量名和变量值之间必须要有『等号』。

2. 作用域

1). Sass:三者最差,不存在全局变量的概念

2). Less:最近的一次更新的变量有效,并且会作用于全部的引用!

3). Stylus:Sass 的处理方式和 Stylus 相同,变量值输出时根据之前最近的一次定义计算,每次引用最近的定义有效;

3. 嵌套

三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别,甚至连引用父级选择器的标记 & 也相同

4. 继承

Sass和Stylus的继承非常像,能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始,后面接被继承的选择器。Stylus 的继承方式来自 Sass,两者如出一辙。 Less 则又「独树一帜」地用伪类来描述继承关系;

5. 导入@Import

6. Sass 中只能在使用 url() 表达式引入时进行变量插值

$device: mobile; @import url(styles.#{$device}.css);

7. Less 中可以在字符串中进行插值

@device: mobile; @import "styles.@{device}.css";

8. Stylus 中在这里插值不管用,但是可以利用其字符串拼接的功能实现

device = "mobile" @import "styles." device ".css"

9. 总结

1). Sass和Less语法严谨、Stylus相对自由。因为Less长得更像 css,所以它可能学习起来更容易。

2). Sass 和 Compass、Stylus 和 Nib 都是好基友。

3). Sass 和 Stylus 都具有类语言的逻辑方式处理:条件、循环等,而 Less 需要通过When等关键词模拟这些功能,这方面 Less 比不上 Sass 和 Stylus

4). Less 在丰富性以及特色上都不及 Sass 和 Stylus,若不是因为 Bootstrap 引入了 Less,可能它不会像现在这样被广泛应用

link与@import区别与选择

<style type="text/css"> @import url(CSS文件路径地址); </style> <link href="CSSurl路径" rel="stylesheet" type="text/css" />

1). link功能较多,可以定义 RSS,定义 Rel 等作用,而@import只能用于加载 css;

2). 当解析到link时,页面会同步加载所引的 css,而@import所引用的 css 会等到页面加载完才被加载;

3). @import需要 IE5 以上才能使用;

4). link可以使用 js 动态引入,@import不行

多行元素的文本省略号

overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical

什么是BFC?

BFC全称 Block Formatting Context 即块级格式上下文,简单地说,BFC是页面上的一个隔离的独立容器,不受外界干扰或干扰外界

如何触发BFC

1. float不为 none

2. overflow的值不为 visible

3. position 为 absolute 或 fixed

4. display的值为 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染规则是什么

1. BFC是页面上的一个隔离的独立容器,不受外界干扰或干扰外界

2. 计算BFC的高度时,浮动子元素也参与计算(即内部有浮动元素时也不会发生高度塌陷)

3. BFC的区域不会与float的元素区域重叠

4. BFC内部的元素会在垂直方向上放置

5. BFC内部两个相邻元素的margin会发生重叠

BFC的应用场景

1. 清除浮动:BFC内部的浮动元素会参与高度计算,因此可用于清除浮动,防止高度塌陷

2. 避免某元素被浮动元素覆盖:BFC的区域不会与浮动元素的区域重叠

3. 阻止外边距重叠:属于同一个BFC的两个相邻Box的margin会发生折叠,不同BFC不会发生折叠

2.15. CSS3有哪些新特性?

1. 圆角 (border-radius:8px)

2. 新增各种CSS选择器、伪类 (经常用到 :nth-child)

3. 文字渲染 (Text-decoration)

4. 转化为简写属性,可设置text-decoration-color, text-decoration-style, text-decoration-line三个属性,默认值为currentcolor solid none。

5. 透明色 & 透明度(opacity)

6. 旋转 (transform)

7. 旋转 rotate,缩放 scale,倾斜 skew,平移 translate

8. 动画(animation) & 过渡效果(transition)

9. 阴影(box-shadow, text-shadow)

10. 新的布局方式,如 多列布局 multi-columns 、 弹性布局 flexible box 与 网格布局 grid layouts

11. 线性渐变(gradient)

12. 多背景(background-image可以设置多个url或linear-gradient)

13. 媒体查询(@media MDN) (可以看看这个)

14. 边框可以设置图片(border-image)

说一下CSS3的flex box(弹性盒布局模型)

1. 什么是flex box?

1). CSS3新增布局。

2). Flexbox可以把列表放在同一个方向(从上到下排列,从左到右),并让列表能延伸到占用可用的空间。

3). 较为复杂的布局还可以通过嵌套一个伸缩容器(flex container)来实现。

4). 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。

5). 它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

6). 常规布局是基于块和内联流方向,而Flex布局是基于flex-flow流可以很方便地用来做局中,能对不同屏幕大小自适应。

7). 在布局上有了比以前更加灵活的空间。

2. 应用场景?

1). 水平垂直居中

2). 一边定宽,一边自适应

3). 多列等分布局

4). sticky footer

用纯CSS创建一个三角形的原理是什么?

div { width: 0; height: 0; /* div里没内容,可不写 */ border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } /* 或者这样写 */ div { width: 0; border: 100px solid transparent; border-bottom-color: #343434; }

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。