HTML语义化
HTML语义化就是让页面内容结构化,它有如下优点
1、易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
2、有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
3、方便其他设备解析,如盲人阅读器根据语义渲染网页
4、有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐
如:
<header>代表头部
<nav>代表超链接区域
<main>定义文档主要内容
<article>可以表示文章、博客等内容
<aside>通常表示侧边栏或嵌入内容
<footer>代表尾部
HTML5新标签
有<header>、<footer>、<aside>、<nav>、<video>、<audio>、<canvas>等...
CSSrem与em的区别
rem是根据根的font-size变化,而em是根据父级的font-size变化
rem:相对于根元素html的font-size,假如html为font-size:12px,那么,在其当中的div设置为font-size:2rem,就是当中的div为24px
em:相对于父元素计算,假如某个p元素为font-size:12px,在它内部有个span标签,设置font-size:2em,那么,这时候的span字体大小为:12*2=24px
CSS新特性
transition:过渡
transform:旋转、缩放、移动或者倾斜
animation:动画
gradient:渐变
shadow:阴影
border-radius:圆角
绝对定位和相对定位的区别
position: absolute绝对定位:是相对于元素最近的已定位的祖先元素
position: relative相对定位:相对定位是相对于元素在文档中的初始位置
水平垂直居中
Flex布局
display: flex //设置Flex模式
flex-direction: column //决定元素是横排还是竖着排
flex-wrap: wrap//决定元素换行格式
justify-content: space-between //同一排下对齐方式,空格如何隔开各个元素
align-items: center//同一排下元素如何对齐
align-content:space-between//多行对齐方式
水平居中
行内元素:display: inline-block;
块级元素:margin: 0 auto;
Flex:display:flex;justify-content:center
垂直居中
行高 = 元素高:line-height: height
flex:display:flex;align-item:center
多行元素的文本省略号
display: -webkit-box
-webkit-box-orient:vertical
-web-line-clamp:3
overflow:hidden