前端html学习总结

1、HTML5 中的新特性
语义化标签：article、footer、header、nav、section
表单控件：date、time、email、url、search
音视频：video、audio
画布：canvas
本地离线存储：localStorage

2、css3新增属性
边框：border-radius、box-shadow
背景：background-size（背景图片的尺寸）
文本：text-shadow（文本阴影）
变换：transform
过渡：transition
动画：animation
设置动画关键帧：
@keyframes animate {
0% {
background-color: white;
margin-left:0px;
}
100% {
background-color: white;
margin-left:0px;
}
}
使用动画：
div {
width:100px;
animation:animate 5s infinite;
}
animation-name 动画名
animation-duration 动画时间。
animation-iteration-count 动画播放的次数
animation-direction 动画方向

    IE 9 以及更早的版本不支持 animation 属性

3、清除浮动的方式
什么是浮动：
元素使用float:left/right;后，会脱离文档流，父级元素因此失去支撑（如果没有设置高度），下面的元素就会忽略父元素开始布局

常用方式：
    浮动元素的父级元素：overflow:hidden;
    浮动元素的父级元素： ::after{clear:both;content:'';display:block;}
    浮动元素的同级：添加一个空标签，并且设置clear:both;

4、浮动与绝对定位脱离文档流的区别(主要体现在 元素内文本的位置)
float：其他盒子会无视当前元素，从浏览器左上角开始布局，而盒子内的文本依旧会为浮动的元素让出位置
绝对定位：其他盒子与盒子内的文本都会无视当前元素，从左上角开始布局

https://blog.csdn.net/qq_42720683/article/details/98513061

5、盒子模型的区别
盒子组成
内容width + padding + border + margin

通过box-sizing可以设置不同的盒子模型，所以盒模型分为 ：
    box-sizing:content-box  【默认值】  --  气球，大小可以随内容的变化而变化
        内容盒子(W3C标准盒子)
        盒子总宽度 = margin + border + padding + width

    box-sizing:border-box              -- 
    2) 默认宽度为100%，默认高度由子元素或者内容决定 
    3) 可以为其指定宽高 style="width:;height:;" 

行内元素
    span、a、img、strong、i
    1) 与其他行内元素共享一行
    2) 默认宽高由内容决定
    3) 不能为其指定宽和高
    4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

7、如何给行内元素设置宽高 – 将行内元素设置为块级元素、脱离文档流
1) 使用display
display:block/inline-block
2) 使用position
position:absolute/fixed
3) 使用float
float:left/right

8、块级元素如何在父元素中水平垂直居中
1) 父元素position
1. 父元素相对定位，子元素绝对定位，子元素margin:auto;top:0;left:0;bottom:0;right:0;
2. 父元素相对定位，子元素绝对定位，子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度

2) 父元素display
    3. 父元素display:flex; justify-content:center; align-items:center，子元素自动居中  （伸缩盒布局）
    4. 父元素display:table-cell; vertical-align:middle; 子元素margin:auto 

9、隐藏元素的方式及区别
display:none 浏览器不显示该元素, 也不占据页面空间
opcity:0 浏览器不显示该元素,但是会占据页面空间，交互事件正常
visibility:hidden 浏览器不显示该元素,但是会占据页面空间，交互事件失效

var div = document.getElementById('one');
div.onclick = function(){
    alert(1)
}

注意：当父元素使用opacity改变透明度的时候，子元素也会跟着改变，即使子元素使用opacity:1;也不行
解决方法：父元素使用rgba

==>

rgba和opacity的区别？
opacity作用于元素本身以及元素内的所有内容，
rgba只作用于元素本身，子元素不会继承透明效果。

10、css中link和@import的区别
1) 所属范围
@import是 CSS 的语法，只能导入样式
link是 HTML 的标签，不仅可以加载 CSS 文件，还可以定义 rel 属性
rel="stylesheet"表示调用外部样式表

2) 加载顺序
    页面加载时，link标签引入的 CSS 被同时加载
    @import引入的 CSS 将在页面加载完毕后被加载

3) 兼容性区别
    @import需要IE5+
    link标签，不存在兼容性问题

11、如何让元素使用margin:0 auto，水平居中
只对块级元素生效，所以margin:0 auto的用法分为三种，分别为
块级元素：div、h1~h3、ul
/对于块级元素，只需要设置width/
div{
width: 200px;
background-color: #ccc;
margin:0 auto;
}

	行内元素：span、a
        /*对于行内元素，需要先设置为块级元素，再加宽度*/
        span{
            display: block;
            width: 100px;
            background-color: red;
            margin:0 auto;
        }

	行内块元素：button、img、input、textarea
        /*对于行内块级元素，需要设置为块级元素，可以不用设置宽度*/
        input{
            display: block;
            margin:0 auto;
        }

12、overflow的三种取值，并说明具体含义
auto：自适应，内容如果溢出，会自动生成滚动条
scroll：将超出的内容进行裁剪（也就是不显示），并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
hidden：将超出内容进行裁剪，不会出现滚动条。