前端面试题（关于html+css篇）

1、h5、c3新特性

H5新增：

语义化标签(header,nav,article,section,aside,footer),音频视频标签

新增了表单类型(number,tel,serach等)

新增表单属性(placeholder,multiple,autofocus)

C3新特性:

属性选择器和结构伪类选择器，伪元素选择器

盒模型:box-sizing:bordder-box

过渡，动画，flex布局，2D、3D转换，文字阴影，圆角边框，图片边框

 2、如何使一个盒子水平垂直居中？

• 绝对定位：position:absolute; left:50%;top:50%;margin盒子的50%;
• flex布局:justify-conent: center, align-item: center
• 行内块元素：text-align:center;line-height:空间的高度

3、CSS优先级

 !importent>行内> id> 类，伪类，属性>标签，伪元素选择器 > 继承和通配符

4、CSS中有哪先属性可继承

1、字体系列属性

font-family：字体系列 　　

font-weight：字体的粗细 　　

font-size：字体的大小 　　

font-style：字体的风格   　　

2、文本系列属性 　　

text-indent：文本缩进 　　

text-align：文本水平对齐 　　

line-height：行高 　　

word-spacing：单词之间的间距 　　

letter-spacing：中文或者字母之间的间距 　　

color：文本颜色   　　

3、元素可见性： 　　

visibility：控制元素显示隐藏   　　

4、列表布局属性： 　

list-style：列表风格，包括list-style-type、list-style-image等   　　

5、光标属性： 　　

cursor：光标显示为何种形态 

 5、display:none和visibility:hidden的区别？

都是可以使元素不可见

display:none;元素不可见，并且在页面中不占有位置

visibility:hidden;元素不可见，但是在页面中还占有位置

6、如何让img图片和文字垂直居中

 设置行高等于高度，图片设置vertical-align：middle

7、css盒模型

怪异盒子模型

box-sizing: border-box;   content+padding+border

传统盒子模型

box-sizing:content-box；content+padding+border+margin

8、清除浮动的方法

•  父盒子设置高度

• 父盒子设置overflow:hidden

• 父盒子末尾添加一个空盒子，设置clear:both;

 9、画一条0.5px的线

设置高为1px，然后缩放功能transform:scale(0.5)

10、画一个三角形

div{
width:0;
height:0;
border:100px solid;
border-color:transparent transparent transparent red;
}

11、怎么自适应

•  流式布局，设置盒子百分比，

• 媒体查询，获取屏幕大小变化，更改页面根元素字体大小

12、rgba和opticy的相同点和不同点

 都可以设置透明度

区别：语法上：rgba是属性值，opticy是属性

opticy：一般作用于元素或内容，内容会继承元素的透明度

rgba：一般作为背景颜色，

 13、块元素、行内元素、行内块元素

1、display:block:转换为块元素

特点：独占一行，可设置宽高，margin和padding的上下左右均对其有效，

代表性：<div><p>

2、display:inline;转换为行内元素

特点：设置宽高无效，argin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间,行内元素尺寸，排列方式从左到右

代表性：<span>

3、display:inline-block;转换为行内块元素

特点：可设置宽高，排列方式从左到右

代表性：<input><img>

14、em,rem,px的区别

 em:相对长度单位，相当于当前对象内文本的字体尺寸。

如过我们未设置当前文本的字体尺寸，那么em就会相对于浏览器的默认字体尺寸

如果父类有字体尺寸，则继承父类

rem:相对单位，它相对的只是HTML根元素，通过改变根元素的大小就可以改变它的值

px:像素的意思，在指定字体大小和元素的宽高的时候使用。像素是相对于显示器屏幕分辨率

而言的

15、link和@important的区别

• link属于html，而@import属于css
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
• link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
• link方式样式的权重高于@import的。