web面试篇-css

1. css的优先级计算方式

1. css选择器的优先级： 选择器的特殊性值表述为4个部分，用0,0,0,0表示，采用叠加的方式；由高到低的排序如下
   行内样式：(1000)
   ID选择器：(0100)
   class类选择器，属性选择器，伪类选择器：(0010)
   元素选择器，伪元素选择器：(0001)
   通类选择器（*）：(0000)
2. !important（权重）:没有特殊性值，但它的优先级是最高的

2. css的选择器

1. 基础选择器：
   全局选择器 元素选择器 类选择器 Id选择器
2. 关系选择器 ：
   后代选择器 子代选择器 相邻兄弟选择器 通用兄弟选择器
3. 伪类选择器 :
   :link 点击之前（只适用a） :visited 点击之后（只适用a）
   :hover 鼠标悬停（适用于所有元素） :active 鼠标按下（适用于所有元素）
   css3新增伪类选择器 :
   :first-child 第一个子元素是… ；
   :last-child 最后一个子元素是…
   :nth-child(number|odd|even|倍数) 第几个子元素是…
   :only-child 唯一一个子元素是…
   :empty 空的子元素是…
   :not(选择器) 否定
   :focus 获取焦点
   :checked 被选中时的样式
4. 伪对象选择器
   1）在…之前插入 ::before|:before{content:""; }
   div:::before{} div内部的最上面
   2）在…之后插入 ::after|:after{content:""; }
   div:::after{} div内部的最下面
5. 属性选择器 利用HTML的属性
   [属性]
   [属性=属性值]
   元素[属性=属性值]
   元素[属性^=值] 以…开头
   元素 [属性$=值] 以…结尾
   元素[属性*=值] 包含

3. 在HTML中引入css的三种方式

1. 行内样式：使用HTML的通用属性style，引入css样式
2. 内部引入：利用style标签，在head中添加style标签，只在当前页面起作用
3. 外部引入：
   1）在head中添加link标签引入：<link rel="stylesheet" href="css文件路径"/>
   2）在style标签中导入@import：
   <style>
@import "css路径"|url("css路径");
</style>

4. link与@import的区别

1. 加载顺序不同
   @import先加载HTML文件，再加载css文件，
   link是同时加载HTML和css文件
2. 加载内容不同
   @import只能引入css文件，
   link还可以引入其他内容 <link rel="icon" href="图标的路径"/>
3. 兼容性不同
   @import有兼容性（IE5以上支持），
   link没有兼容性
4. 其他
   @import会增加页面的http请求
   JavaScript操作DOM时，只能操作link引入的css

5. C3的新特性

1. 选择器：伪类选择器、属性选择器
2. 文本属性：
   text-shadow：设置字体阴影
   text-overflow：设置文本溢出时发生的事； ellipsis：文本溢出省略号显示
   white-space：规定如何处理元素中的空白；nowrap：内容在同一行显示
3. 边框设置：
   border-radius：设置边框的圆角
   border-image：设置边框图片
   box-shadow：设置盒阴影
4. 背景设置：
   rgba()：设置颜色背景及透明度
   backgrounnd-size:cover/contain：
   background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
   background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片
5. 转换变形：
   位移 单位px % transform:translate(x,y);
   旋转 单位deg（弧度）transform:rotate();
   缩放 取值为number transform:scale(x,y);
   倾斜 单位deg transform:skew(xdeg,ydeg);
6. 过渡：
   transition
   transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔
   transition-duration:2s; //过渡持续的时间 transition-timing-function:ease;
   transition-delay:5s //过渡延迟5s进行
7. 多列布局：
   把一个元素内的文本分成多列
   column-count:number; 设置列的数量
   column-gap:; 设置列之间的距离
   column-rule:; 设置列之间的边框
8. 动画：
9. 媒体查询：实现响应式布局

6. opacity和rgba的区别：

1）opacity设置整个元素的透明度
2）rgba写在谁上，设置的就是谁的透明的，
比如background-color:rgba() 设置背景颜色透明， color:rgba() 设置字体颜色透明

7. display:none;和visibility:hidden;和opacity:0;和overflow:hidden;的区别

display:none; 隐藏自己，隐藏后原位置不保留
visibility:hidden; 隐藏自己，隐藏后原位置保留
opacity:0; 透明度为0，隐藏自己，隐藏后原位置保留
overflow:hidden; 溢出部分隐藏

8. 关于定位position：

1）relative 相对定位：相对于自己原位置定位；定位后原位置保留
2）absolute 绝对定位：相对于已经定位（relative、absolute、fixed）的父元素定位；定位后原位置不保留；如果父元素没有定位，逐级往上找，最后相对于body定位；
3）fixed 固定定位：相对于浏览器窗口定位；定位后原位置不保留
4）z-index:number 堆叠顺序：取值越大层级越往上，同时定位后，后面的元素在上面，必须配合定位使用（relative、absolute、fixed），可以取负值

9. 在页面中不占据位置

1）float:left|right;
2）position:fixed;
3）position:absolute;
4）display:none;

10. 关于display：

1）block 块级元素
2）inline 行内元素
3）inline-block 行内块，即在同一行显示，又可以设置宽高（img、input、button、video等） 行内块会识别代码之间的空白
4）none 不显示，隐藏自己，隐藏后原位置不保留
5）flex 弹性盒模型
6）table 表格
7）table-cell 单元格

11. 关于浮动

1. 什么是浮动：浮动后排除到普通流之外；浮动后元素在页面中不占据位置；浮动是碰到父元素的边框或者浮动元素的边框就会停止；浮动不会重叠；浮动只有左右浮动；浮动后所有元素转换为块级元素
   注：
   行内元素浮动后变成行内块，既有行内元素的特性，又有块级元素的特性
   如果父元素没有设置高度，父元素的高度会坍塌，会对后面的元素产生影响
2. 如何清除浮动的影响：
   ①浮动元素的父元素加高（高度已知）
   ②浮动元素的父元素加overflow:hidden|auto;(自动找高)
   ③受影响的元素加clear:left|right|both;(浮动元素的父元素高度没有找到)
   ④空div法(父元素的高度可以找到，但是页面会增加好多空div元素) 浮动元素后面加一个空div空div{clear:both;}
   ⑤伪对象法
   浮动元素的父元素::after{
content:"";
display:block;//把元素转换为块级元素
clear:both;//清除浮动 }

12. 关于居中：

1）元素内容水平居中

text-align:center;

2）一行文字垂直居中:行高等于高，一行文字垂直居中

line-height:;

3）块级元素水平居中

margin:0 auto;

4）多行内容垂直居中

父元素加 padding:20px 0;
子元素加 margin:20px 0;

5）子元素在父元素中水平垂直居中

<div class="box">
<div class="box1"></div>
</div>

①margin

.box{
	width: 300px;
	height: 300px;
	background-color: pink;
	overflow: hidden;
}
.box1{
	width: 100px;
	height: 100px;
	background-color: plum;
	margin: 100px;
}

②padding

.box{
	width: 300px;
	height: 300px;
	background-color: pink;
	padding: 100px;
	box-sizing: border-box;
}
.box1{
	width: 100px;
	height: 100px;
	background-color: plum;
}

③绝对定位

.box{
	width: 300px;
	height: 300px;
	background-color: pink;
	position: relative;
}
.box1{
	width: 100px;
	height: 100px;
	background-color: plum;
	position: absolute;
	top: 100px;
	left: 100px;
}

④绝对定位(重点)

.box{
	width: 300px;
	height: 300px;
	background-color: pink;
	position: relative;
}
.box1{
	width: 100px;
	height: 100px;
	background-color: plum;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;//1/2高的width和height
	margin-left: -50px;
}

⑤表格法

.box{
	width: 300px;
	height: 300px;
	background-color: pink;
	display: table-cell;
	vertical-align: middle;
}
.box1{
	width: 100px;
	height: 100px;
	background-color: plum;
	margin: 0 auto;
}

⑥位移法

.box{
	width: 300px;
	height: 300px;
	background-color: red;
	position: relative;
}
.box1{
	width: 100px;
	height: 100px;
	background-color: green;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

13. 关于盒模型

1. 标准盒模型（W3C盒模型）
   ①组成部分
   content+padding+border+margin
   ②实际宽度
   width+padding+border+margin
2. 怪异盒模型（IE盒模型）
   ①组成部分
   content+padding+border+margin
   ②实际宽度
   width+margin；width包含了border和padding
3. 标准盒模型和怪异盒模型的转换
   box-sizing:content-box; 默认值，标准盒模型
   box-sizing:border-box; 怪异盒模型

14. 弹性盒模型display:flex;

弹性盒模型：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

1）写在父元素上的属性

父元素{
	display:flex;//设置为弹性盒模型
	flex-direction: row |column| row-reverse | column-reverse  ;
	//设置弹性盒方向：水平|垂直	|水平倒序|垂直倒序			
	justify-content:flex-start|flex-end|center|space-around|space-between;
	/*设置子元素在主轴的对齐方式；默认x轴为主轴  y轴为侧周
	当flex-direction:column ;y轴为主轴  x轴为侧轴*/
	/*	
		flex-start  默认值  弹性盒的开始
		flex-end   弹性盒的结束
		center   居中
		space-around  四周分配父元素剩下的距离，两侧是中间的一半
		space-between  在子元素之间平均分配父元素剩余的距离
	*/
	align-items:;flex-start|flex-end|center;
	/*设置子元素在侧轴的对齐方式*/
	/*
		flex-start  默认值  弹性盒的开始
		flex-end   弹性盒的结束
		center   居中
	*/
}

2）写在子元素上的属性

flex-grow:number;

15. 什么是响应式布局

响应式设计（RWD，Responsive Web Design）是页面布局可以「响应」不同尺寸屏幕的设计方法。

16. 为什么要初始化CSS样式

1. 解决浏览器的兼容问题，不同浏览器对标签的默认值是不同的
2. 提高编码质量，使得开发的页面简洁明了，不用对同一个样式多次设置

17. http协议与webstoke的区别