文章目录
- 1、说出标准的CSS的盒子模型是什么?与低版本IE的盒子模型有什么不同的?
- 2、CSS 如何设置这两种模型?
- 3、对 BFC 规范(块级格式化上下文:block formatting context)的理解?
- 4、CSS margin上下重叠问题
- 5、CSS选择器有哪些?哪些属性可以继承?CSS优先级算法如何计算?
- 6、CSS3新增伪类有那些?
- 7、display各项值的含义
- 8、关于居中
- 9、用纯CSS实现一个三角形
- 10、为什么要初始化 CSS 样式
- 11、display:none 与 visibility:hidden 的区别是什么?
- 12、position 跟 display、overflow、float 这些特性相互叠加后会怎么样?
- 13、为什么会出现浮动? 什么时候需要清除浮动?清除浮动有哪些方式?
- 14、什么是CSS 预处理器 / 后处理器?
- 15、CSS优化、提高性能的方法有哪些?
- 16、在网页中的应该使用奇数还是偶数的字体?为什么呢?
- 17、全屏滚动的原理是什么?用到了CSS的哪些属性?
- 18、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
- 19、li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
- 20、如何实现Chrome中文本小于12px
1、说出标准的CSS的盒子模型是什么?与低版本IE的盒子模型有什么不同的?
盒子模型就是 元素在网页中的实际占位,有两种:标准盒子模型和IE盒子模型
- 标准(W3C)盒子模型:内容content+填充padding+边框border+边界margin
宽高指的是 content 的宽高- 低版本IE盒子模型:内容(content+padding+border)+ 边界margin,
宽高指的是 content+padding+border 部分的宽高
2、CSS 如何设置这两种模型?
box-sizing: content-box;
box-sizing: border-box
默认为content-box
- context-box:W3C的标准盒子模型,设置元素的 height/width 属性指的是 content 部分的高/宽
- border-box:IE 传统盒子模型。设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽
3、对 BFC 规范(块级格式化上下文:block formatting context)的理解?
(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的Formatting Context(决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
BFC规定了内部的 Block Box 如何布局。 定位方案:
- 内部的 Box 会在垂直方向上一个接一个放置。
- Box 垂直方向的距离由margin 决定,属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
- 每个元素的 margin box的左边,与包含块 border box 的左边相接触。
- BFC 的区域不会与 float box 重叠。
- BFC 是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
- 计算 BFC 的高度时,浮动元素也会参与计算。
满足下列条件之一就可触发 BFC
- 根元素,即 html
- float 的值不为none(默认)
- overflow 的值不为visible(默认)
- display 的值为 inline-block、table-cell、table-caption
- position的值为 absolute 或 fixed
4、CSS margin上下重叠问题
块元素在垂直方向上的margin会有重叠现象。 如果display都是block,有三种情况:
- 外边距均为正数,竖直方向上会选择最大的外边距作为间隔
- 一正一负,间距 = 正 - |负|
- 两个负,间距 = 0 - 绝对值最大的那个
设置display: inline-block的盒子不会有margin重叠,position: absolute的也不会出现。
5、CSS选择器有哪些?哪些属性可以继承?CSS优先级算法如何计算?
CSS选择符:
- id选择器( # myid)
- 类选择器(.myclassname)
- 标签(元素)选择器(div, h1, p)
- 相邻选择器(h1 + p)
- 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器( * )
- 属性选择器(a[rel = “external”])
- 伪类选择器(a:hover, li:nth-child)
- 伪元素选择器、分组选择器。
继承性:
- 可继承的样式:font-size, font-family, color,ul,li,dl,dt,dd;
- 不可继承的样式:border, padding, margin, width, height
- 优先级(就近原则):!important > [ id > class > tag ]
- !important 比内联优先级高
优先级算法计算:
优先级就近原则,同权重情况下样式定义最近者为准 !important>id >class>tagmportant比内联优先级高
元素选择符的权值:元素标签(派生选择器):1,class选择符:10,id选择符:100,内联样式权值最大,为1000
!important声明的样式优先级最高,如果冲突再进行计算。
如果优先级相同,则选择最后出现的样式。
继承得到的样式的优先级最低。
ID > 类 > 标签 > 相邻 > 子选择器 > 后代选择器 > * > 属性 > 伪类
important > 行内样式 > 文件内部style > link引入的外部css文件
同类选择器,层级越深优先级越高
同一文件,同一层级的同类选择器,下面的样式会覆盖上面的
6、CSS3新增伪类有那些?
- p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type 选择属于其父元素的最后元素的每个元素。
- p:only-of-type 选择属于其父元素唯一的元素的每个元素。 p:only-child 选择属于其父元素的唯一子元素的每个元素。
- p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。 :enabled :disabled 控制表单控件的禁用状态。
- :checked,单选框或复选框被选中。 :before在元素之前添加内容,也可以用来做清除浮动 :after在元素之后添加内容
7、display各项值的含义
8、关于居中
水平居中div:
margin: 0 auto;
水平垂直居中一个浮动元素(position定位)
当元素宽高不定
<div class="wrap">
<span>居中</span>
</div>
<style>
.wrap{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
当元素宽高的固定
<div class="wrap">
<span>居中</span>
</div>
<style>
.wrap{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{
float:left;
position:absolute;
backgroond-color:red;
width:150px;
height:50px;
top:50%;
left:50%;
margin:-25px 0px 0px -75px;
}
</style>
垂直居中一个img(display : table-cell 或者 position定位)
<div class="wrap">
<img src="pic.jpg" alt="">
</div>
<style>
.wrap {
display: table-cell;
width: 300px;
height: 300px;
border: 1px solid #cccccc;
text-align: center;
vertical-align: middle;
}
img {
width: 150px;
height: 150px;
}
</style>
设置绝对定位的div水平垂直居中
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0;
top:0;
bottom:0;
border: 1px solid black;
设置文本的垂直居中
把line-height值设置为height一样大小的值可以实现单行文字的垂直居中
还有更加优雅的居中方式就是用 flex布局,但需要注意其兼容性
9、用纯CSS实现一个三角形
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ff0000;
10、为什么要初始化 CSS 样式
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
11、display:none 与 visibility:hidden 的区别是什么?
- display : none 隐藏对应的元素,在文档布局中不再分配空间(回流+重绘)
- visibility:hideen 隐藏对应的元素,在文档布局中仍保留原来的空间(重绘)
12、position 跟 display、overflow、float 这些特性相互叠加后会怎么样?
- display属性规定元素应该生成的框的类型;
- position属性规定元素的定位类型;
- float属性是一种布局方式,定义元素在哪个方向浮动。
类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float或者absolute定位的元素,只能是块元素或表格。
13、为什么会出现浮动? 什么时候需要清除浮动?清除浮动有哪些方式?
出现浮动的原因:
浮动元素碰到包含它的边框或者浮动元素的边框停留。
在CSS规范中,浮动定位不属于正常的页面流,而是独立定位的,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
关于css的定位机制:
普通流,浮动,绝对定位(position:fixed是position:absolute的一个子类)。
浮动的框可以左右移动,直到它的外边缘遇到包含框或者另一个浮动框的边缘,所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样。
当浮动框高度超出包含框的时候,就会出现包含框不会自动伸缩高度类笔盒浮动元素。
所以,只含有浮动元素的父容器在显示时不需要考虑子元素的位置,就造成显示父容器像空容器一样。
浮动带来的问题:
- 父元素的高度无法被撑开,影响与父元素同级的元素
- 与浮动元素同级的非浮动元素(内联元素)会跟随其后
- 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
清除浮动的方式:
- 浮动的父元素添加
overflow: hidden
- 浮动的父元素添加伪类
::after{clear: both}
14、什么是CSS 预处理器 / 后处理器?
- 预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less,增强了css代码的复用性,还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
- 后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。
- CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
- 其它 CSS 预处理器语言:
Sass(SCSS)
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS
15、CSS优化、提高性能的方法有哪些?
- 避免过度约束
- 避免后代选择符
- 避免链式选择符
- 使用紧凑的语法
- 避免不必要的命名空间
- 避免不必要的重复
- 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
- 避免!important,可以选择其他选择器
- 尽可能的精简规则,你可以合并不同类里的重复规则
- 修复解析错误
- 避免使用多类选择符
- 移除空的css规则
- 正确使用display的属性:由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
- 不滥用浮动:虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。
- 不滥用web字体
对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
- 不声明过多的font-size:这是设计层面的问题,设计精良的页面不会有过多的font-size声明。
- 不在选择符中使用ID标识符,主要考虑到样式重用性以及与页面的耦合性。
- 不给h1~h6元素定义过多的样式
- 全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。
- 不重复定义h1~h6元素
- 值为0时不需要任何单位
- 标准化各种浏览器前缀:通常将浏览器前缀置于前面,将标准样式属性置于最后
-moz-border-radius: 5px;border-radius: 5px;
- 使用CSS渐变等高级特性,需指定所有浏览器的前缀
- 避免让选择符看起来像正则表达式
- CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,谨慎使用。
- 遵守盒模型规则(Beware of broken box models)
16、在网页中的应该使用奇数还是偶数的字体?为什么呢?
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。
Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。
17、全屏滚动的原理是什么?用到了CSS的哪些属性?
- 原理:有点类似于轮播,整体的元素一直排列下去,假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%,剩下的可以通过transform进行y轴定位,也可以通过margin-top实现
- overflow:hidden;transition:all 1000ms ease;
18、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
- 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
- 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
- 页面头部必须有meta声明的viewport。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
19、li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
20、如何实现Chrome中文本小于12px
针对谷歌浏览器加前缀进行适配
html{
-webkit-text-size-adjust:none;
}
使用css3的transform属性
font-size:12px;
-webkit-transform:scale(0.8); // 0.8是缩放比例