冷冷的火花HTML&CSS 学习笔记
字符超出部分显示连字符hyphens：auto;
强制换行word-break: break-all;
强制不换行 white-space:nowrap;
css点击穿透：pointer-events: none;
控制数字等宽：font-variant-numeric: tabular-nums;
outline: none; /*苹果678表单输入框兼容*/
-webkit-appearance: none;/*去除系统默认的样式*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);/* 点击高亮的颜色*/
*{margin: 0;padding: 0;box-sizing: border-box;}
h1,h2,h3,h4,h5,h6,strong{font-weight: normal;}
hr{border: none;}
i,em{font-style: normal;}
ul,ol{list-style: none;}
a{text-decoration: none;-webkit-tap-highlight-color: transparent;color: black;}
.button{border:0;background-color:none;outline:none;-webkit-appearance: none;}
input,textarea {outline: none;border: none;}
textarea {resize: none;overflow: auto;}
table{border-collapse:collapse;border-spacing:0;}
.show{display: block;}
.hide{display: none;}
.fl{float: left;}
.fr{float: right;}
.mat{margin: 0 auto;}
.ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/* 文本多余强制不换行显示3个点，元素必须有宽 */
.clearfix:before,.clearfix:after{display: table;content: "";}/* 双伪元素清除浮动 1.清除浮动 2.解决高度塌陷（给父盒子添加类名clearfix） */
.clearfix:after{clear: both;}
.clearfix{*zoom: 1;}
@charset "UTF-8";
/*css reset*/
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre {
padding: 0;
margin: 0;
}
/*重置默认样式*/
body, button, input, select, textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}
a {
text-decoration: none;
color:#4d555d;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
/*# sourceMappingURL=base.css.map */
@charset "utf-8";
body,ul,ol,h1,h2,h3,h4,h5,h6,p{margin: 0;padding: 0;}
ul,ol{list-style: none;}
img{vertical-align: middle;}
a{text-decoration: none;}
.clearfix:after,.clearfix:before{content: "";display: table;}
.clearfix{clear: both;}
.clearfix{*zoom:1;}
.gWidth{
width: 1200px;
margin-left: auto;
margin-right: auto;
}
body{
font-family: "微软雅黑";
}
隐藏滚动条但是可以滚动
body::-webkit-scrollbar {
display: none;
}
lang="en"英文网站lang="zh"中文网站
<link rel="shortcut icon" href="favicon.ico">icon图标
导航栏居中
display: flex;
justify-content: center;
flex-flow: row wrap;/*子元素溢出父容器时换行*/
图片在网页里居中
/*banner*/
.bann{
width: 100%;
height: 354px;
position: relative;
}
.bann img{
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
复合样式：background font margin padding border
锚点
在同一页面中
<a name="add"></a><!-- 定义锚点 -->
<a href="#add">跳转到add</a>
在不同页面中，锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点
<a href="a.html#add">跳转到a.add</a>
iframe框架显示网页
visibility:hidden;盒子站位隐藏
a:hover鼠标移入
a:active/.active当前项
.show显示.hide隐藏
javascript:void(0);空链接不返回顶部
vertical-align: top/middle/bottom(默认基线对齐，文字图片两个都设置)
hover和透明：
opacity:取值0-1，透明度（所有元素）/rgba
box:hover p{opacity:1;}鼠标移入box显示p;
z-index:数字越大越靠上
border-color:transparent;透明色
强制不换行
white-space:nowrap;
字间距
letter-spacing: -0.054106rem;
英文单词换行 word-wrap:break-word;
文本多余强制不换行显示3个点：
必须有宽
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
在未知宽高的容器里如何让元素水平垂直居中：
position: absolute;
left: 50%;top: 50%;
margin-left: 宽度/2;
margin-top: 高度/2;
在未知宽高的容器里如何让图片水平垂直居中：
text-align:center
加一个span，高度100%
vertical-align: top/middle/bottom
浮动:
display,浮动，绝对定位都能让元素支持宽高
清除浮动：
1:设置高度;
2:overflow:hidden;（超出的隐藏，可以用来清浮动）
3:大盒子里边的最后/下边加一个空盒子，设置clear:both;
4:.clearfix:after,.clearfix:before{content: "";display: block;clear: both;}后边或者前边都行
.clearfix{*zoom:1;}适用于ie67要加 clearfix约定俗成
html5标签:
<header>头部</header>
<nav>导航</nav>
<main><!-- 主体 -->
<article><!-- 定义独立的一块内容 -->
<section>
标签某一小块or文档中的某个区域
</section>
</article>
<figure>
<img src="" alt="">
<figcaption>带标题的图像</figcaption>
</figure>
<aside>文章的侧栏</aside>
</main>
<footer>底部</footer>
表单：
表单输入框禁用自动完成功能
autocomplete="off"
placeholder="默认提示"
spellcheck 属性规定是否对元素内容进行拼写检查
spellcheck =“false”
必填项
required
label表单标签，点击文字也会选中或者出现光标 for="",id=""
checked默认选中
placeholder默认文本，点击就没了
resize:none;多行文本框小尾巴
outline:none;点击表单元素不会出现黑边框
<input autofocus="autofocus">自动获得焦点
新的表单类型：
email该类型会自动要求输入的地址格式正确，否则浏览器不允许提交，并且有一个错误的信息提示，email类型的文本框具有一个multiple属性，该属性允许在文本框中输入使用逗号分隔有效的E-mail地址的一个列表
url是用来专门输入url地址的输入框，例如百度地址和谷歌地址
number是用来专门输入数字的文本框，在提交时会检测其中内容是否为数字
range只允许输入一段范围内数值的文本框。以滑动条的形式展示数字，通过拖动滑块实现数字的改变
tel用来输入电话号码的专用文本框。tel类型的文本框通常用来验证固定的电话和手机号码。如果只将input元素的类型设置为tel,并不会达到验证电话的效果，它必须和pattern属性一起使用
color用来选取颜色的，它提供一个颜色选取器用来选取
search类型是一种专门用来输入搜索关键词的文本框，不同于普通类型的文本框在于，当用户开始输入时，输入框的右边会出现一个用于清除内容的图标，单机可以快速清除
date以日历的形式方便用户输入
time是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查
datetime是一种专门用来输入UTC日期和时间的文本框，它不仅可以显示年月日，还可以显示具体时间。设置datetime类型完成后，在提交时会对用户输入或选择的日期和时间进行有效性检测
datetime-local类型：是用来专门输入本地日期和时间的文本框，并且在提交时会进行检测
month专门用来输入月份的文本框，提交时会进行检查
week是一种专门用来输入周的文本框，并且在提交会进行检查
h5拓展:
<input type="text" list="aaa">
<datalist id="aaa">
<option value="110">警察</option>
<option value="120">急救</option>
</datalist>
<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>
<!--maxlength="最长字符";autofocus自动获得焦点;autocomplete自动完成；-->
<input type="date"><!--日期-->
<input type="number" max="最大值" min="最小值" step="每次走的值" value="默认值"><!--数字-->
<input type="range" max="最大值" min="最小值" step="每次走的值"><!--滑块-->
<input type="search" ><!--搜索框-->
<input type="url"><!--网址-->
<input type="color"><!--颜色-->
<input type="tel" pattern="[0-9]{11}" name="tel"><!--电话-->
css:
计算属性calc：
width: calc(100% - 50px);
-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法
css hack:使用方法：.clearfix{*zoom:1;}
_ ie6
* ie6/7
\0 ie8+
\9 所有ie
!important优先级最高
选择器：
属性选择器
div[]
可自创属性
<!-- div[abc]
匹配 所有div 并且 有 abc 这个属性的元素
.box[title="aaa"]
匹配 某个选择器 并且 有 title 这个属性的元素且值为aaa
.box[id^="a"]
匹配 某个选择器 并且 有 id 这个属性的元素且值 以 什么开头
.box[id$="f"]
匹配 某个选择器 并且 有 id 这个属性的元素且值 以 什么结尾
.box[id*=“s4”]
匹配 某个选择器 并且 有 id 这个属性的元素且值 且 包含某个字符的
.box[id*="s4"][title="aaa"][class="box b1"]
多条件
-->
^以什么开头
*所有带什么的
$以什么结尾
伪类选择器
nth-child不分类型进行选择
nth-of-type分类型
first-child
last-child
nth-last-child倒数
odd奇数
even偶数
?n倍数
?n-1
div:not（p）div里除p以外的所有标签
p::first-letter首字母
p::first-line第一行
p::selection前景色
线性渐变background-image: linear-gradient(to top,#e66465, #9198e5);
径向渐变background-image: radial-gradient(red, yellow, green);
外阴影box-shadow:x y 阴影大小 (增强) 阴影颜色
内阴影box-shadow: inset x y 阴影大小 (增强) 阴影颜色
文字阴影text-shadow: inset x y 阴影大小 (增强) 阴影颜色
圆角border-radius
:alter在后边加东西
:before在前边加东西
box-sizing: border-box;不去计算border和padding
默认： content-box
背景图片绘制区域 background-origin:
背景颜色绘制区域 background-clip:
padding-box content-box border-box;
padding区域 内容区域 边框区域
background-size: cover;缩小
background-size: contain;放大
弹性布局
1.display:-webkir-box 旧版（兼容性好一些）
水平对齐方式 -webkit-box-pack:center;
start | center | end | justify
垂直对齐方式： -webkit-box-align
start | end | center | baseline | stretch(默认值)
2.display:flex; 新版
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。（口号 为复杂布局而生）
排列方式：父级：-webkit-flex-direction: row-reverse;}
row(默认值) 从左到右 左对齐 row-reverse 与row是相反的
column 从上往下排列 column-reverse 与column相反的
display: flex;/* 父元素设置，开启弹性盒子 */
flex:1; /* 子元素设置，均分的份数 */
flex布局设置的高度或者宽度丢失
当元素的高度和(宽度和)大于容器的高度(宽度)时,元素的高度(宽度)会被压缩,如果不想被压缩,元素添加属性 flex-shrink: 0;
user-select:none;//用户选择
auto | none | text
用户可选内容 | 不可选 | 可选文本文字
user-modify:;可编辑元素内容
read-only | read-write | read-write-plaintext-only
逐帧动画
transition:steps(数字) 1.5s;
steps步骤
设置步骤的时候要比图片少一步 以为从0开始
filter(滤镜)属性
filter:blur(1px); 模糊 一般0~10
filter:brightness(.1);亮度 0~1 / 百分比
filter:contrast(1); 对比度 1+
filter:grayscale(0); 灰度 0/1
filter:hue-rotate(0deg); 色相旋转
filter:invert(1); 反转
filter:opacity(1); 0~1 发白
filter:saturate(1); 饱和度
filter:sepia(0); 褐色
transition过渡
transition-property:all; /* 谁动 谁加动画 */
transition-duration:3s; /* 动画完成的时间 */
transition-timing-function:ease; /* 动画类型 */
transition-delay:5s; /* 延迟 */
简写
transition: all 3s ease 2s;
transition:谁动(可以不写 默认是all) 完成时间 动画类型 延迟
transition: 1s 1s;
transition: 1s;
动画类型transition-timing-function
linear 线性过渡(匀速)
ease 平滑过渡(缓冲)(默认值)
ease-in 由慢到快(加速)
ease-out 由快到慢(减速)
ease-in-out 由慢到快再到慢(先加后减)
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transform转换 变换
translate()位移 scale()缩放 rotate() 旋转 skew()倾斜
transform: translate(50%,50%); /* 平移水平垂直都平移50% */
transform: rotate(45deg); /* 旋转45° */
transform: scale(.5); /* 缩放一半 0-1 */
transform: skewX(45deg); /* x轴和y轴倾斜/斜切 */
平移+旋转=斜切
中心点：transform-origin: ;
y top center bottom;x left center right;
位移和旋转都有的时候先位移后旋转
-webkit-box-reflect: below 0 linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.1));//倒影
box-reflect设置元素倒影
direction – 方向 above上、below下、left左、right右
offset – 距离 number、%
mask-box-image -设置倒影的遮罩图像 url
线性渐变创建遮罩图像 linear-gradient
径向(放射性)渐变创建遮罩图像 radial-gradient
重复的线性渐变创建背遮罩像 repeating-linear-gradient
重复的径向(放射性)渐变创建遮罩图像 repeating-url
景深perspective: 200px;
视距(看物体的距离,是离物体近 还是远)
推荐在800-1000之间
none表示或者0 表示没有
一般在父级元素上
transform-style: preserve-3d;开启3d空间
flat 2D空间(默认值) | preserve-3d(3d空间)
transform-origin: 50px 30px;
所有的变幻，都是以center center为原点
transform-origin: x y;
阻止鼠标事件:
pointer-events:none;阻止穿透
cursor:pointer;鼠标移动上去出现小手
禁用鼠标事件,设置pointer-events属性为none:
pointer-events:none
开启鼠标事件,设置pointer-events为auto:
pointer-events:auto
outline:none;点击表单元素不会出现黑边框
background-size:cover;等比例缩放，简写要在背景图定位后边/cover
多步动画
div{
animation: aaa 3s;
}
@keyframes aaa{
0%{
background: red;
}
50%{
background: green;
}
100%{
background: blue;
}
}
animation: 名字 动画完成时间 延迟 动画类型;
linear 线性过渡(匀速)
ease 平滑过渡(缓冲)(默认值)
ease-in 由慢到快(加速)
ease-out 由快到慢(减速)
ease-in-out 由慢到快再到慢(先加后减)
infinite 无限循环，可以为数字
alternate 开启反向运动，占用循环次数
鼠标移上去的时候暂停和运行：必须在hover的时候用
animation-play-state: paused;
animation-play-state: running;
animation-iteration-count属性定义动画应该播放多少次。
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
animation-fill-mode:forwards;
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。
animate动画，animate.css
点击链接打电话或者发邮件
移动端
viewport 浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域
它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
默认情况下，手机网页采用980px的宽
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
width=device-width宽度为设备宽度
user-scalable=no/yes/0/1是否允许用户缩放
initial-scale=1初始缩放比例
minimum-scale=1,maximum-scale=1最小缩放和最大缩放
em相当于直接*父级
rem相当于*16px，找的是根元素html
vw,vh就是把手机屏幕分为100份，10vw就是屏幕宽度的1/10，占了10份
“Retina”技术：
2合成一个像素点 高清屏幕 屏幕技术
3个像素点 合成一个
background: url(img/i@2x.png);
background-image:-webkit-image-set(url(img/i.png) 1x, url(img/i@2x.png) 2x);
iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时，最小化上下状态栏，这是个布尔值(yes/no)，不需要可以不写。
<meta name="apple-mobile-web-app-title" content="全网数据优化">
设置添加到主屏后的标题
<link rel="apple-touch-icon-precomposed" href=“img.png">
添加主屏以后的图标
<meta name="apple-mobile-web-app-capable" content="yes">
启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name="format-detection" content="telphone=no, email=no"/>
忽略页面中的数字识别为电话，忽略email识别
去除在apple手机浏览器中点击按钮或链接的高亮背景
-webkit-tap-highlight-color: transparent;
禁用iPhone自动调整字体大小
html {-webkit-text-size-adjust: none;}
移动端添加
<script>
window.onload = window.onresize = function(){
var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
var _html = document.getElementsByTagName('html')[0];
view_width>640?_html.style.fontSize = 640 / 16 + 'px':_html.style.fontSize = view_width / 16 + 'px';
}
</script>
640/16=40 手机屏幕宽度640，在设置里设置1rem为40px
手机屏幕宽度414，则414/16=？，用的416/16=26，在设置里设置1rem=26px；
最好在iconfont.css中的font-size大小改成一样的26px；将iconfont.css放在style.css上边，这样设置图标比较容易覆盖字体大小
defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。
defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
async：HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。
async和defer一样，不会阻塞当前文档的解析，它会异步地下载脚本，但和defer不同的是，async会在脚本下载完成后立即执行，如果项目中脚本之间存在依赖关系，不推荐使用async。
渐变字体
background-image: linear-gradient(320deg, #5082ec,#50b7e1,#7fe095,#f9f90b);
background-clip:text;
-webkit-background-clip:text;
color: transparent;
H5中a标签的电话和邮件功能
电话:
<a href="tel:400-888-9999">400-888-9999</a>
短信:
<a href="sms:10086">发送</a>
邮件
<a href="mailto:johndoe@sample.com">发送邮件</a>
收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
<a href="mailto:johndoe@sample.com?cc=victordu6694@gamil.com">点击我发邮件</a>
跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
<a href="mailto:johndoe@sample.com?cc=victordu6694@gamil.com&bcc=393819652@qq.com">点击我发邮件</a>
包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
<a href="mailto:johndoe@sample.com;victordu6694@gamil.com">点击我发邮件</a>
包含主题，用?subject=
<a href="mailto:johndoe@sample.com?subject=邮件主题">点击我发邮件</a>
包含内容，用?body=;如内容包含文本，使用%0A给文本换行,%20空格
<a href="mailto:johndoe@sample.com?body=邮件主题内容%0A南方公园%0A期待您的到来">点击我发邮件</a>
内容包含链接，含http(s)://等的文本自动转化为链接
<a href="mailto:johndoe@sample.com?body=http://www.baidu.com">点击我发邮件</a>
内容包含图片（PC不支持）
<a href="mailto:johndoe@sample.com?body=<img src='images/1.jpg' />">点击我发邮件</a>
完整示例
<a href="mailto:johndoe@sample.com;victordu6694@gmail.com?cc=393819652@qq.com&bcc=393819652@qq.com&subject=[邮件主题]&body=哈哈哈哈%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>
文字超出显示省略号
/* 单行文字省略号 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* 多行文字省略号1 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
/* 多行文字省略号2 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/*autoprefixer:off*/
-webkit-box-orient: vertical;
/*autoprefixer:on*/
-webkit-line-clamp: 5;
/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/