1. div垂直水平居中
/*父盒子flex*/
.div1 {
display: flex;
flex-direction: row;
justify-content: center;
}
/*或者子盒子定位*/
.div2 div{
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
2. position的属性
- relative 绝对定位 偏移位以原来所在位置为基准，占空间
- absolute 相对定位 根据父元素来定位，若如元素没有设置position属性，偏移以body为准，在标准流中不占位置
- fixed 固定定位 偏移以body为准，在标准流中不占位置
- static 默认位置，始终处于页面流给予的位置，忽略任何top bottom left right 声明
3. px em rem 的区别
- px 相对于限时批屏幕分辨率而言的虚拟长度单位，如果要换算成物理长度，要制定进度DPI
- em相对长度单位，相对于当前对象内文本的字体尺寸。
- rem css3新增的相对单位，使用rem为元素设定字体大小时仍然是相对大小，相对的是html根元素
- 区别：ie无法调整px作单位的字体大小，而em和rem可以缩放，rem相对的是html根元素，它可以只修改根元素就成比例的调整所有字体大小。
4. css引入方式
- 内联 行内
- 内嵌 style 一般写在head里
- 外链 link
- 导入式
<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>
5. link和@import的区别
- link是html加载前就引用，而import是html加载后才引用。举例，采用impor引用，会先显 示无样式的页面，然后再把样式放进去。如果用JavaScript动态引用CSS，得使用link引用方式才可实现。
6. css reset 的作用
- reset重置浏览器的css默认属性
7. css sprites，如何使用
- 精灵图，雪碧图，把小图片正和到大图片png上，减轻服务器对图片的请求数量
8. 清除浮动
9. 结构与表现分离是指什么
结构 html 表现 css
10. web语义化的理解
让浏览器更好读懂代码，进行html结构表现行为设计的时候，尽量使用语义化标签，使代码简洁明了易于web操作和网站seo方便团队协作
11. css有哪些选择器，优先级如何？
- !important > 行内 > id > class > 标签 > 伪类 > 属性选择 > 伪元素 > 继承 > 通配符
- 伪类
- 静态伪类
- :link 超链接点击之前
- :visited 超链接被访问过后
- 动态伪类
- :hover 悬停-鼠标放到标签上
- :active 激活-鼠标点击标签但是不松手的时候
- :focus 标签获得焦点时候(input获得焦点)
- 属性选择
- 对有 href 属性的锚（a 元素）应用样式： a[href] {color:red;}
- 伪元素（所有伪元素选择器）
- ::after p::after 在每个p元素之后插入内容。
- ::before p::before 在每个p元素之前插入内容。
- ::first-letter p::first-letter 选择每个p元素的首字母。
- ::first-line p::first-line 选择每个p元素的首行。
- ::selection p::selection 选择用户选择的元素部分。
- 通配符 *
