前端面试---CSS

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

如何让一个在body下的元素.icon上下左右居中？

.body{
 display:flex;
}
.icon{
 margin:auto;
}

//这是最简单的方法 也可以使绝对定位flaot等

padding和margin有什么不同？

padding的作用对象是自己margin作用与外部对象。

vw和百分比有什么区别

vw只跟屏幕分辨率有关系百分比会根据父级变化而变化

行内元素和块级元素

行内元素没办法设置宽高根据内容自动变化；块级元素默认继承父级宽高；

如何让浏览器支持小字体？

transform:scale(0.8) //缩放

CSS有哪些基本选择器？它们的权重是如何表示的？

css有属性选择器、类选择器、id选择器
优先级：important>内敛样式>类属性选择器、属性选择器、伪类>元素选择器、伪元素选择器

CSS的引入方式有哪些？ink和@ import的区别是什么?

行内式是指将样式写在元素的 style属性内。
内嵌式是指将样式写在 style元素内。
外链式是指通过link标签引入CSS文件内的样式。
link是 XHTML的标签除了加载CSS文件外还可以加载RSS等其他事务如加载模板等,@import只加载css资源
如果用link引用CSS在页面载入时同时加载即同步加载。
如果用@ import引用CSS则需要等到网页完全载入后再加载CSS文件即异步加载。
link是 XHTML的标签没有兼容问题。
@ import是在CSS2.1中提出的不支持低版本的浏览器。
link的标签是DOM元素支持使用 JavaScript控制DOM和修改样式；@ import是种方法不支持控制DOM和修改样式。

浮动元素引起的问题和解决方法是什么？

（1）父元素的高度无法被撑开影响与父元素同级的元素。
（2）与元素同级的非浮动元素会紧随其后（类似遮盖现象）。
（3）如果一个元素浮动则该元素之前的元素也需要浮动；否则会影响页面显示的结构（即通常所说的串行现象）

请说明 position:absolute和float属性的异同。

共同点是对内联元素设置float和 absolute属性可以让元素脱离文档流并且可以设置其宽高。
不同点是float仍可占据位置不会覆盖在另一个BFC区域上浮动的框可以向左或向右移动直到它的外边缘碰到包含框或另一个浮动框的边框为止 absolute会覆盖文档流中的其他元素即遮盖现象。

CSS的哪些样式可以继承？哪些不可以继承？

可继承的样式有font- size font-family color, UL LI DL DD DT。
不可继承的样式有 border、 padding, margin, width、 height。

为什么要初始化CSS？

因为浏览器的兼容问题不同浏览器对有些标签的默认值是不同的如果没有初始化CSS往往会导致页面在不同浏览器之间出现差异。
当然初始化样式有时会对SEO产生一定的影响但鱼和熊掌不可兼得所以在力求影响最小的情况下初始化CSS。
最简单的初始化方法就是：*{ padding：0；margin：0；}

display有哪些值？说明它们的作用

display的值有 block、none, inline、 inline- block、list-item、 table和 inherit。其作用如下。
block是指块类型。默认宽度为父元素宽度可设置宽高换行显示。 none是指元素不会显示已脱离文档流。
inline是指行内元素类型。默认宽度为内容宽度不可设置宽高同行显示。
inline- block是指默认宽度为内容宽度可以设置宽高同行显示。
list-item是指像块类型元素一样显示并添加样式列表标记。
注意：例如用div模拟li元素

< div style=" display:list-item：">啊啊啊啊
。
table是指此元素会作为块级表格显示。
inherit是指从父元素继承 display属性的值。