乐趣区

关于css:CSS相关问题

1、浏览器是如何解析 css 选择器的?
浏览器会【从右往左】解析 css,这样匹配,性能更好,因为第一步就可能筛选掉大部分数据
2、css 选择器有哪些,哪些属性能够继承?
id 选择器,类选择器,标签选择器,子选择器,兄弟选择器,相邻选择器,属性选择器,伪类选择器,全局选择器,群选择器。
字体类属性如:font-size,文本系列属性如:text-algin,color 等
3、为什么要初始化款式?
浏览器差别,不同的浏览器对标签的默认值是不同的,如果不初始化会呈现页面差别。
4、display:none 和 visible:hidden 有什么区别?
display 管制元素的显示,当为 none 时不显示并且不占网页空间;visible 为 hidden 的时候,元素暗藏但仍然占据空间,visible 具备继承性
5、对 BFC 标准的了解?
BFC 块级格式化上下文,是一个独立的布局环境,容器内的元素和容器外的元素互不烦扰。
创立 BFC:根元素或蕴含根元素的元素,浮动元素,相对定位,overflow:hidden|auto|scroll,display:inline-block | flex | inline-flex | table-cell | table-caption
BFC 能够解决高度塌陷,margin 塌陷等问题
6、为什么要革除浮动,革除浮动有那些形式?
因为浮动会造成高度塌陷,能够利用 BFC 革除浮动,底部元素设置 clear:both, 利用伪元素革除浮动。

// 在父元素上增加此类,利用伪元素革除浮动
.clearfix:after { 
    content:""; 
    display:table; /* 采纳此办法能够无效防止浏览器兼容问题 */
    clear:both;
 }

7、设置浮动后,该元素的 display 值是多少?

display:block;

8、css 优化进步性能的办法有哪些?

css 压缩,webpack 外面能够应用 MiniCssExtractPlugin 插件
缩小 css 嵌套,最好不要套三层以上
css 精灵图片
合并 css 文件,提取公共款式

9、垂直方向元素的百分比是绝对容器的高度吗?
子元素的高度百分比是绝对于父元素高度
margin-top,padding-top 百分比是绝对父元素的宽度
10、如果须要手动写动画,你认为最小工夫距离是多久,为什么?
少数显示器的频率是 60Hz,即 1s 刷新 60 次,所以实践上 1 /60*1000ms = 16.7ms 最佳
11、元素居中形式?
a、文本居中:text-align:center;
b、display:flex 形式居中,justify-content:center 程度居中,align-item:center 垂直居中。
c、absolute + top:50% + left:50% + margin-top: 负高度一半 +margin-left: 负宽度一半
d、absolute + top:50% + left:50% + transform: translate(-50%, -50%);
12、盒子模型
规范的盒子模型是:content-box, 意思是盒子模型由 margin+border+padding+content 形成
怪异的盒子模型是:border-box, 意思是盒子模型的内容区域蕴含了 border 和 padding 和内容的 width,整个盒子是由 margin+ 内容区域形成

退出移动版