HTML&CSS&DOM

stealPigs-youth

已于 2024-08-28 16:29:40 修改

阅读量171

点赞数

文章标签： html 前端 css

于 2023-10-03 18:42:46 首次发布

本文链接：https://blog.csdn.net/m0_73090085/article/details/133525280

版权

HTML

页面制作

鼠标拖动+input配置
JSON配置
XML+CSS配置
代码创建页面元素、构建页面布局

概述

布局标签	div、span(CSS可实现完全控制)
表单标签	form、input
资源标签	img、audio
表格标签	table(表格) caption(标题)-thead(表头)-tbody(表体)-tfoot(表脚) tr(行)-td(单元格)-th(标题单元格)
语义化&&增强标签	a、button、h1~h6、br、hr

表单标签

文本框	input-text
多选框	input-checkbox
单选框	input-radio
选择器	input-date(日期选择器) input-color(颜色选择器) input-file(文件选择器) input-range(滑块选择器) 开关选择器
自定义选择器	select+option(如地域选择器)
按钮	input-button

input-password：密文情况下，内容无法复制

元素属性

文本框	value：input输入框的值默认check：false
多选框	默认value：‘on' check：选中输入框?true:false
单选框	默认value：‘on' check：选中输入框?true:false name：相同的name分入一组
自定义选择框	select-value：选中option的value属性值 select-selectedIndex：选择了第几个option元素(从0开始) option-value：设置的value值

img标签

src：图片资源；支持格式有DataURL、本地URL、网络URL
DataURL的格式：data:[MIME];base64,[base64字符串]
alt：alternative text；src不加载，显示alt内容
title：鼠标悬浮显示；src不加载，alt内容没写，显示title

video标签

属性

src：video资源
controls：video标签具有控制按钮
poster：视频封面；视频封面未设置，自动截取第一帧

视频加载播放过程

加载视频的总时长，视频封面
加载视频流，同时播放视频

增强&&语义化标签

作用

除div、span增强之外的所有布局标签
作用1：样式和功能的增强
作用2：提高代码可读性
作用3：利于搜索引擎爬取关键信息，利于SEO优化

hr默认样式

height、padding默认值：0
width默认值：100%
border默认值：1px、solid、灰色

br默认样式

margin、padding、border、width默认值：0
height默认值：由浏览器决定

其余举例

h1~h6：标题表示，字体加粗、加大
i：图标表示
aside：侧边栏表示
footer：底部内容表示
header：头部内容表示
main：主题区域表示
nav：导航菜单表示

DOM

document属性

document.fullscreenElement：判断是否全屏
document.exitFullscreen()：取消全屏
document.documentElement.requestFullscreen()：开启全屏
document.cookie：域名下的cookie

操作元素样式

元素.style="属性名1:属性值1;属性名2:属性值2;"
元素.style.propertyName=样式值
元素.style["property-value"]=样式值
元素.style.getPropertyValue("property-name")
元素.style.removeProperty("property-name")
元素.style.setProperty("property-name", "property-value")
元素.className="类名1 类名2 类名3"
元素.classList.add("newClass")
元素.classList.remove("oldClass")
元素.classList.replace("old-class", "new-class");

获取DOM元素

getElementById：id选择器
getElementsByTagName：标签名选择器
getElementsByClassName：类名选择器
getElementsByName：name属性选择器
querySelector：css选择器
querySeletorAll：css选择器
document.documentElement：html标签元素

操作DOM元素

document.createElement(标签名)
insertBefore、appendChild
removeChild
replaceChild
document.write()：追加式添加body元素内容

元素属性

tagName：元素的标签名
id：元素的id属性值
innerHTML：元素的内容
textContent：元素的文本内容
src：元素的资源名
setAttribute(属性名,属性值)：设置元素的指定属性值
getAttribute()：获取元素的指定属性值
style：元素样式
title：hover鼠标悬浮时，展示的标题说明
contentEditable：支持编辑元素内容
draggable：支持拖动元素

输入事件

blur，foucs：输入框焦点得失，触发输入框事件
change，input：输入框内容改变，触发输入框事件

鼠标事件

mousedown、mouseup
mouseenter、mousemove、mouseleave
mouseover、mouseout
mousewheel
click，contextmenu

指针事件

鼠标、触屏版都能控制指针
pointdown、pointup
pointenter、pointmove、pointleave
pointover、pointout

键盘事件

keydown，keyup、keypress

拖动事件

dragstart、drag、dragend：拖动元素A，触发元素A的事件
dragenter、dragover、dragleave：拖动元素A进入、悬浮、离开元素B，触发元素B的事件
drop：拖动元素A放入元素B，触发元素B的事件

注册DOM事件

myDom.onxxx=()=>{}：只能为一个事件绑定一个函数
myDom.addEventListener('事件名',()=>{})：可以为一个事件绑定多个函数

事件event属性

target：触发事件的元素
currentTarget：绑定事件的元素
由于currentTarget.onxxx=事件函数，因此事件函数中的this指向currentTarget
元素发生重叠时，最上层元素才会触发点击事件，并向上父级元素依次传递
单位采用px
screenX、screenY：相对电脑窗口左上角
clientX、clientY、x、y：相对 HTML区域左上角
pageX、pageY、layerX、layerY：相对 HTML文档流左上角
offsetX、offsetY：相对当前DOM元素内边框左上角

盒子模型

浮动和定位的意义

块元素：独占一行；能设置宽高
行内元素：不会独占一行；不能设置宽高，但能设置padding、border、margin
行内块元素：不会独占一行；能设置宽高
浮动的核心是让元素变成行内块元素，实现横向布局

概述

默认排列方式：元素从上向下、从左向右
组成：内容宽度+padding+滚动栏+border+margin

元素.offsetHeight：可见内容高度+padding+滚动条+border
元素.clientHeight：可见内容宽度+padding
元素.scrollHeight：实际内容宽度+padding
元素.offsetTop：元素border顶部坐标 - 最近定位父元素的内容区顶部
元素.clientTop：左边框宽度
元素.scrollTop：内容区向下滚动的距离

差别

content：支持background-color着色、支持点击事件
padding：支持background-color着色、支持点击事件
border：不支持background-color着色、支持点击事件
margin：不支持background-color着色、不支持点击事件

三层结构

标准流层(底层)

子元素左右外边距+左右边框+左右内边距+内容区宽度==父元素内容区宽度
子元素上下外边距+上下边框+上下内边距+内容区高度==父元素内容区高度

子元素不设置内容区宽度	子元素内容区宽度是变量
子元素设置内容区宽度	子元素右外边距是变量
父元素设置内容区高度	父元素内容区高度固定
父元素不设置内容区高度	父元素内容区高度由子元素高度撑开

浮动层(中层)

元素设置float，可以在父元素的空间内浮动起来

定位层(顶层)

元素的上下位置由top或bottom决定
元素左右位置由left或right决定
定位层元素之间发生位置的重叠：z-index权重大的元素在上；z-index权重相同，则后写的元素在上

权重关系

父元素权重相同时，子元素间的权重：定位层>浮动层>标准流层
父元素权重不同时，权重大的父元素及其所有子元素，在权重小的父元素及其所有子元素之上
子元素始终在父元素之上

父子元素宽高的关系

父元素的宽高大于等于子元素：父元素包裹子元素
父元素的宽高小于子元素：子元素会溢出，但是不会挤压父元素的兄弟
子元素溢出的方向：向下或向右

overflow

scroll：父组件一直显示滚动条
none(默认)：父组件从不显示滚动条；子元素宽高大于父元素，子元素会溢出
auto：子组件未溢出，不显示滚动条；子组件溢出，显示滚动条

定位层

绝对定位	开启方式：positon的属性值设置为absolute 参照物：将参照血缘最近，并且开启定位的祖先元素占据标准流空间：否
相对定位	开启方式1：positon的属性值设置为relative 开启方式2：设置transform属性(block元素、inline-block元素才有transform属性) 参照物：自身标准流空间占据标准流空间：是 transform与position的效果可以叠加 transform属性有translation(位移)、scale(缩放)、rotate(旋转)、skew(倾斜)
固定定位	参照物：浏览器窗口占据标准流空间：否
粘性定位	占据标准流空间：是元素距离浏览器窗口上方的最近距离：top 元素距离浏览器窗口右方的最近距离：right 元素距离浏览器窗口下方的最近距离：bottom 元素距离浏览器窗口左方的最近距离：left

浮动层

浮动的元素不会超过，父元素的顶部
浮动的元素不会超过，书写在自己前面的标准流兄弟的底部
浮动的元素不会盖住图片或文字

BFC

float:left/right =>	display:inline-block =>	开启BFC
position:absolute =>	display:inline-block =>
display:flex \|\| inline-flex \|\| grid \|\| inline-grid \|\| table \|\| table-ceil \|\| table-row \|\| table-caption=>
overflow:auto/hidden/scroll =>

BFC盒子的margin不会与其他盒子的margin发生重叠
浮动层子元素能撑开BFC盒子的高度

edge浏览器下

	是否开启定位	是否开启BFC	元素类型
html标签	开启	开启	块元素
body标签	未开启	未开启(body元素无法通过设置overflow属性开启BFC)	块元素
div标签	未开启	未开启	块元素

Flex布局

开启flex

父元素属性display:flex：父元素设置成块元素，并开启flex布局
父元素属性display:inline-flex：父元素设置成行内块元素，并开启flex布局
父级元素开启BFC
子元素全部变为inline-block行内块元素
子元素将无法设置float浮动

父元素属性

下面将采用flex-direction:row

flex-wrap：nowrap(默认)，水平宽度溢出，不换行；wrap，水平宽度溢出，换行；
justify-items：子元素相对分配空间的水平布局
justify-content：：每一列的水平布局
align-items：子元素相对分配空间的垂直布局
align-content：每一行的垂直布局

子元素属性

flex：1flex=(父元素宽度-(子元素margin+子元素border+子元素padding))/所有flex

下面将采用flex-direction:row

justify-self：子元素相对分配空间的水平布局
align-self：子元素相对分配空间的垂直布局

布局模式

flex-direction:row：子元素优先正向水平填充(默认)
flex-direction:row-reverse：在row的基础上，把每行子元素反向排列
flex-direction:column：子元素优先正向垂直填充，子元素默认宽度100%
flex-direction:column-reverse：在column的基础上，把每列子元素反向排列

grid布局

开启grid

父元素属性display: grid：父元素设置成块元素，并开启grid布局
父元素属性display: inline-grid：父元素设置成行内块元素，并开启grid布局
父级元素开启BFC
子元素全部变为inline-block行内块元素
子元素将无法设置float浮动

父元素属性

grid-template-columns:repeat(3,1fr)：设置列宽和列数
gird-template-rows: 150px 150px：设置行高和行数
grid-gap: 行间距列间距：设置间距
justify-items：子元素相对分配空间的水平布局
justify-content：：每一列的水平布局
align-items：子元素相对分配空间的垂直布局
align-content：每一行的垂直布局

子元素属性

justify-self：子元素相对分配空间的水平布局
align-self：子元素相对分配空间的垂直布局

布局模式1

父元素划分区域

grid-template-areas：

"area1 area2 area2"

"area1 area3 area3";：

子元素选择区域

grid-area: [areaName]

布局模式2

父元素设置填充方向

grid-auto-flow: row：子元素优先水平填充
grid-auto-flow: column：子元素优先垂直填充
grid-auto-flow: row dense：子元素优先水平填充，会尽可能填充空白单元格
grid-auto-flow: column dense：子元素优先垂直填充，会尽可能填充空白单元格

子元素选择出场顺序和空间占比

grid-column-start：列起始位置
grid-column-end：列结束位置
grid-row-start：行起始位置
grid-row-end：行结束位置
grid-column：列起始位置 / 列结束位置
grid-row：行起始位置 / 行结束位置
grid-area：行起始位置 / 列起始位置 / 行结束位置 / 列结束位置
order：数值越小，出场越靠前

默认布局

CSS知识点

单位介绍

px	10cm距离中有10个像素点 => 1px == 1cm 10cm纵向的像素点数不一定等于 10cm横向的像素点数 win10采用100%屏幕显示比例时，浏览器px==电脑屏幕px
vh、vw	1vh == HTML区域高度的1% 1vw == HTML区域宽度的1%
%	宽度1% == 父元素宽度的1% 高度1% == 父元素高度的1% 字体1% == 父元素字体的1%
rem	1rem == 根元素的font-size
em	1em == 当前元素的font-size

核心组件优先：px
组件间距、布局优先：vh、%、flex

盒模型box-size

content-box：默认设置，width=内容区宽度
border-box：width=内容区宽度+左右内边距+左右边框

继承属性

字体：font-xxx、color
文本：text-xxx、line-height、white-space
背景：background-color
可见性：opacity、visibility
鼠标样式：cursor

@media

写法：@media media_type and (feature_key:feature_value) {...}
media_type：all(默认)、screen、print、speech
feature_key：max-width、max-height、min-width、min-heigth

CSS选择器

交集选择器：.a.b {选择同时具有 .a 类和 .b 类的元素}
并集选择器：h1, h2 { 选择 <h1> 和 <h2> 元素 }
后代选择器：div span { 选择 <div> 下的所有 <span> 元素 }
子代选择器：ul > li { 选择 <ul> 下的直接子元素 <li> 元素 }
相邻兄弟选择器：h1 + p { 选择紧接在 <h1> 元素后的兄弟 <p> 元素 }
通用兄弟选择器：h2 ~ p { 选择在 <h2> 元素后出现的所有兄弟 <p> 元素 }
:nth-child() 伪类选择器：ul li:nth-child(even) { 选择作为 <ul> 的偶数位置子元素的 <li> 元素 }
:nth-of-type() 伪类选择器：ul li:nth-of-type(3) { 选择作为 <ul> 中的第三个 <li> 元素 }
权重：!important>行内样式>ID选择器 >属性选择器> 元素选择器
nth-child(n)：n是从1开始的，不是0

CSS变量

定义：--xxx-yyy: zzz;
使用：样式属性: var(--xxx-yyy);
作用域：CSS变量作用于自身和子元素
变量名冲突造成的优先级问题，和CSS优先级相同

:root {
  --main-color: #4CAF50;
}

.element {
  color: var(--main-color);
}

CSS嵌套

<head>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: red;

      .child1 {
        width: 200px;
        height: 200px;
        background-color: black;
      }
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1"></div>
  </div>
</body>

calc()

写法：calc(xxx 符号 yyy)
xxx、符号、yyy之间一定要有空格

元素隐藏

	渲染	移除	子元素	占据空间	能触发点击事件
display:none	×	×	不渲染	×	×
visibility:hidden	√	×	继承	√	√
opacity:0	√	×	继承	√	√

样式引入

<link rel="stylesheet" href="./index.css">
<style> @import url(./index.css); </style>
xxx.css文件中：@import url(./index.css);

CSS少见属性

outline：边框之外的一层边框，不占盒子空间

滚动条样式

webkit-scrollbar

添加::webkit-scrollbar样式，::webkit-scrollbar-xxx样式才能生效
::webkit-scrollbar的：height控制纵向滚动条的长度，width控制横向滚动条的长度

边框、边距、宽高的最小值

边框最小值为0.5px、低于这个值会取0.5px
宽高、边距最小值能无限小，但是会出现精度问题

CSS技巧

省略超出文本

文本不换号：white-space:nowrap;
超出部分隐藏：overflow:hidden;
省略号代替隐藏的文本：text-overflow:ellipsis;

水平居中

文字、行内元素水平居中：text-align:center
块级元素水平居中：margin:auto
flex布局实现：justify-content:center
定位实现：position:absolute&&left:50%&&transform:translateX(-50%)

垂直居中

inline-height==height：在一行时，文字、行内元素垂直居中
vertical-align：作用于行内元素、行内块元素，用于垂直对齐
块级元素居中：设置margin值(px,%)
flex布局实现：align-items:center
定位实现：position: absolute&&top: 50%&&transform: translateY(-50%)

背景图片铺满所属元素

background: url("") no-repeat;
background-size: 100% 100%;

样式书写顺序

position
margin、border、padding、width
display
...

初始化样式

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video{
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   font-weight: normal;
   vertical-align: baseline;
   box-sizing: border-box;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section{
   display: block;
 }
 ol, ul, li{
   list-style: none;
 }
 blockquote, q{
   quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after{
   content: '';
   content: none;
 }
 table{
   border-collapse: collapse;
   border-spacing: 0;
 }
  
 /* custom */
 a{
   color: #7e8c8d;
   text-decoration: none;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
 html, body{
   width: 100vw;
   height: 100vh;
   font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
 }

修改第三方组件的样式

第三方组件class类名+自定义的父元素class类名+全局样式

触底加载

首次加载的数据足够产生滚动条
滚动条滚动时，判断距离底部不足20px：
div.scrollTop+div.clientHeight+20>=div.scrollHeight

动画-过渡

概述

BOX盒子的样式，由A改成B时
不做处理，直接展示样式B
过渡处理，样式由A渐变成B
动画处理，运行样式B的动画，最终展示样式B

动画

过渡

运行时间

B的animation-duration

A的transtion-duration

关键帧

能自定义0%帧~100%帧，每一帧的样式

如果动画时间是10s

2s的样式对应20%帧的样式

3s的样式对应20%帧的样式

只有帧0%和帧100%

帧0%的样式对应样式A

帧100%的样式对应样式B

动画示例

@keyframes BAnimation{
    0%{}
    1%{}
    ...
    100%{}
}

.B{
    animation-name:BAnimation;
    animation-duration:10s;
}

过渡示例

.A{
    height:100px;
    width:100px;
    background-color:blue;
    transition-duration:10s;
}
.B{
    height:200px;
    width:200px;
    background-color:purple;
}