HTML&CSS&DOM

HTML

页面制作

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

概述

布局标签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:视频封面;视频封面未设置,自动截取第一帧

视频加载播放过程

  1. 加载视频的总时长,视频封面
  2. 加载视频流,同时播放视频

增强&&语义化标签

作用

  • 除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

7f7c61179ef48f587030bae995d26b10.png

  • 元素.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%

rem1rem == 根元素的font-size
em1em == 当前元素的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

e3f2f4256242a82b65eeee513696c62a.png

  • 添加::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%)

背景图片铺满所属元素

  1. background: url("") no-repeat;
  2. 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类名+全局样式

触底加载

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

动画-过渡

概述

  1. BOX盒子的样式,由A改成B时
  2. 不做处理,直接展示样式B
  3. 过渡处理,样式由A渐变成B
  4. 动画处理,运行样式B的动画,最终展示样式B
动画过渡
运行时间B的animation-durationA的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;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

stealPigs-youth

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值