css总结及常考问题_不同浏览器下 left的默认值一样吗-CSDN博客

本文链接：https://blog.csdn.net/zhaohb2016/article/details/125725310

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

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

什么应用场景

BFC的使用场景

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

盒子塌陷

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

如何解决盒子塌陷

给父盒子设定指定宽高（非自适应了）
给外部盒子也浮动
父盒子添加overflow属性
下方引入清除浮动块
给父盒子添加border
给父盒子设置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