文章目录
前言
H5C3高频知识点总结
一、H5C3
1.H5C3和Html,css相比有什么变化
H5新增特性:
(1)语义化标签:如header、nav、footer、aside、article、section等。
(2)音频(audio)、视频(video)
(3)表单属性:placeholder、autofoocus、required、maxlenght、minlength、novaildate、autocomplete
(4)输入框类型:email、url、number、search、range、color、time、date、month
C3新特性:
(1)选择器:属性选择器、伪类选择器、伪元素选择器
(2)颜色:rgba、hsla表示方式
(3)阴影:盒子阴影(box-shadow)文字阴影(text-shadow)
(4)边框:圆角border-radius
(5)怪异盒子模型:box-sizing
(5)背景剪切:背景色剪切:background-clip背景图剪切:background-origin
(6)渐变:线性渐变:linear-gradient 径向渐变:radial-gradient
(7)转换:transfrom 缩放拉伸scale 扭曲skew 平移translate旋转rotate
(8)过渡:transition可以实现动画
(9)动画animate
| H5新增 | |
|---|---|
| H5新增元素 | header、footer、section、aside、nav、article、button、progress(进度条标签) |
| H5的新增表单属性 | placeholder(input输入框的提示信息)、autofocus(input页面加载后自动获取焦点)、required(输入框的值不能为空,表单提交时判断)、maxlength(最大长度)、minlength(最小长度)、novalidate(不验证表单)、autocomplete(设置是否自动完成) |
| H5新增的表单输入框类型 | email(提交时验证是否有@符号)、url(提交时验证是否含有http://或者https://)、number (只能输入数字)、search(右侧有×号,点击清空内容)、range(显示滚动条范围)、color(显示拾色器)、time(显示小时和分钟时间)、data(显示年月日)、month(显示年月) |
| audio(音频) | Controls:音频控件 Loop:循环播放 Muted:静音 |
| video(视频) | Controls:视频控件、Loop:循环播放、Muted:静音、Height:高度、Width:宽度 |
| 属性选择器 | |
|---|---|
| 选择所有带有x属性元素 | [属性名] |
| 选择所有带有x属性=y属性的元素 | [x=”y”] |
| 选择所有带有x属性=y-开头属性的元素 | [x |
| 选择所有带有x属性=y属性值开头的元素 | [x^=”y”] |
| 选择所有带有x属性=y属性值结尾的元素 | [x$=”y”] |
| 选择所有带有x属性=包含y属性值子字符的元素 | [x*=”y”] |
| 伪类选择器 | |
|---|---|
| :first-child | 获取指定选择器的第一个元素 |
| :last-child | 获取指定选择器的最后一个元素 |
| :nth-child(n) | 获取指定选择器的第n个元素(所有子元素的顺序) |
| :nth-last-child | 获取指定选择器的第n个元素(从最后一个开始计数) |
| :nth-of-type(n) | 获取指定选择器的第n个元素(所有指定选择器的顺序) |
| :nth-last-of-type(n) | 获取指定选择器的第n个元素(从最后一个开始计数) |
| 伪元素选择器 | |
|---|---|
| ::first-letter | 选中文本内容的第一个汉字或者字母 |
| ::first-line | 选中文本内容的第一行 |
| ::before | 在当前元素的内部的前边添加 |
| ::after | 在当前元素的内部的后边添加 |
| CSS3新增 | |
|---|---|
| CSS3颜色 | rgba、hsla表示方式 |
| CSS3阴影 | 盒子阴影(box-shadow)文字阴影(text-shadow) |
| CSS3圆角边框 | border-radius |
| CSS3盒子模型 | box-sizing |
| CSS3背景 | background-size 设置背景图片的尺寸、background-origin 设置背景图片的原点、background-clip 设置背景图片的裁切区域 |
| CSS3渐变 | linear-gradient(线性渐变)、radial-gradient(径向渐变) |
| CSS3过渡 | transition-property (css属性)、transition-duration(过渡的周期)、transition-timing-function(过渡的时间速度曲线):ease(默认的)、linear(匀速的)、transition-delay(过渡的延迟) |
| CSS3自定义动画 | animation-name动画的名称、animation-duration动画的周期、animation-timing-function动画的时间速度曲线、animation-delay动画的延迟、animation-iteration-count动画的次数(infinite无限)、animation-paly-state:paused动画的暂停、动画的开始:@keyframes动画的名称、开始From{}、结束to{} |
| CSS3-2D转换 | transform:translate(x,y)平移、rotate(x,y)旋转、skew(x,y)扭曲、scale(x,y)缩放拉伸 |
| CSS3-3D转换 | transform-style:preserve-3d; |
2.标签元素分类,和特点
块状元素:
常见的有:hn/p/div/ul/ol/dl/li/dd/dt/table/thead/tbody/caption/tr/form/header/footer/section/nav/article/aside
特点:
1)有默认的宽高,宽是父元素的100%,高是内容撑起来的
2)宽高和内外边距的四个方向都可以设置
3)独占一行
4)可以容纳任何元素(h1,p元素不能容纳块状元素)
行内块元素:
常见的有:Img/audio/video/input/button/labe;/select/option/textarea
特点:
1)有默认的宽高,是元素本身的宽高
2)宽高和内外边距的四个方向都可以设置
3)相邻的行内元素或行内块元素在同一行显示
4)一般不容纳其他元素
行内元素:
常见的有:span/a/b/strong/i/em/u/ins/s/del
特点:
1)宽度和高度由其内容自动填充,不可设置宽高
2)相邻的行内元素或行内块元素在同一行显示
3)只可容纳行内元素与内容
4)水平方向上的内外边距可以设置,垂直方向无效
display:block;(将元素变为块级元素)
display:inline; (将元素变为行级元素)
display:inline-block;(将元素变为行级块元素)
3.圣杯布局(双飞翼布局)有哪几种实现方式
浮动、定位、弹性盒子
(1)都左浮动,中间盒子宽度为calc(100%-左右盒子宽度)。
(2)左右盒子一个左浮动一个右浮动,中间盒子加对应的的左右边距
(3)左右盒子绝对定位absolute,中间盒子加对应的的左右边距
(4)弹性盒子,左右盒子宽度固定,中间盒子加上弹性因子flex-grow:1;



4.弹性盒模型有哪些属性和属性值,什么效果
| display:flex | 设置此容器为弹性父容器 |
| flex-directionsh设置项目排列方向(主轴) | Row默认值从左向右、Row-reverse从右向左、Column从上到下、Column-reverse从下向上 |
| justify-content设置项目在主轴方向上的对齐方式 | flex-start(默认值):左对齐;flex-end:右对齐;center: 居中;space-between:两端对齐,项目之间的间隔都相等;space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍; |
| align-items设置项目在交叉轴方向上对齐方式 | stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。 |
| flex-warp设置超出容器的项目是否换行 | nowrap(默认值):项目显示在一行中,默认情况下会缩小它们以适应Flex容器的宽度;wrap:如果需要,从左到右和从上到下,弹性项目将显示在多行中;wrap-reverse:如果需要,从左到右和从下到上,弹性项目将显示在多行中; |
| align-content设置项目换行的对齐方式 | flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。 |
项目:
| 属性名 | 描述 |
|---|---|
| order | 设置项目沿着主轴方向上的排列顺序,数值越小排列越靠前属性为整数,默认为0 |
| flex-shrink | 当项目在主轴方向上溢出时,设置项目收缩因子来压缩项目适应容器,例如flex-shrink:1; |
| flex-grow | 当项目在主轴还有剩余空间时,设置项目扩张因子来进行剩余空间的分配,例如flex-grow:1; |
| flex-basis | auto 属性值类型为 |
| flex | flex-grow,flex-shrink,flex-basis,的简写,none等价于0,0,auto,auto等价于1,1auto |
| align-self | 设置项目在行中交叉轴方向上的对齐方式,用于覆盖容器中的align-items。属性值有:auto flex-start flex-end center baseline stretch |
5.常见的盒子模型有哪些,有什么区别
标准盒模型:设置的宽度就等于内容的宽度
(会因内外边距和边框的设置而改变大小)
box-sizing:content-box;(普通盒模型、默认)
怪异盒模型:内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度
(不会因设置内外边距和边框而改变盒子的大小)
box-sizing:border-box;(怪异盒模型、IE盒模型)
弹性盒模型:display:flex;
6.写一个网易云播放动画,图片旋转+撞针来回拨动
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pointer1 {
position: absolute;
top: -200px;
left: 15px;
width: 10px;
height: 100px;
background-color: red;
transform-origin: left top;
transform: rotate(-30deg);
transition: transform 1s linear;
}
.pointer2 {
position: absolute;
top: -200px;
left: 15px;
width: 10px;
height: 100px;
background-color: red;
transform-origin: left top;
transition: transform 1s linear;
}
.altum {
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: coral;
text-align: center;
line-height: 200px;
}
.play {
position: relative;
margin: auto;
width: 40px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: chartreuse;
color: white;
}
</style></head><body>
<div class="altum" id="altum">转圈</div>
<div class="play" id="play">
播放
<div class="pointer1" id="pointer"></div>
</div>
</body>
<script>
let n = 0;
let flag = false;
var timer;
let pointer = document.getElementById('pointer');
let altum = document.getElementById('altum');
let play = document.getElementById('play');
play.onclick = () => {
this.flag = !this.flag;
if(this.flag){
timer = setInterval(() => {
altum.style.transform = `rotate(${n+=10}deg)`;
},200);
pointer.className = 'pointer2';
}else {
clearInterval(timer);
pointer.className = 'pointer1';
}
}
</script>
</html>
7.说一下对浮动的理解,(什么是浮动,有什么用,怎么用,有什么问题,怎么清除浮动)
- 浮动:元素脱离标准流,漂浮到指定位置的过程,设置浮动的初衷是实现文字环绕图片的效果
- 有什么用: 块级元素相邻
- 怎么用:float:left左浮动、Float:right右浮动
- 问题:添加浮动后的子元素撑不开父元素的高度(浮动不占位置,需要清除浮动)
- 清除浮动:
(1)额外标签法:给子元素添加额外的兄弟元素(不规范。不够语义化)
(2)为父级元素添加overflow:hidden;(局限于浮动类)
(3)伪元素清除浮动(推荐)
(4)双伪元素清除浮动、 .clearfix {* zoom:1;}
8.伪类有哪些,作用和书写顺序
- 伪类::link,:visited,:hover,:active
- 作用:
:link a标签还未被访问的状态;
:visited:a标签已被访问过的状态;
:hover: 鼠标悬停在a标签上的状态;
:active: a标签被鼠标按着时的状态;- 书写顺序:a:link,a:visited,a:hover,a:active(记忆技巧:lv包hao用)(原因:其实本质还是“同等优先权的样式,写在后边的会覆盖前边”,a标签的伪类只不过是又结合了不同的动作顺序,动作的触发顺序决定了伪类的顺序必须按lvha来写。)
9.如何去掉相邻两个图片中间的白边
img是行内块元素,默认之间是存在缝隙的。要去除缝隙有两种方法:
(1)设置font-size属性为0
(2)设置img为block元素再浮动
10.如何实现文字垂直水平居中,盒子垂直水平居中
- 文字水平居中:设置text-align:center;
- 文本的垂直居中:设置line-height:父盒子的高度;
- 盒子垂直水平居中:
(1)设置margin:0 auto;
(2)position定位(适用于子盒子有宽度和高度的时候)
(3)position + transform (子盒子有或没有宓高的时候都适用)
(4)flex布局(子盒子有或没有宽高的时候都适用)
11.单行文本溢出显示省略号,多行文本溢出显示省略号
(1)单行文本溢出显示省略号:
/*1、先强制一行显示文本*/
white-space: nowrap ; (默认 normal 自动换行)
/*2、超出的部分隐藏*/
overflow: hidden;
/*3、文字用省略号替代超出的部分*/
text-overflow: ellipsis;
(2)多行文本溢出显示省略号:
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
/*补充:*/
英文换行:word-break:break-all;
本文总结了H5C3的重要知识点,包括H5新增的语义化标签、音频视频功能、表单属性以及C3中的新选择器、渐变和转换。深入探讨了圣杯布局的实现方式,弹性盒模型的应用,以及浮动、定位和盒子模型的理解。还介绍了如何处理图片间隙、文本居中和溢出省略号等问题。
429

被折叠的 条评论
为什么被折叠?



