html5笔记（不区分大小写，但是建议全部小写）
相对路径与绝对路径
绝对路径: 目录的绝对位置,直接到达目标位置
例如：" https://baidu.com" , "E:\images\bg.gif"
相对路径: 从代码所在文件出发，去寻找目标文件（/ , ./ , ../）
/指根目录, ./ 当前文件夹, ../上一级文件夹
超链接标签 a(四种功能)
根据href的不同，效果也不同
<!-- 跳转到对应链接 -->
<a href="链接地址">跳转到对应链接</a>
<!-- 下载文件 -->
<a href="文件地址">下载文件</a>
<!-- 跳转到对应锚点 -->
<a href="#id">跳转到对应锚点</a>
<!-- 打电话 -->
<a :href="'tel:' + 15826809926">打电话</a>
四种状态
a:link, a:visited, a:hover, a:active
/* :visited 状态的特殊性，容易被忽略，a:visited是与URL有关，而与单个的a标签无关*/
/* :visited 状态的特殊性，以下三个a标签 第一个和第二个访问过其中一个后，两个都会有:visited状态， */
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="https://www.runoob.com" target="_blank">百度</a>
特殊字符
空格 :
大于 : >
小于 : <
文本格式化
加粗强调 : <strong></strong>
倾斜 : <em></em>
删除线 : <del></del>
下划线 : <ins></ins>
块级元素与行内元素
块级元素：div, p, h2等等
独占一行, 默认宽度百分之一百
可以设置宽高, padding, margin
可以包含其他块级元素和行内元素
行内元素 : span, a, i等等
不独占一行, 内容撑开宽度
不能设置宽高，只能这只水平方向padding和margin
元素内不能包含块级元素
行内块元素: img, input, td等等
同时具有行内元素和块级元素的特性, 内容撑开宽度,不独占一行.
但是可以设置宽高,padding,margin
label标签
常与input一起使用
<input type="text" id="test"><label for="test">test</label>
placeholder属性
/* 通过伪元素设置placeholder属性 */
input::placeholder {
color: pink;
}
table标签
不要给table, th, td之外的标签设置样式。单元格内长数字和英文默认内容过长会超出单元格，不会换行
合并单元格：rowspan合并行，colspan合并列
table-layout:auto|fixed|inherit ， 单元格，行，列计算方式
table {
border-collapse: separate; /* 允许单元格之间存在间隙 */
border-spacing: 2px 2px; /* 设置单元格之间的距离 */
}
h5新增标签
IE9+ 以上版本的浏览器才支持
<header>头部</header>
<nav>导航栏</nav>
<article>内容标签</article>
<section>文档区域</section>
<aside>侧边栏</aside>
<footer>底部</footer>
<!-- 多媒体标签 -->
<!-- 音频标签 -->
<audio src="xxx.mp3" controls="controls" width="200" height="35"></audio>
<!-- 视频标签 -->
<video src="xxx.mp4" controls="controls" width="300" height="200"></video>
表单
<!-- 表单外围边框 -->
<fieldset>
<!-- 表单标题 -->
<legend>学生表单</legend>
</fieldset>
表单的change事件和input事件的区别：
change 当表单值改变并且失去焦点时触发
input 只要表单值改变就触发
link与@import的区别
link属于html标签，@import属于css语法 只能加载css
link 是页面载入时同步加载，@import需要页面完全载入后加载
link 支持javascript控制dom改变样式，@import 不支持
link 无兼容性问题，@import 不兼容低版本浏览器
iframe标签
<!-- html框架标签 在页面中画一个区域来展示src里的页面 -->
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
// 获取iframe内的document和window
let iframe = document.querySeletor("iframe")
iframeDoc = iframe.contentWidow.document
iframeWin = iframe.contentWindow
css3笔记
伪类选择器
更多选择器参考：https://www.runoob.com/cssref/css-selectors.html
状态伪类
首先介绍一下<a></a>标签的四种状态
a:link, a:visited, a:hover, a:active
/* :visited 状态的特殊性，容易被忽略，a:visited是与URL有关，而与单个的a标签无关*/
/* :visited 状态的特殊性，以下三个a标签 第一个和第二个访问过其中一个后，两个都会有:visited状态， */
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="https://www.runoob.com" target="_blank">百度</a>
:hover, :active这两种状态除了a标签其他标签也可以用
还有:focus状态只有表单元素才具有
结构伪类
伪元素
div::before: 在div内部的最前面添加一个行内元素
div::after: 在div内部的最后面添加一个行内元素
其他常用选择器
标签(伪元素)选择器：::before，::after
类(伪类)选择器：:first-child, :last-child, :nth-child(n)，:nth-child(even), :nth-child(odd), :nth-last-child(n)，:nth-of-type，:not()
id选择器
并级选择器
后代选择器
样式优先级
!important> 行内样式 > id选择器 > 类(伪类)选择器 > 标签(伪元素)选择器
字体属性
font 可设置的属性顺序:
font-style font-variant font-weight font-size/line-height font-family;
例如: font: normal 400 16px/24px “微软雅黑”; ( 400等同于normal, 700等同于bold )
font-size和font-family是必须的，其它的为可选
文本属性
color: 文本颜色
text-align: 文本对齐方式 ( 并不控制块级元素对齐, 设置元素内文本内容的水平对齐方式 )
text-indent: 文本缩进
text-decoration: 文本修饰 ( none, underline )
line-height: 行高
css全局属性
inherit, initial, unset
<div>
<span>css全局属性</span>
</div>
div { margin-left: 50px; margin-right: 50px; color: red }
span {
margin-left: inherit; /* inherit 继承父级的当前属性，不管该属性是否可继承 */
color: initial; /* initial 初始化当前属性 */
margin-right: unset; /* unset 如果当前属性是可继承的，则等同于inherit；如果当前属性是不可继承的，则等同于initial */
}
object-fit 属性
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。类似于background-size: cover/contain
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
img {
width: 400px;
height: 200px;
object-fit: fill|contain|cover;
}
背景样式
简写: background: 颜色 背景图片 平铺 定位 固定;
background: rgba(0, 0, 0, .8) url(image.jpg) no-repeat top fixed;
background-size: length|percentage|cover|contain;
/* cover会覆盖整个区域,多余的图片被裁减掉,
contain图片会完全展示,覆盖区域可能会覆盖不全 */
css3新增渐变背景色
/* ()中依次为起始方向，依次渐变的颜色 */
background: -webkit-linear-gradient(to left,red,yellow);
/* 图片边框 */
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round; /* repeat平铺，round铺满，stretch默认拉伸*/
/* 复合写法 */
border-image: url("images/border.jpg") 167/20px round;
外边距合并问题
相邻块元素垂直外边距的合并
垂直相邻的元素同时设置了垂直方向上的margin, 会合并后取较大的一个margin
解决方案：inline-block, position:absolute,float
嵌套块元素垂直外边距的塌陷（flex布局不会出现塌陷）
父子元素同时设置垂直方向margin, 会出现margin塌陷，解决办法:
1、给父元素添加overflow: hidden;
2、给父元素添加1px内边距或上边框
3、给子元素设置display: inline-block;
浮动float
浮动元素特性
脱离标准文档流 不能撑开容器 元素之间没有间隙, 具有行内块元素的特性 可直接设置宽高, 但是脱离了文档流
清除浮动
方法一: 在浮动元素后面添加空标签. <div style="clear: both"></div>
方法二: 给父元素添加 overflow: hidden;
方法三: 给父元素添加after伪类
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix { /*兼容低版本浏览器*/
zoom: 1;
}
定位(position)
定位元素特性
和浮动类似，添加了定位的盒子会隐式转换为 行内块元素 可直接设置宽高, 但是脱离了文档流
relative: 相对定位，相对于元素自身位置的定位
absolute: 固定定位，相对于有定位的父级
fixed: 固定定位，相对于视口定位
sticky: 粘性定位，它的行为和position:relative一样，但当页面滚动超出目标位置时，它的表现就和position:fixed一样
加了absolute 和 fixed的盒子设置 margin: auto 居中是无效的
定位元素居中方法:
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: pink;
}
子元素绝对定位导致父元素高度塌陷的问题，解决方法：通过js获取子元素高度赋给父元素
小三角制作方法
利用给border的某一边或多边设置 transparent(透明) 值来实现一些形状的展示
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid pink;
}
堆叠顺序
z-index 调整盒子的层叠顺序, 只适用于定位元素
元素的显示隐藏
display: none; 隐藏后不再占有原来位置
visibility: hidden; 隐藏后继续占有元素原来位置
opacity: 0; 隐藏后占有原来位置
overflow: hidden; 超出隐藏
用户界面样式
更改用户鼠标样式
cursor: pointer|default|move|text|not-allowed
表单轮廓 outline: none;
是否允许元素拖拽 resize: none|both|vertical|horizontal;
vertical-align属性应用
常用于图片, 表单等行内块元素与文本的垂直对齐方式, 去除行内块元素底部间隙
vertical-align: baseline(基线)|top|middle|bottom
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
vertical-align 还可用于去除表单抖动
文本溢出显示省略号
white-space属性值
文本换行
{
word-break: break-all; /*只对英文、数字起作用，以字母作为换行依据*/
word-wrap: break-word; /*只对英文、数字起作用，以单词作为换行依据*/
white-space: nowrap; /* 禁止换行，对所有都有效 */
}
单行文本超出隐藏:
{
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
}
多行文本超出隐藏(有较大的兼容性, 适用于-webkit-浏览器): 需要注意超出文本会在padding中显示
{
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
display: -webkit-box; /* 弹性伸缩盒子模型显示 */
-webkit-line-clamp: 2; /* 限制在一个块元素显示的文本行数 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒子对象的子元素的排列方式 */
}
id和class命名规范
只能以字母, 数字, - 及_ 组成，且只能以字母和 _及 - 开头
box-sizing 盒子模型
box-sizing: content-box;(默认)
盒子宽高不包含padding, border，更改padding, border 会改变盒子的大小
box-sizing: border-box;(怪异盒子)
盒子宽高包含padding，border, 更改padding, border不会改变盒子的大小
css3新增样式
圆角: border-radius
盒子阴影: box-shadow
/* box-shadow: 水平距离 垂直距离 模糊距离 阴影颜色; */
box-shadow: 3px 3px 3px pink;
文本阴影:
text-shadow: 水平距离 垂直距离 模糊距离 阴影颜色;
/* 此效果需要将文字和背景颜色保持一致才能看出效果 */
/* 凸起文字: */
text-shadow: 1px 1px #000, -1px -1px #fff;
/* 凹下文字: */
text-shadow: 1px 1px #fff, -1px -1px #000;
css3滤镜filter
https://www.runoob.com/cssref/css3-pr-filter.html
img {
filter: blur(5px); /* blur()模糊处理 数值越大越模糊 */
}
/* 全站变灰 */
html{
filter: grayscale(100%);
}
css3过渡
/* transition: 要过渡的属性 花费时间 运动曲线 延迟开始时间(默认为0); */
transition: all .6s linear;
css3转换
transform: translate(50px,100px); /* 移动 */
transform: scale(2); /* 2D缩放 */
transform: rotate(60deg); /* 2D旋转 */
transform: skew(60deg); /* 2D倾斜 */
transform-origin /* 转换原点 */
/* 如果有多组效果可以写到一行 用空格隔开，先写位移 */
/* 3D转换需要给父元素添加透视 对所有后代生效 */
perspective: 300px;
/* 保持3D工作空间 只对亲儿子生效 */
transform-style: preserve-3d;
css3动画
/* 创建动画 */
@keyframes myfirst {
from {transform: translate(0);}
to {transform: translate(-500px);}
}
/* 调用动画 */
animation: myfirst 5s linear infinite;
动画名称 动画时长 动画类型(默认ease) 循环次数(默认1次)
animation-play-state: paused; /* 暂停动画 */
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
/* 帧动画 */
steps();
用户界面
resize: 指定一个元素允许由用户调整大小
div {
resize: both;
overflow: auto;
}
透明度
// rgba（）和opacity的透明效果有什么不同
// 都可以实现透明效果
opacity 可以作用于元素 以及元素内部的所有内容
rgba() 只可作用于元素的颜色或者背景色
兼容写法
浏览器引擎所采用的浏览器私有前缀，用于支持实验性或未被标准化的 CSS 属性和特性。
-moz代表firefox浏览器私有属性；
-ms代表IE浏览器私有属性；
-webkit代表chrome、safari私有属性；
-o代表Opera私有属性。
移动端布局
视口
布局视口( layout viewport )：移动设备默认设置了一个视口宽度
视觉视口( visual viewport ): 屏幕宽度
理想视口( ideal viewport )：设置布局视口的宽度等于设备的宽度（width=device-width）
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
normalize
normalize.css的作用：
保护有用的浏览器默认样式而不去完全去除它们
修复浏览器的bug
flex布局
/* gap、row-gap、column-gap */
/* gap属性精确地控制了弹性元素之间地空间 */
/* 老的安卓机有兼容问题 */
gap: 16px
/* flex: 1; 是 flex: 1 1 0的缩写 */
flex:flex-grow flex-shrink flex-basis;
/* flex-grow; item是否可拉伸，默认为0，不可拉伸*/
/* flex-shrink; item是否可压缩,默认为1，可压缩 */
/* flex-basis; item的默认宽度，默认为0，没有宽度 */
/* 设置主轴方向，默认X轴方向 */
flex-direction: row|column
/* 子元素在主轴上的排列方式，从头开始|从尾开始|居中|平分剩余空间|先两边贴边再平分剩余空间 */
justify-content: flex-start|flex-end | center | space-around | space-between
/* 设置子元素是否换行，默认不换行 */
flex-wrap: nowrap|wrap
/* 单行子元素在侧轴的对齐方式。默认为stretch */
align-items: flex-start | flex-end | center | baseline | stretch
/* 多行子元素在侧轴的对齐方式,对单行无效 */
align-content:flex-start | flex-end | center | space-between | space-around | stretch
/* flex-flow 是flex-direction和flex-wrap的复合属性 */
flex-flow: row wrap;
/* 子项在侧轴上的对齐方式,默认值为auto 继承父元素的align-items属性 */
align-self: flex-start | flex-end | center | baseline | stretch
rem布局
单位
px: 相对长度单位,像素px是相对于显示器屏幕分辨率而言的。
em: 相对长度单位，继承父级元素的字体大小，若未设置则相对于浏览器默认字体大小
rem: 相对长度单位,只相对html根元素
物理像素：设计分辨率
逻辑像素：设备宽度
dpr: 设备像素比，物理像素/逻辑像素，描述在移动开发中1个css像素占用多少物理像素，若dpr为2，1px表示2*2个物理像素组成
媒体查询
/* 当屏幕尺寸大于等于375px时应用以下样式 */
@media screen and (min-width:375px) {
CSS 代码...;
}
/* 当屏幕尺寸大于等于750px时应用以下样式 */
@media screen and (min-width:750px) {
CSS 代码...;
}
/* 当屏幕尺寸小于等于750px时应用以下样式 */
@media screen and (max-width:750px) {
CSS 代码...;
}
/* 当屏幕尺寸小于等于375px时应用以下样式 */
@media screen and (max-width:375px) {
CSS 代码...;
}
/* 引入媒体查询 */
<link href="style320.css" media="srceen and (min-width: 320px)"
flexible.js 插件 在vs中配合cssrem插件
响应式布局
bootstrap栅格系统
less的使用（css预处理器）
命名
必须以@为前缀，不能以数字开头，不能包含特殊字符，区分大小写, 变量是有作用域的（类似于let,块级作用域）
特性：有计算能力，有嵌套写法
/deep/ 用来穿透
/* less的混入，定义一个类 直接使用，可传参数 */
.color(@color) {
color: @color;
}
.font {
font-size: 14px;
line-height: 20px;
}
.div {
.color(red);
.font
}
sass的使用（css预处理器）
命名
必须以$为前缀，不能以数字开头，不能包含特殊字符，区分大小写, 变量是有作用域的（类似于let,块级作用域）
::v-deep 用来穿透
/* sass的混入，定义处使用@mixin, 调用处用@include */
@mixin font($color) {
color: $color;
font: normal 400 14px/24px '微软雅黑'
}
div {
@include font(pink);
}
盒子水平垂直居中的方法
/* 方法一 定位加位移 */
div {
position: absolute;
top: 50%;
left: 50%;
transfrom: translate(-50%,-50%);
}
/* 方法二 父元素flex布局 */
div {
display: flex;
/* 主轴方向居中 */
justify-content: center;
/* 侧轴方向居中 */
align-items: center;
}
圣杯布局
/* 方法一 flex布局 中间独占flex:1 */
<header class="search2">
<div class="search_left"></div>
<div class="search_input">圣杯布局 方法二</div>
<div class="search_right"></div>
</header>
/* 方法二 定位布局 左右定位 中间标准流 */
常见问题
浏览器滚动条问题
参考文献：https://blog.csdn.net/weixin_45758221/article/details/131417123
/* 重置滚动条样式 */
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
height: 6px;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
background: #d7d7d7;
&:hover {
background-color: #a8a8a8;
}
&:active {
background-color: #787878;
}
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
border-radius: 10px;
background: #f2f2f2;
}
/* 在火狐中滚动条的样式 */
* {
scrollbar-width: thin;
scrollbar-color: #d7d7d7 #f2f2f2;
}
html中给table设置boder的方法
1、将table的属性设置为：border="0"
2、设置table的背景色为即你要设置的table的边框颜色；
3、设置所有td背景色为#ffffff白色；
<table border="0">
<tr>
<td>column1</td>
<td>column2</td>
</tr>
</table>
<style>
table {
width: 100%;
// table边框的颜色
background: #4E5969;
// 允许设置单元格之间的间隔
border-collapse: separate;
// // 将单元格之间的间隔设置为所需要的边框宽度
border-spacing: 1px;
td {
// 将单元格背景颜色设置为白色
background: #fff;
padding: 0.12rem;
}
}
</style>
移动端兼容问题
ios与安卓兼容问题
1、ios系统video标签不会默认加载视频，导致视频位置出现白屏
解决办法：使用poster属性配置默认图片
2、ios系统与安卓系统有较多字体互不通用
解决办法：统一引入字体包
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
