css面试题库

css面试题库

一、css选择器的优先级

1、位于标签里的style定义的css具有最高级的优先级
2、位于style标签中的@ import引起样式表多定义
3、位于link标签引入的样式所定义。
4、位于link标签引入样式内是@import导入样式表所定义
5、样式有用户设定
最低的优先权是浏览器默认

二、属性选择器的权重问题：

1、@important -------- 无穷
2、行间样式 -------- 1000
3、id ------- 100
4、class|属性|伪类------ 10
5、标签|伪元素 ------- 1
6、通配符 ------- 0

三、position都有哪些

1、absolute 绝对定位 脱离原来的位置进行定位，相对于自身最近的父级进行定位
2、relative 相对定位 保留原来的位置进行定位 ，参照元素本身，用于设置参照物
3、static 默认属性 元素默认定位
4、fixed 可视窗口进行定位，网上应用的广告栏
5、sticky css3中的新属性，表现类似relative和fixed的合体，目标区域在屏幕可见时，它的行为就像relative，当页面滚动超出目标区域时，就像fixed，他会固定在目标位置，淘宝侧边栏
6、inherit 继承父级定位

四、块级元素行级元素区别

1、block：块级元素，占满整行，可以改变宽高 div、from、 adress、h1
2、inline：行级元素，不沾满整行，不可以改变宽高 a、br、em、span
3、inline-block：行块级元素：可以改变宽高 也不独占整行 img、input

五、清除浮动的方法

1、额外添加标签

• 在浮动元素的结尾添加一个空标签
  
  2、父级添加overflow元素
• 在父级属性中添加overflow属性，属性值设置成hidden、auto、scroll都可以
  3、添加一个after

	xxx:after{
					content: '';
					clear:both;
					display: block; 
				}

六、水平居中的方法

1、知道父级大小

{
left:50%;
top:50%;
margin-left:父级元素一半的大小;
margin-top:父级元素一半的大小;

2、不知道宽高

transform:translateX(-50%)translateY(-50%);

3、fixed布局

position:absolute;
display:flex;
justify-content:center;//水平
aligin-items:center;//竖直

4、行内元素水平居中

text-align:center;

5、定宽高，父级定宽高，子集设计一个绝对定位

七、伪元素和伪类元素

1、伪元素：

::first-line:选中元素文本的第一行
::first-letter：选中元素文本的第一个字母
::alst-letter：选中元素文本的最后一个字母
::before：在元素内容的最前面添加新内容
::after：在元素内容的最后添加新内容

2、伪类元素

:link:应用于未被访问过的连接
:visited:用于被访问过的连接
:hover：应用于鼠标悬停的元素
:active:用于被激活的元素
:focus：用于聚焦的元素