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:将超出内容进行裁剪,不会出现滚动条。