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的。