【01】html和css知识点整理

1、 HTML语义化

HTML语义化就是合理、正确的使用标签来展示内容，更便于理解。比如使用 h1 ~ h6定义标题。

HTML语义化的好处：

代码结构清晰，方便阅读，有利于团队合作开发；

利于搜索引擎优化，利于SEO。

常见语义化标签

• <title>：定义文档的标题（注：只能在head标签内出现）。
• <hn>：h1~h6，分级标题，<h1> 与<title> 协调有利于搜索引擎优化。
• <ul>：无序列表。
• <ol>：有序列表。
• <header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
• <nav>：标记导航。
• <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
• <article>：定义外部的内容，其中的内容独立于文档的其余部分。
• <section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
• <aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
• <footer>：页脚，只有当父级是body时，才是整个页面的页脚。
• <small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
• <strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
• <em>：将其中的文本表示为强调的内容，表现为斜体。
• <mark>：使用黄色突出显示部分文本。
• <figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
• <figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
• <cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
• <blockquoto>：定义块引用，块引用拥有它们自己的空间。
• <q>：短的引述（跨浏览器问题，尽量避免使用）。
• <time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
• <abbr>：简称或缩写。
• <dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
• <address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
• <del>：移除的内容，定义文档中已被删除的文本。
• <ins>：添加的内容，定义文档中添加的文本
• <code>：标记代码。
• <meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
• <progress>：定义运行中的进度（进程）。

2、HTML 标签分类

块级元素

含义: display: block | display: table 元素, 独占一行

常见元素: div, h1~h6, table, ul, ol, p

内联元素

含义: display: inline | display: inline-block 元素, 不会独占一行

常见元素: span, img, input, button, i

3、盒模型的宽度如何计算

box-sizing 属性

box-sizing 属性用来指定如何计算元素的总宽度和总高度

取值	定义
content-box	默认值， 元素总宽度= width + padding + border, width是内容的宽度； 元素总高度= height + padding + border, height是内容的高度。
border-box	可选值， 元素总宽度= width, width是内容的宽度 + padding + border； 元素总高度= height, height是内容的高度 + padding +border。

盒模型的宽高

(1) 使用offsetWidth | offsetHeight(只读属性) 获取盒模型宽高

定义: 元素的宽度(高度); 相对于某个元素的水平(垂直)偏移量;
取值: offsetWidth(offsetHeight) = 元素内容的宽度(高度) + padding + border
el.offsetWidth | el.offsetHeight 获取到的值为一个数值, 不带单位

(2) content-box | border-box两种情况下的宽高取值

盒模型取值	offset对应值
box-sizing: content-box;	offsetWidth= width + padding + border；offsetHeight = height + padding + border
box-sizing: border-box;	offsetWidth= width；offsetHeight= height

4、margin 纵向重叠

定义与计算

定义: 相邻块元素的上下margin会发生重叠; 子级的上下margin会与父级上下margin重叠
计算: 两元素之间最终显示的margin距离取最大值

解决 margin 纵向重叠

(1) 父子级 (子元素margin-top重叠到父元素, 父元素塌陷问题)

1> 子元素的margin-top, 改为父元素的padding-top
2> 父元素添加overflow: hidden
3> 父元素添加border: 1px solid transparent;
4> 父元素添加display:table

(2) 相邻元素
1> float: left|right;
2> display: inline-block;

5、margin 负值问题

margin-top负值: 自身元素向上移动设置值
margin-left负值: 自身元素向左移动设置值
margin-bottom负值: 下方元素上移, 自身元素不受影响
margin-right负值: 右侧元素左移, 自身元素不受影响

6、 BFC

BFC称为块级格式化上下文，是一个独立渲染的区域，内部元素不会影响边界以外元素

BFC形成条件

1> float的值不是none （lefth或right）
2> position的值不是static或者relative, 取值为absolute 或 fixed
3> overflow的值不是visible
4> display的值是inline-block、flex、table-cell、table-caption或者inline-flex

BFC的特性

1> 属于同一个BFC的两个相邻容器的上下margin会重叠
2> 计算BFC高度时浮动元素也参于计算
3> BFC的区域不会与浮动容器发生重叠

BFC的使用

清除浮动: 父节点没有设置高度, 子节点设置浮动的时候, 会发生高度塌陷

表现形式: 子元素脱离文档流, 高度超出父元素显示范围
期望表现: 父元素高度包含子元素高度, 高度不受浮动影响

1> 解决方法: 父元素形成BFC
2> BFC形成条件: overflow的值不是visible, 父节点添加overflow: hidden
3> 原理: BFC的特性2

相邻元素margin重叠

1> 解决方法: 设置两个不同的BFC, 第二个元素用div包起来，然后激活它使其成为一个BFC
2> BFC形成条件: overflow的值不是visible, div添加overflow: hidden
3> 原理: BFC的特性1

布局上实现自适应两栏

表现形式: folat: left; 后, 会与下一个元素重叠
期望表现: 不与下一个元素重叠, 浮动元素宽度依然存在

1> 解决方法: 下一个元素形成BFC
2> BFC形成条件: overflow的值不是visible, 下一个元素添加overflow: hidden
3> 原理: BFC的特性3

7、传统 PC 布局 实现方法

传统 PC 布局定义：两侧宽度固定，中间宽度自适应的三栏布局，实现中间部分先加载渲染

圣杯布局

涉及技术：定位position+浮动float

缺点：当middle<left宽度时, 会发生布局错乱; 解决办法 -> 外层div添加min-width=left宽度

1> html结构：box(middle-left-right)，middle区域需要放在最前面
2> box盒子设置最小宽度min-width=left宽度；根据已知的left、right宽度给box设置左右padding: 0 right宽度 0 left宽度，预留出两侧区域
3> middle、left、right设置float，让三个盒子浮动在一行中
4> middle盒子宽度设置为100%，此时left、right盒子会因为空间不够被挤到下面
5> left盒子设置margin-left: -100%，让盒子移动到middle开头处；使用position定位，设置left值，让盒子移动到左侧空白区域
6> right盒子设置margin-left: -right宽度，让盒子移动到middle结尾处；使用position定位，设置right值，让盒子移动到右侧空白区域

双飞翼布局

涉及技术：浮动float

缺点：需要多加一层dom节点

1> html结构: middle(>inner)-left-rigt，middle盒子里需要包含一个子盒子inner
2> inner盒子使用margin预留出左右位置 margin: 0 right宽度 0 left宽度
3> middle、left、right设置float，让三个盒子浮动在一行中
4> middle盒子宽度设置为100%，此时left、right盒子会因为空间不够被挤到下面
5> left盒子设置margin-left: -100%，让盒子移动到middle开头处
6> right盒子设置margin-left: -right宽度，让盒子移动到middle结尾处

绝度定位

涉及技术：绝对定位 position: absolute;

1> html结构: box(middle-left-right)
2> middle盒子宽度设置为100%，使用margin预留出左右位置 margin: 0 right宽度 0 left宽度;
2> left、right盒子使用position: absolute绝对定位，固定到对应位置

flex布局

涉及技术：flex

缺点：部分浏览器存在兼容性问题

1> html结构: box(middle-left-right)
2> left设置 order: -1, 让这个flex-item移动到最左边 （order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。）
3> middle设置 flex-grow: 1, 因为left和right定宽了有剩余空间, 1就可以铺满剩余空间, 默认是0 （flex-grow属性定义项目的放大比例, 默认为0, 即如果存在剩余空间, 也不放大）

8、清除浮动

清除浮动主要是为了解决, 父元素因为子级元素浮动引起的高度为0的问题

额外标签法 (不推荐, 添加无意义标签, 语义化差)

1> 在父元素内最后一个浮动标签后, 新加一个标签, 给其设置clear: both; (可清除浮动, 可以撑起父元素高度)
2> 或在父元素外新加一个标签, 给其设置clear: both; (可清除浮动, 撑不起父元素高度)

触发BFC (不推荐)

1> 父元素添加overflow:hidden
2> 缺点: 内容增多的时候容易造成不会自动换行导致内容被隐藏掉, 无法显示要溢出的元素

.clearfix (推荐使用, 伪元素)

1> 父元素添加 .clearfix类
2> .clearfix:after { content:‘’; display:table; clear:both; }

9、flex 布局 (弹性布局)

flex 配合 box-sizing: border-box 使用，效果更好

容器属性

名称	取值	定义
display	flex	开启flex布局
flex-direction	row、 column	主轴方向
flex-wrap	nowrap、 wrap	换行形式
justify-content	flex-start、flex-end、center、space-between、space-around	项目在主轴上的对齐方式
align-items	flex-start、flex-end、center、baseline、stretch	项目在交叉轴上如何对齐
align-content	flex-start、flex-end、center、space-between、space-around、stretch	多根轴线的对齐方式, 如果项目只有一根轴线, 该属性不起作用

项目属性

名称	取值	定义
order	number，默认为0	项目的排列顺序; 数值越小, 排列越靠前
flex-grow	number，默认为0	项目的放大比例
flex-shrink	number，默认为1	flex 元素的收缩规则

10、元素居中对齐的实现方式

垂直方向居中

(1) inline元素，父元素设置line-height
(2) absolute+margin： top 50% + margin-top 负值; 此方式必须知道子元素宽高
(3) absolute+transform：top 50% + transform: translate(0, -50%); 此方式适用于不知道子元素宽高(不兼容ie8)
(4) flex布局

水平方向居中

(1) inline元素：父元素设置 text-align: center
(2) block元素：子元素设置 margin: 0 auto;
(3) absolute+margin：left 50% + margin-left 负值; 此方式必须知道子元素宽高
(4) absolute+transform：left 50% + transform: translate(-50%, 0); 此方式适用于不知道子元素宽高(不兼容ie8)
(5) flex布局

11、css 绘制三角形

原理：采用的是相邻边框连接处的均分原理

实现思路

(1) 将元素的宽高设为0, 只设置 border
(2) 将任意三条边隐藏掉（颜色设为 transparent ）, 剩下的就是一个三角形

12、css3 媒体查询

针对不同屏幕大小定义不同样式

用法： @media mediatype and|not|only (media feature) {css…}

示例

@media screen and(max-width: 750px) {css… }
@media screen and(min-width: 750px) and (max-width: 100px) {css…}

13、css3 动画

（1）transition

用途：过度，用来实现元素不同状态间的平滑过渡

用法：transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间；(transition: all 3s linear 0s;)
1> transition-property: width; 需要过渡的属性
2> transition-duration: 1s; 过渡持续时间
3> transition-timing-function: linear; 运动曲线 （取值 linear | ease | ease-in | ease-out | ease-in-out）
4> transition-delay: 1s; 过渡延迟时间

注意：transition可以过渡transform属性, 实现动画效果，例：transition: transform 2s ease;

（2）transform

用途：转换，用来实现元素的缩放、旋转、位移

用法：transform: 类型 ：

1> 缩放: transform: scale(x, y);

x表示水平方向的缩放倍数； y表示垂直方向的缩放倍数；如果只写一个值就是等比例缩放；大于1表示放大, 小于1表示缩小, 不能为百分比。

2> 旋转: transform: rotate(角度); transform: rotate(45deg);

正值顺时针; 负值逆时针

3> 位移: transform: translate(x, y);

参数为百分比，相对于自身移动；正值代表向右和向下，负值代表向左和向上；如果只写一个值, 则表示水平移动。

（3）animation

定义动画：
1> @keyframes 动画名称 { from{初始状态} to{结束状态} }
2> @keyframes 动画名称 { 0%{初始状态} 50%{} … 100%{结束状态} }

使用动画：animation: 动画名称 持续时间; （在指定元素里, 通过 animation 属性调用动画）

14、移动端 rem 适配

（1）原理

rem是css3中新增的一个单位，它是一个相对单位。 作用于根元素时，相对于原始大小；作用于非根元素，相对于根元素设定的字体大小。

rem布局的本质是基于宽度等比缩放， 通过控制根元素的font-size实现

（2）根元素font-size计算：

公式：设备当前可视区的宽度/设计图宽度 = 当前页面根字体大小px

使用：设计稿上的元素为d(px)，则在css里面设置为d(rem)

举例：
1> 设计稿为200px，手机屏幕宽为400px，计算出页面根字体为2px；
2> 设计稿上某个元素宽为96px，css中设置为96rem；
3> 但是，浏览器可设置的最小字体大小为12px，当前页面根字体大小px = 设备当前可视区的宽度/设计图宽度*100更合理准确；
4> 结论，给根元素字体大小乘以100后，设计稿上的元素为d(px)，则在css里面设置为d/100(rem)。

（3）实现

window.onload 和 window.onresize时设置根元素字体大小

var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
/** pwidth(设计稿宽度) | prem(css换算比例, 推荐100) **/

添加meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

css中使用，rem的取值为 设计稿宽度/100