H5C3高频知识点总结(H5C3、圣杯布局、弹性盒模型、浮动、定位)

本文总结了H5C3的重要知识点,包括H5新增的语义化标签、音频视频功能、表单属性以及C3中的新选择器、渐变和转换。深入探讨了圣杯布局的实现方式,弹性盒模型的应用,以及浮动、定位和盒子模型的理解。还介绍了如何处理图片间隙、文本居中和溢出省略号等问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


前言

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-basisauto 属性值类型为
flexflex-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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值