css基础题

一、写出常用CSS选择器

• id选择器 （ #first、#second、#thrid ）
• 类选择器 （ .first、.second、.thrid ）
• 标签选择器 （ div、p、span、h1 等 ）
• 相邻选择器 （ h1 + p {margin-top:50px;} ）
• 子选择器 （ div > span 、ul > li ）
• 后代选择器 （li a ）
• 通配符选择器 （ * ）
• 属性选择器 （ a[ rel=“friend” ] ）
• 伪类选择器 （ p:first-child ）

二、CSS的优先级如何计算？

选择器的特殊性值表述为4个部分，用0,0,0,0表示

• 第一等级：代表内联样式，如style=""，权值为 1000
• 第二等级：代表id选择器，如#content，权值为100
• 第三等级：代表类，伪类和属性选择器，如.content，权值为10
• 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

CSS 语句权重由选择器的权值相加可得。

样式优先级:！important>行内样式>内部样式>外部样式

• !important声明的样式优先级最高，如果冲突再进行计算
• 如果优先级相同，则选择最后出现的样式
• 继承得到的样式的优先级最低

三、常用的块级元素、行内元素（内联元素）？有哪些？

• 块级元素：div、form、h1–h6、hr、p、table、ul
• 行内元素：a、br、em、img、input、textarea、label、span、strong、i

四、块级元素与行内元素的区别是什么？

• 行内元素不会占据整行，在一条直线上排列，都是同一行，水平方向排列；块级元素会占据一行，垂直方向排列
• 块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素
• 行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
• 行内元素转化为块元素： display:block;
• 块元素转化为行内元素： display:inline;

五、标准CSS盒子模型是什么？

• 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
• 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

六、如何将块级元素居中？有几种方式？

1、父级给相对定位，子级给绝对定位，margin设置为auto，上下左右值设为0
2、父级给相对定位，子级给绝对定位，设置left和top为50%，再向左和向上移动负的子级一半。

3、父级设置display:flex;justify-content: cneter;align-items: center;

七、position的值有哪些？他们分别有什么作用？

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

八、如何用纯CSS创建一个三角形，原理是什么？

1. 一个块级元素的宽是由内容的宽度（content）+ border + padding + margin 得来的，那么普通的盒子就是这个
   

.third {