首页 > 其他分享 >[HTML、CSS]知识点

[HTML、CSS]知识点

时间:2024-04-03 10:11:27浏览次数:22  
标签:知识点 盒子 父级 height HTML 子级 设置 margin CSS

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://www.cnblogs.com/cnb-yuchen/p/18032061
出自【进步*于辰的博客

注:本文中“子级”指子级盒子或子级标签;“逻辑位置”指根据理论推断的所在位置,“实际位置”指实际显示的所在位置。

目录

1、其他知识点链接

  1. 细节、经验
  2. 特效实现

2、标签

2.1 video

参考笔记一,P4.2/4。

  1. <video>标签引入视频默认不会自动播放,需设置属性autoplay: muted
  2. <video>不同于<img>,比例不能随意改变,需设置属性object-fit: cover进行拉伸。

2.2 input

参考笔记一,P8.11、P9.14。

属性:

  1. autofocus:自动聚集;
  2. pattern:设置正则表达式;
  3. novaliable:取消提交表单时对整个表单的验证;
  4. autocomplete = "on/off"设置表单是否打开自动完成功能;
    注:“自动完成功能”指将表单过去输入过的信息、在选中时自动填充。

2.3 画布 Canvas

推荐一篇博文《学习HTML5 Canvas这一篇文章就够了》(转发)。
参考笔记一,P4.9/10/12。

注:下文中的“canvas1”是Canvas标签,代码是在js中执行。

2.3.1 属性设置

  1. 修改参考点:即修改坐标原点。canvas1.translate(x, y)
  2. 旋转坐标轴:canvas1。rotate(<弧度>)

修改刻度的width、height:

注:刻度的width、height与Canvas标签的width、height(用css修改)不是一个概念。

方法1、内嵌式修改width、height属性。

<Canvas id="canvas1" width="500" height="500" ></Canvas>

方法2、js修改width、height属性。

canvas1.width = 500;
canvas1.height = 500;

2.3.2 示例:画动态时钟

思想:

  1. 通过旋转坐标轴的方法画出刻度和时分秒针;
  2. 定义定时器(interval),时隔1s,先画出刻度,再根据时分秒针转动联系画出时分秒针。注意:先擦除(覆盖),再画。

转动联系:

  1. 秒针转动一圈,分针转动π/30
  2. 分针转动一圈,时针转动π/6

2.4 选项列表 datalist

笔记一,P9.12/13。

需要与<input>连用,用于存放<input>的可选值。
示例:

country:<input type="text"list="list1">
<datalist id="list1">
	<option value="China" />
	<option value="American" />
</datalist>

在这里插入图片描述

2.5 折叠列表 details

<summary>是列表的标题。
示例:

<details>
	<summary>country</summary>
	<p>China</p>
	<p>American</p>
</details>

在这里插入图片描述
在这里插入图片描述

3、关于 margin

参考笔记一,P8.1/7。

  1. 相邻同级盒子的margin会相互覆盖;
  2. 若父级设置了border,则不会受子级的margin影响,即使子级的margin大于父级的margin;
  3. 若父级未设置border,则子级和父级的margin会相互覆盖。其中,若子级的margin大于父级的margin,父级会被“挤开”,这种现象称为$外边距塌陷$;(解决方法:第2点)
  4. 若父级设置了定位方式,则不会受子级的margin影响。

4、关于overflow: hidden的用法

参考笔记一,P8.2。

  1. 隐藏多余部分;
  2. 动态height
    当子级个数未知时,无法确定父级的height(注意:此时子级肯定设置了浮动float),设置父级overflow: hidden可实现动态height。当然,实现动态height还有一种方法:position: aboslute/fixed,但若使用此方法,则无法使用margin: 0 auto进行盒子水平居中,而overflow: hidden可以;
  3. 解决外边距塌陷问题。

5、动态 height

参考笔记一,P8.9。、

实现动态height的前两种方法上文已阐述。

方法3:伪选择器。

伪选择器after的作用:创建一个子级,此子级的“逻辑位置”在所有子级的最后。

操作:为父级用:after创建一个盒子,再清除此盒子的相应浮动(clear: xx)。

原理:
由于after是为父级创建盒子,故此盒子的“逻辑位置”在所有子级的最后。因为此盒子清除了浮动,则不再受其他子级影响,故此盒子的“实际位置”在最后一个子级后面。因此,父级只能扩展height来保证能“容纳”此盒子,即动态height。
为什么清除浮动?因为其他子级都设置了浮动,而此盒子未设置浮动,故此盒子会因其他盒子浮动而向上移动。因此,需要清除浮动来消除影响使其停留在原位置。

说明示例:
1、演示。

ul:after {
	content: "6";// 设置文本内容是"6"
	clear: left;// 清除左浮动
	display: block;// 设置为块级元素,即默认占一行
	width: 20px;
	height: 20px;
	background-color: gray;
}

在这里插入图片描述
从演示效果可以看出,前5个子级都设置了左浮动,故此盒子需要清除左浮动。注意:此盒子必须设置为块级元素display: block(缘由我暂未知,需要大家自行查阅和研究了)。

2、实现动态height。

ul:after {
	content: "";
	clear: left;
	display: block;
}

在这里插入图片描述

最后

这些笔记是当年学习前端原生技术时做的,是基于容易忘记、需要注意或新知识点考虑所记录的。做笔记肯定不是原版原抄,而是经个人理解后的精简,故如一些基础知识便不在此列,如:$("#xx").css({}),这是jq设置盒子样式的一个基础函数。

我的发展方向是后端,平日(包括工作)涉及前端都是框架,很少再使用这些前端原生技术。此文章于今年撰写,过去再熟悉平日少接触都会生疏,所以可能有些阐述会略有问题。

知识点所涉及的内容,我会斟酌适当地做一些注释,如果大家不理解,只能请大家另寻高见。

本文持续更新中。。。

标签:知识点,盒子,父级,height,HTML,子级,设置,margin,CSS
From: https://www.cnblogs.com/cnb-yuchen/p/18032061

相关文章

  • 界面组件DevExpress WinForms v23.2 - 进一步增强HTML & CSS支持
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!DevExpressWinForms控件日前正式发布了v23.2,此......
  • 【知识点】Java代理实现方式
    Java代理的几种实现方式静态代理通过创建一个代理类来控制对目标对象的访问(也就是手动编写一个代理类)。静态代理的优点是易于理解和实现,缺点是每个接口都需要定义一个代理类,而且功能较弱。动态代理动态代理分两种,Proxy接口代理和CGLib代理接口代理Proxy代理是JDK内置代理......
  • Java登陆第三十六天——VUE3引入CSS
    在一个.Vue文件中,通常包括以下三部分。<template><style><script>.vue中部分传统部分描述<template>HTML代替传统的.html文件<style>CSS代替传统的.js文件<script>JS代替传统的.css文件声明内部的CSS在.Vue文件中,style标签声明CSS。Hello......
  • 在css3中如何添加圆角边框、盒子阴影以及文字阴影
    注:在css3中如何添加圆角边框、盒子阴影以及文字阴影一、圆角边框在CSS3中,新增了圆角边框样式这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。语法:border-radius:length;参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆,......
  • 初识CSS
    目录前言:    CSS的介绍:    CSS的发展:    1)CSS1.0:    2)CSS2.0:    3)CSS2.1:    4)CSS3:CSS特点:    1)丰富的样式定义:    2)易于设置和修改:    3)可以多页面应用:    4)层叠:5)页面压缩:......
  • 使用Apache POI和Jsoup将Word文档转换为HTML
    简介在现代办公环境中,Word文档和HTML页面都是常见的信息表达方式。有时,我们需要将Word文档转换为HTML格式,以便在网页上展示或进行进一步的处理。本文将介绍如何使用ApachePOI库和Jsoup库来实现Word文档到HTML的转换,并处理文档中的图片资源。环境准备Java开发环境Apac......
  • CSS 定位
    相对定位相对定位相对的是自己原来的位置,开启相对定位的元素并没有脱离文档流,可以超出父容器的大小,与float区分有四个属性值:left、bottom、right、top左和右不能同时用,同时用时左生效;当一个元素右定位属性,这个元素的层级高于普通的元素;当两个元素都开启定位时,采用后来居上......
  • HTML设置定时执行代码 JavaScript 计时事件
    1、https://www.runoob.com/js/js-timing.htmlJavaScript一个设定的时间间隔之后来执行代码我们称之为计时事件JavaScript计时事件通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。在JavaScript......
  • 54.html+css+js网页设计实例/“企业”酒庄主题介绍/web前端期末大作业/
    一、前言  本实例以“企业”酒庄为主题设计,应用html+css+js、图片轮翻效果、留言板、搜索等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交流分享,3Q!二、网页文......
  • 跨境独立站pandabuy cssbuy 跨境Micro微店商品详情
    跨境独立站运用微店详情API接口:实现高效运营与营销新突破在全球化日益加速的今天,跨境独立站成为越来越多商家拓展海外市场、提升品牌影响力的关键平台。为了更好地满足用户需求,提升用户体验,跨境独立站需要不断引入先进的技术手段,其中,微店详情API接口的应用,为商家带来了全新的运营......