css总结及常考问题

常考问题总结

参考问题

css预处理器

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。

css预处理器种类繁多，三种主流css预处理器是Less、Sass（Scss）及Stylus；它们各自的背景如下:

如果用了预处理器，需要在webpack打包时引入loader
stylus css less?

postion

五种定位，以及具体说一说

• static
• absolute,对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:格式：
• relative 相对正常的位置而变化
• fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
• sticky：在relative和fixed之间切换

BFC

什么是BFC

格式化块级上下文，独立渲染区域，就是一个环境里面的元素不会影响到外部元素。

BFC：

• 内部的Box在垂直方向上排列
• Box的垂直距离由margin决定，属于同一个bfc的未发生margin塌陷
• 每个元素的margin box的左边与包含border box的左边接触
• 独立的容器，外面不会影响里面，文字环绕效果设置，float
• BFC区域不会与float重叠（清除浮动）
• 计算BFC时，浮动元素也参与计算

如何创建BFC

1. 根元素,即HTML元素，最大的BFC
2. position的绝对定位：abslute、fixed
3. flex，弹性盒布局
4. float：只要不为none
5. display：inline-block行内块
6. 表格布局，display：table、table-ceil
7. overflow:hidden

什么应用场景

BFC的使用场景

• 自适应两栏布局，一个float、一个BFC这样不会重叠
• 避免元素被浮动元素覆盖
• 解决margin塌陷问题
• 父元素的高度包含子浮动元素，清除内部浮动

盒子塌陷

本应该在父盒子内部的元素跑到外部去，尤其是父盒子高度设置为auto，夫元素中有没有其他非浮动的可见元素，父盒子的高度就会塌陷为0 ，高度塌陷

如何解决盒子塌陷

1. 给父盒子设定指定宽高（非自适应了）
2. 给外部盒子也浮动
3. 父盒子添加overflow属性
4. 下方引入清除浮动块
   
5. 给父盒子添加border
6. 给父盒子设置padding-top;

面试常见问题

1、盒模型

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？box-sizing属性？

css模型的盒模型都具备content，padding，border,margin这些属性

• 标准盒模型，默认、box-sizing:content-box,其中
  （content）+padding+border+margin,当设置盒子的宽高时，只是设置了content 的宽高
  -怪异盒模型， box-sizing:border-box,当设置盒子的宽高时，包含了content+padding+border；
  （content+padding+border）+margin
  -boxsizing:inherit 从父级元素继承该属性的值

JS如何获取盒模型对应的宽度和高度呢？

• dom.style.width/height 只能取到行内样式的宽和高，
• dom,currentStyle.width/height
• window.getComputedStyle.width/height
• dom,offsetWidth/offsetHeight 包括宽度、内边距和border不包含margn，最常用，兼容性最好

2、css 隐藏元素的方法

• display:none;dom结构上都没有了，引起重排（回流）和重绘，操作dom结构，开销较大
• visibility:hidden 不可见，隐藏对应元素，dom树结构上有，引起重绘，适合频繁切换的场景，dom操作少。
• opacity:0 透明度为0 ，全透明，也就看不见了，但是元素仍然在dom树上，页面上的空间也还在
• 技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在 -1000

3、伪类和伪元素的区别

• 伪类：表示已存在的某个元素的某种状态，通过dom树结构又无法表示，就通过伪类来添加样式。
  ：link，：visited,;hover,:first-child,:last-child,:disabled,:enabled

• 伪元素：顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，
  :first-line,:first-letter和::selection：before.:after

伪类，可以添加类来达到效果
伪元素，可以田间元素怒来达到效果
伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，
是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类
伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。
伪类其实就是基于普通DOM元素⽽产⽣的不同状态，他是DOM元素的某⼀特征。
伪元素能够创建在DOM树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。

4、选择器

• id选择器（#form1)
• 类选择器（.class1)
• 标签选择器（div)
• 相邻选择器（div + p）
• 子代选择器（div > p)只能选择儿子，连孙子都不行
• 后代选择器（div p）儿子、孙子、重孙子都行
• 通配符选择器（*）
• 属性选择器（a[rel = “external”]）
• 伪类（：hover，：first-child）、伪元素(:first-letter)、分组选择器

5、继承性

继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。

• 不可继承的样式：padding、border、margin、width、height（盒子模型属性、背景属性、定位属性、生成内容属性、页面样式）
• 可继承样式：font-size、font-family、color、ul、li、dl、dt

可继承的：

字体系列属性：font-size、font-style、font-weight、font-family
文本系列属性： text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction

元素可见性：visibility

所有元素可以继承的属性：

• 可见性：visibility
• 光标属性：cursor

文本居中（lien-height设置的和父容器高度一致）

• 6、优先级

先按位置分，内联> style>外部引入样式标

！import > 内联样式,再按（id>类>标签>

元素选择符的权值，元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000

如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低

6、display有哪些值？

• block：块级元素，可以设置宽高，单独占一行，
• inline：行内元素，挨着排列，无法设置宽高依据内容，
• inline-block
• flex：弹性盒布局
• table：块级表格
• grid：栅格布局
• lits-item：列表显示
• inherite：继承父级的性质
• display:none;不显示

7、position的值

• static：默认文档流
• absolute：绝对位置，相对于最近的定位祖先进行定位，否则找到最外层（经典口诀：子绝父相），不脱离文档流
• relative：以原来位置做参考进行移动，其他元素不受到影响
• sticky：粘性布局，指定一个位置，到达该位置后不发生变化，之前会发生变化
  position: sticky;
  top: 10px;
• fixed：固定在视口，相对浏览器窗口，即使页面滚动也不变

8、CSS3新特性

• flex布局
• border-radius
• 盒模型
• 媒体查询
• 过渡
• 2Dtransform
• 线性渐变：
• 动画

9、用纯CSS创建三角形

div {
	width:0;
	height:0;
	border-top:50px solid transparent;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;
	}

10、用css画圆，画扇形

借助border-radius：画圆形
div {
width: 100px;
height: 100px;
background-color:pink;
border-radius:50% 50%;
}
画扇形：
div {
width: 100px;
height: 100px;
background-color:pink;
border-radius:0 100% 0 0;
}

10、css样式初始化

• {
  margin:0;
  padding:0}

不同兼容性浏览器的默认值不一样，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

11、position与display、overflow、float这些特性叠加

会怎么样？？？
display 属性规定元素应该生成的框的类型；
position属性规定元素的定位类型；
float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素&#x