【前端面试 | css面试题整理】

层叠

	层叠对一个元素多次设置同一个样式程序只会使用最后一次设置的属性值。

优势

	多个文档的样式可以通过使用一个站点来控制
	多个html元素可以包含许多文档可以在其中创建类
	对样式进行分组最好使用选择器和分组方法

缺点

	无法通过选择器升序
	垂直控制的局限性
	没有表情
	没有列声明
	伪类不受动态行为的控制
	规则、样式、无法定位特定文本

ID和Class的区别

	ID属性的值在整篇文档中必须是唯一的。ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。ID选择器的标志符是散列符号#
	CLASS属性可声明一组在CLASS属性上具有相同值的元素。BODY内的所有元素都有CLASS属性。类选择器以标志符.开头。

CSS盒模型

	属性外边距margin、边框border、内边距padding以及实际的内容content。
	标准盒子模型宽度=内容的宽度content总宽度=内容的宽度content+ border + padding + margin
	低版本IE盒子模型宽度=border + padding + 内容content总宽度=内容宽度content+border+padding+ margin

z-index

	z-index 设置元素的堆叠顺序。较高堆叠顺序的元素会处于堆叠顺序较低的元素的前面
	值说明
		auto——默认。堆叠顺序与父元素相等。
		number——设置元素的堆叠顺序。
		inherit——规定应该从父元素继承 z-index 属性的值。

雪碧图Sprites

	作用把网页中一些背景图片整合到一张图片文件中。
	优点减少网页的http请求提高页面性能

伪元素

	CSS伪元素添加到选择器的关键字可用于设置所选元素的特定部分的样式。
	“first-line” 伪元素用于向文本的首行设置特殊样式只能用于块级元素下面的属性可应用于 “first-line” 伪元素fontcolorbackgroundword-spaceletter-spacetext-decorationtext-transformline-heightclear。

设置标签相同样式

	通过用逗号分隔符来定位多个元素

float属性

	定义元素在哪个方向浮动
	float: none;

float: left;
float: right;

插入图片不重复

background-repeat: none;

margin0 auto;

	该对象将位于其父容器的中央

background-attachment

	设置图像附着位置
	值
		scroll背景图片附着在背景容器上它是相对于背景容器元素固定它会随着背景容器的滚动而不是随着它的内容滚动也可以看成是对元素边框固定。
		fixed 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格所以它是不滚动的
		localCSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动。

{visibilityhidden}和{displaynone}

	display:none 表示标签不会出现在页面上可以通过DOM与之交互。与其他标签之间将没有分配空间。
	visibility:hidden 表示该标签不可见但在页面上为其分配了空间。

box-sizing

	context-boxW3C的标准盒子模型设置元素的 height/width 属性指的是content部分的高/宽
	border-boxIE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

display

inline默认–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block
	设置元素浮动后display值为block
	显示间隙
		有空格时候会有间隙 解决移除空格
margin正值的时候 解决margin使用负值
使用font-size时候 解决font-size:0、letter-spacing、word-spacing

position

static默认按照正常文档流进行排列
relative相对定位不脱离文档流参考自身静态位置通过 top, bottom, left, right 定位
absolute(绝对定位)参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位
fixed(固定定位)所固定的参照对像是可视窗口。

position跟display、overflow、float这些特性相互叠加

	display属性规定元素应该生成的框类型position属性规定元素的定位类型float属性是一种布局方式定义元素在哪个方向浮动。
	优先级机制positionabsolute/fixed优先级最高有它们在时float不起作用display值需要调整。float 或者absolute定位的元素只能是块元素或表格。

浮动与清除浮动

	浮动
		浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素不在文档流中会漂浮在文档流的块框上。
		问题1、父元素的高度无法被撑开影响与父元素同级的元素
			2、与浮动元素同级的非浮动元素内联元素会跟随其后
			3、除非第一个元素浮动否则该元素之前的元素也需要浮动否则会影响页面显示的结构
	清除浮动
		1、父级div定义height或者zoomzoom的作用就是设置放大为原来的几倍如zoom2
		2、最后一个浮动元素后加空div标签 并添加样式clear:both。
		3、包含浮动元素的父标签添加样式overflow为hidden或auto。

css优化

	避免过度约束
	避免后代选择符
	避免不必要的命名空间
	避免important可以选择其他选择器

元素竖向的百分比设定是相对于容器的高度吗

	当按百分比设定一个元素的宽度时它是相对于父容器的宽度计算的但是对于一些表示竖向距离的属性例如 padding-top , padding-bottom , margin-top , margin-bottom 等当按百分比设定它们时依据的也是父容器的宽度而不是高度。

伪类与伪元素

	伪类存在DOM文档中逻辑上存在但在文档树中却无须标识的“幽灵”分类用于向某些选择器添加特殊的效果伪类的效果可以通过添加实际的类来实现。
	伪元素/伪对象在DOM文档中不存在是虚拟的元素是创建新元素。代表某个元素的子元素这个子元素虽然在逻辑上存在但却并不实际存在于文档树中用于将特殊的效果添加到某些选择器。伪元素的效果可以通过添加实际的元素来实现。

::before 和 :after

	单冒号(:)用于CSS3伪类双冒号(::)用于CSS3伪元素。
	::before就是以一个子元素的存在定义在元素主体内容之前的一个伪元素。并不存在于dom之中只存在在页面之中。

line-height

	line-height值设置为height一样大小的值可以实现单行文字的垂直居中
	多行文本垂直居中需要设置display属性为inline-block。

水平居中一个元素

	弹性盒子
		.box{
display: flex;
justify-content: center;
align-items: center;
}
	定位
		.box{
position: relative;
} 
.box .sub{
position: absolute;
 top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*margin-left: 负的宽度的一半*/
/*margin-top: 负的高度的一半*/
}

实现一个三角形

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

选择器

	id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器ul > li、后代选择器li a、通配符选择器*、属性选择器a[rel=“external”]、伪类选择器a:hover, li:nth-child
	内嵌样式>内部样式>外部样式>导入式

important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * + > ~) 0

预处理器

	CSS预处理器是用一种专门的编程语言进行Web页面样式设计然后再编译成正常的CSS文件以供项目使用。
	优点
		CSS变得更易于维护
		易于编写嵌套选择器
		用于一致主题的变量。可以跨不同项目共享主题文件
		Mixins生成重复的CSS
		诸如循环列表和映射之类的Sass功能可以使配置更容易且更省力
		将您的代码分成多个文件。CSS文件也可以拆分但是这样做需要HTTP请求才能下载每个CSS文件。
	缺点
		需要进行预处理的工具。重新编译时间可能很慢。
		不编写当前和潜在可用的CSS。例如通过将诸如 postcss-loader之类的内容 与 webpack一起使用可以编写可能与将来兼容的CSS从而使您可以使用CSS变量而不是Sass变量之类的东西