web前端最全面试宝典html篇（web前端CSS高频面试题）
1. 盒模型分为标准盒模型和怪异盒模型(IE模型)
2. box-sizing：content-box //标准盒模型
3. box-sizing：border-box //怪异盒模型
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全称 Block Formatting Context 即块级格式上下文，简单地说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
如何触发BFC1. 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;
}
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。
