©2020-2024 ioDraw All rights reserved
46、HTML语义化
HTML 语义化就是让页面内容结构化，它有如下优点
1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
2、有利于 SEO，搜索引警根据标签来确定上下文和各个关键字的权重。
3、方便其他设备解析，如盲人阅读器根据语义渲染网页。
4、有利于开发和维护，语义化更具可读性，代码更好维护，与 CSS3 关系更和谐。
如：
<header>代表头部 <nav>代表超链接区域 <main>定义文档主要内容 <article>可以表示文章、博客等内容
<aside>通常表示侧边栏或嵌入内容 <footer>代表尾部
47、HTML5 新标签
有<header>、<footer>、<aside>、<nav>、<video>、<audio>、<canvas>等
CSS
48、盒子模型
盒模型分为标准盒模型和怪异盒模型(IE 模型)
box-sizing: content-box //标准盒模型 box-sizing: border-box //怪异盒模型
标准盒模型: 元素的宽度等于 style 里的 width+margin +border+padding 宽度
如下代码，整个宽高还是 120px
div{ box-sizing: content-box; margin: 10px; width: 100px; height: 100px;
padding: 10px; }
怪异盒模型: 元素宽度等于 style 里的 width 宽度
如下代码，整个宽高还是 100px
div{ box-sizing: border-box; margin: 10px; width: 100px; height: 100px;
padding: 10px; }
注意: 如果你在设计页面中，发现内容区被撑爆了，那么就先检查一下border-sizing 是什么，最好在引用 reset.css 的时候，就对
border-sizing 进行统一设置，方便管理。
49、rem 与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,在它内部有个 spanem :标签，设置 font-size:
2em,那么，这时候的 span 字体大小为: 12*2=24px
50、CSS 选择器
50.1、css 常用选择器
通配符: * ID 选择器: #ID 类选择器: .class 元素选择器: p、a等 后代选择器: p span、div a 等 伪类选择器:
a:hover 等 属性选择器: input[type="text"] 等
50.2、css 选择器权重
!important -> 行内样式 -> #id -> .class -> 元素和伪元素 ->* -> 继承 -> 默认
51、CSS 新特性
transition: 过渡 transform: 旋转、缩放、移动或者倾斜 animation:动画 gradient: 渐变 shadow: 阴影
border-radius: 圆角
52、行内元素和块级元素
行内元素 (display: inline)：
宽度和高度是由内容决定，与其他元素共占一行的元素，我们将其叫行内元素，例如: <span> 、 <i> 、<a>等
块级元素 (display: block)：
默认宽度由父容器决定，默认高度由内容决定，独占一行并且可以设置宽高的元素，我们将其叫做块级元素，例如: <p> 、<div> 、 <ul>等
在平时，我们经常使用 CSS 的 display: inline-block，使它们拥有更多的状态
53、绝对定位和相对定位的区别
position: absolute
绝对定位:是相对于元素最近的已定位的祖先元素
position: relative
相对定位: 相对定位是相对于元素在文档中的初始位置
Flex布局
54、BFC
54.1、什么是 BFC?
BFC 格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响
54.2、如何产生 BFC?
display: inline-block position: absolute/fixed
54.3、BFC 作用
BFC 最大的一个作用就是: 在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响
* 解决上外边距重叠;重叠的两个 box 都开启 bfc
* 解决浮动引起高度塌陷;容器盒子开启 bfc
* 解决文字环绕图片;左边图片 div,右边文字容器 p,将 p 容器开启 bfc
55、水平垂直居中
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
56、less,sass,styus 三者的区别
变量
Sass 声明变量必须是[S] 开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号: 分隔开。
Less 声明变量用 [@] 开头，其余等同 Sass。
Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有[等号]。
作用域
Sass :三者最差，不存在全局变量的概念。
Less: 最近的一次更新的变量有效，并且会作用于全部的引用!
Stylus: Sass 的处理方式和 Stylus 相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效;
嵌套
三种 CSS 预编译器的[选择器嵌套] 在使用上来说没有任何区别，甚至连引用父级选择器的标记 & 也相同
继承
Sass和 Stylus 的继承非常像,能把一个选择器的所有样式继承到另一个选择器上。使用[@extend] 开始，后面接被继承的选择器。Stylus
的继承方式来自 Sass两者如出一辙。 Less 则又[独树一帜] 地用伪类来描述继承关系。
导入@Import
Sass 中只能在使用 url() 表达式引入时进行变量插值
$device: mobile; @import url(styles.#($device).css);
Less 中可以在字符串中进行插值
@device: mobile; @import "styles. @ ldevice).css";
Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现
device = "mobile"; @import "styles." + device + ".css
总结
Sass 和 Less 语法严谨、Stylus 相对自由。因为 Less 长得更像 css，所以它可能学习起来更容易。
Sass 和 Compass、Stylus 和 Nib 都是好基友
Sass 和 Stylus 都具有类语言的逻辑方式处理: 条件、循环等，而 Less 需要通过 When 等关键词模拟这些功能，这方面 Less 比不上
Sass 和 Stylus
Less 在丰富性以及特色上都不及 Sass 和 Stylus,若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用 (个人愚见)
57、link 与@import 区别与选择
<style type="text/css"> @import url(CSS 文件路径地址); </style> <link href="CSSurl
路径" rel="stylesheet" type="text/css"/
link 功能较多,可以定义 RSS,定义 Rel 等作用,而@import 只能用于加载 css;
当解析到 link 时，页面会同步加载所引的 CSS，而@import 所引用的 CSS 会等到页面加载完才被加载;
@import 需要 IE5 以上才能使用;
link 可以使用 js 动态引入，@import 不行。
58、多行元素的文本省略号
overflow : hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp:3; -webkit-box-orient: vertical