内核
|
内核
|
浏览器
|
前缀
|
|
webkit
|
Safari（苹果）
|
webkit
|
|
webkit/Blink
|
Chrome （谷歌）
|
webkit
|
|
Gecko
|
firefox (火狐)
|
moz
|
|
presto/webkit/Blink
|
Opera（欧朋）
|
o
|
|
Trident
|
IE浏览器的内核
|
ms
|
<!DOCTYPE html>
<!-- 不是标记，是声明
声明当前文档的类型及版本
作用：告诉浏览器该文件的类型，让浏览器解析的时候以正确的规范来解析文档
doc = document 文档
type = 类型
html = 超文本标记语言(网页) 版本类型 html5
-->
<html lang="en"> <!-- html 网页的开始 -->
<!-- 网页的头部 包含了脚本以及css样式和元信息(title 和 meta等)-->
<head>
<!-- 提供一些对机器可读的信息
charset 字符设置 统一设置网页的字符编码格式 utf-8 定义的是万国码
-->
<meta charset="UTF-8">
<!-- title 定义了网页的标题 -->
<title>百度一下，你就知道</title>
</head>
<!-- 网页的主体 定义设计稿需要实现的内容 -->
<body>
</body>
</html> <!-- 网页的结束 -->
html标记的属性
n 属性总是在开始标记中，以名值 对形式出现: name="value"
n 属性值始终被引号引起来，标签的属性推荐使用双引号（相同引号不能相互包含）
n 属性和属性值对大小写不敏感，推荐小写
文本格式
<strong> 加粗，强调，着重 有语义的标记 </strong>
<b>加粗的效果,bold 无语义的标记</b>
<em>倾斜，强调，着重 有语义的标记</em>
<i> 倾斜的效果，italic 无语义的标记</i>
<del>删除线</del>
<s>删除线</s>
<sup>上标 sup</sup>
<sup>下标 sub</sup>
显示中文拼音
<ruby>
饕<rt>tāo</rt>
</ruby>
<ruby>
餮<rt>tiè</rt>
</ruby>
路径
相对路径：从当前文件路径与要引用的文件或文件夹的路径关系
/ 下一级
./ 当前目录
../ 上一级目录
../../ 上上级目录
绝对路径：从盘符开始，服务器端
链接
<a href="" target="" title=""></a>
href 路径
target _self (默认)当前窗口打开
_blank 新窗口打开
title 鼠标悬停的提示
盒模型
内容 - content
包含width和height
max-width和max-height
设置元素的最大宽度和最大高度
min-width和min-height
设置元素的最小宽度和最小高度
box-sizing
box-sizing:content-box | border-box;
标准盒模型的计算方式：
盒子的总宽度= width + padding + border + margin
怪异盒模型(IE盒模型)
盒子的总宽度= width(包含padding+border) + margin
表格
<table cellspacing='0' cellpadding='0'></table>
单元格间距 单元格padding
rowspan 纵合并 colspan 横合并
css属性：
border-collapse: collapse;
权值
1.层叠性
2.继承性
继承属性： font- line- color text- ，除text-decoration
3.优先级
！important 1000 > id 100 > class 10 > 标签 1 > 通配符 * 0
！important高于行间样式，但没有自己本身样式优先级高
font | text
font-weight:normal | bold 粗体 | bolder 更粗
100-500不加粗 600以上加粗 700=bold 900=bolder
font-style : normal | italic
line-height : normal| length | number 数字会与字体大小相乘，倍数行距
font:font-style font-weight font-size/line-height font-family;
必须同时有font-size和font-family;顺序不能更换
text-align || text-align-last 最后一行对齐方式，一行
justify 两端对齐
行内元素无效。
text-decoration : none || underline 下划 || overline 上划 || line-through 删除线
单位
em 相对单位 | 相对当前元素的font-size属性
rem 相对单位 |（html）的font-size计算
fr相对单位 | 0.3fr 表示占剩余空间的0.3倍
margin传递与塌陷
父子关系
现象：给子标签设置上外边距时，会和父盒子的外边距重合，最终表现其中较大值的外边距。
原因：父子盒子公用了一个上外边距的区域
解决方法：
1. 给父级盒子设置边框或者是内边距
2. 给父标签设置overflow:hidden;属性,触发BFC规则（块级格式上下文），把父元素渲染成一个独立的区域。
兄弟关系
现象：上一个盒子设置下外边距，下一个盒子设置上外边距，最终会显示其中较大值的外边距。
原因：上下两个兄弟关系的盒子共用了一个外边距区域
解决方法：
1. 给两个盒子各套一个父盒子，父盒子添加overflow:hidden;属性
2. 给其中某一个盒子设置外边距
BFC
什么是BFC？
一个浏览器渲染元素的规则（块格式上下文）
如何触发元素的BFC规则？
元素浮动 元素绝对定位 元素类型为inline-block等 overflow不等于默认值visible
BFC规则具体表现：
父元素的上下边距不再合并 父元素的高度会将浮动元素计算在内
浮动
父元素设置高度（比较死板）
父元素overflow:hidden | scroll | auto
最后加一个空的块标签，该标签设置clear : left | right | both
伪元素创建
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{ /* 用来解决ie7及以下版本不兼容伪元素问题 */
*zoom: 1;
}
定位
position:static | relative | absolute | fixed;
static （定位的不定位） 默认值
z-index定位才有效
定位浮动区别
float 脱离文档流，不脱离文本流
position 脱离文档流，也脱离文本流
脱标后，margin:auto;无效
vertical-align
vertical-align : baseline 基线对齐 | top | middle 居中 |bottom 底端对齐
只作用display：inline-block属性；用来做垂直对齐方式的
去掉img下方3px间隙
父元素
font-size:0px;
line-height:0px;
img
display:block;
img
vertical-align，除baseline以外的值
显示隐藏
隐藏：
1. display:none; 隐藏
2. visibility:hidden; 隐藏，所占的空间保留
显示：
1. display:block; 转块显示
2. visibility:visible; 显示
overflow属性
overflow
overflow-x 只包括 水平方向
overflow-y 只包括 垂直方向
visible 默认值，显示，不裁剪
hidden 内容直接被裁剪隐藏
scroll 内容会被隐藏，但是浏览器可以显示上下和左右滚动条显示隐藏的内容
auto 内容会被隐藏，浏览器会根据具体的情况显示上下或者左右滚动条显示内容
透明
opacity :0-1之间 ie8- 不兼容
rgba() 透明背景颜色，元素不透明ie8- 不兼容
filter:Alpha(opacity=x) IE 透明背景及内容 仅支持ie6，7，8，9；IE10被废除
meta标签
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
author 作者
keywords 定义关键字
description 定义描述
viewport 手机浏览器的窗口大小，
device-width 浏览器窗口的宽度与手机宽度保持一致
initial-scale=0.5' 让网页缩放为原来的0.5倍
user-scalable=no 不允许用户缩放
<meta http-equiv="refresh" content="30">
每30秒钟刷新当前页面:
<!-- 以最高版本的ie渲染显示 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 兼容不支持viewport的设备 -->
<meta name="HandheldFriendly" content="true">
网页图标
<link rel="icon" href="favicon.ico">
css的书写顺序
布局定位属性 - 自身属性 - 文本属性 - 其他属性
float/position/display || 盒模型 + background || 文本属性：text- font- line- list- color
表单
button : submit || reset || button
name选项中，分组的作用
input ： text || password || radio || checkbox ||
file || image || button || submit || reset || hidden ||
url || email || search || number || color
tel 电话号码
range 滑动条
date 日期 年月日 日历表
datetime 日期时间 UTC
datetime-local 本地日期时间 年月日 时分 日历表
month 月份 年月 日历表
time 时间 时分 时钟
week 周
<form action="http" method="GET"></form>
input属性
value 初始值
placeholder 提示信息
checked 默认选中，选中单选按钮和复选框
multiple 可以选择多个文件
size 下拉列表可见数
maxlength 最大长度值
readonly 只读状态，只读不可以写入
disabled 禁用，不可读，不可写
selected 默认选中下拉列表中的项
pattern 验证input的模式，pattern的值是正则表达式
autocomplete：自动填充 on 打开 off 关闭
autofocus 自动获得焦点
required 必填字段（不能为空）
<select> 默认选中
<option selected></option>
</select>
textarea{
resize:none; /*重置元素大小*/
}
<textarea></textarea>
css属性
outline: none;
去除选中边框
resize: none;
- none 无法调整元素的尺寸
- both 可调整元素的宽度和高度
- vertical 可调整元素的高度
- horizontal 可调整元素的宽度
input[type = "checkbox"]:checked{/* 被选中的多选框 */
appearance: none;/* 外观：无 */
}
datalist
<input type="text" list="car"> 获取焦点 自动显示选项car
<datalist id="car">
<option value="web"></option>
</datalist>
<form id="login"> 提交绑定 login 提交
</form>
<input form="login">
文本溢出隐藏
单行溢出隐藏
.box{
/* 1.设置元素的宽度 */
width:400px;
/* 2.不换行 */
white-space: nowrap;
/* 3.超出的内容溢出隐藏 */
overflow: hidden;
/* 4.以省略号显示隐藏的内容 */
/* text-overflow: clip; 直接裁剪 */
text-overflow:ellipsis; /*以省略号显示隐藏的内容*/
}
多行溢出隐藏-webkit-内核
只有内核是-webkit-的浏览器
.box1{
/* 1.设置元素的宽度 */
width:400px;
/* 改变元素为box弹性盒子 */
display: -webkit-box;
/* 限定行数 不是一个规范的属性，没有在css规范草案中 */
-webkit-line-clamp: 2;
/* 检索伸缩盒子对象的子元素的排列方式 */
-webkit-box-orient: vertical;
/* 设置溢出隐藏 */
overflow: hidden;
/* 隐藏的文本以省略号显示 */
text-overflow: ellipsis;
}
多行溢出隐藏 兼容较好
.box2{
/* 1.限定宽度 */
width:400px;
border: solid;
margin: auto;
/* 2.限定高度以及行高，并且行高与高度要成比例 */
height: 60px;
line-height: 30px;
position: relative;
overflow: hidden;
}
.box2:after{
content:'...';
position: absolute;
right:0px;
bottom:0px;
background: #fff;
padding-left:4px;
}
多栏布局
两栏布局
两栏自适应:两列布局，左侧固定宽度，右侧盒子自适应
? 1.左右两个盒子，左边固定宽度，右边设置100%
? 2.给左侧盒子设置position:absolute
? 3.右侧盒子内部添加一个子盒子，给子盒子设置padding-left，值为左侧盒子的宽度
.left{
width:200px;
height:100px;
background: pink;
position: absolute;
}
.right{
width:100%;
height: 100px;
background: greenyellow;
}
.inner{
padding-left:200px;
background: red;
}
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
圣杯布局
1. 三个盒子都浮动,并且设置一个position:relative;
2. 中间盒子的宽度设置100%占满
3. 要把左边盒子拉倒最左边，通过使用margin-left:-100%;
4. 左边盒子上去之后会覆盖中间的一部分内容，要把中间的内容拉出来，在外围的wrap盒子设置padding-left,值为左边盒子的宽度
5. 中间盒子的内容被拉回来，但是左边盒子也回来了，给左边设置定位并且设置偏移量属性left，值为盒子宽度的负值，还原盒子的位置
6. 右边同理左边
.wrap{
padding-left:200px;
padding-right:200px;
}
.left,.right,.center{
float: left;
position: relative;
}
.left,.right{
width:200px;
height:100px;
}
.left{
background: greenyellow;
margin-left:-100%;
left:-200px;
}
.right{
background: pink;
margin-left:-200px;
right:-200px;
}
.center{
width:100%;
height: 100px;
background: yellow;
}
<div class="wrap">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
双飞翼布局
双飞翼布局：左右两栏固定宽度，中间盒子自适应(中间盒子必须放在最前面)
?1.html结构中，中间的盒子必须放在最前面
?2.将三个盒子都浮动
?3.中间盒子main占满100%
?4.将左边盒子拉倒最左边，margin-left:-100%;右边盒子放到最右边
?5.中间盒子的内容被左右盒子覆盖了，在中间盒子内部添加一个子元素，给子元素设置margin:0px 200px;
.left,.right,.main{
float: left;
}
.left,.right{
width:200px;
height:100px;
opacity: 0.5;
}
.left{
background: yellowgreen;
margin-left: -100%;
}
.right{
background: pink;
margin-left:-200px;
}
.main{
width:100%;
height:100px;
background: yellow;
}
.inner{
background: red;
margin:0px 200px;
}
<div class="main">
<div class="inner">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
等高布局
等高布局：多列子元素在父元素中实现等高视觉效果的布局技巧
? 多个列需要自己的背景颜色
? 一列变高，其他列的高度都要变化
利用内外边距抵消法
- 优点：结构简单，兼容所有浏览器，比较容易理解
- 缺点：伪等高，需要合理的控制margin和padding的值
.box{
width:900px;
margin: auto;
overflow: hidden;
}
.box:after{
content:'';
clear: both;
display: block;
}
.box div{
width:300px;
float: left;
padding-bottom: 999px;
margin-bottom: -999px;
}
.col1{
background: pink;
}
.col2{
background: greenyellow;
}
.col3{
background: yellow;
}
.test{
height: 100px;
background: #000;
}
/* 利用内外边距抵消法 */
<div class="box">
<div class="col col1">第一列；第一列；第一列；第一列；第一列；第一列；第一列；</div>
<div class="col col2">第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；第二列；</div>
<div class="col col3">等高布局：多列子元素在父元素中实现</div>
</div>
<div class="test"></div>
嵌套法
给每一个盒子嵌套一个背景，通过内容撑开父元素的高度的原理
- 优点：兼容各种浏览器，方便扩展创建任意列数
- 缺点：结构嵌套复杂，难以理解
.wrap{
width:900px;
margin:auto;
overflow: hidden;
}
.bg1{
background: pink;
}
.bg2{
background: yellowgreen;
position: relative;
left: 300px;
}
.bg3{
background: yellow;
position: relative;
left:300px;
}
.bg3:after{
content: '';
clear: both;
display: block;
}
.bg3 div{
width:300px;
float: left;
position: relative;
}
.bg3 .col1{
margin-left:-600px;
}
.bg3 .col2{
margin-left:-300px;
}
<div class="wrap">
<div class="bg1">
<div class="bg2">
<div class="bg3">
<div class="col1">第一列给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景</div>
<div class="col2">第二列</div>
<div class="col3">第三列</div>
</div>
</div>
</div>
</div>
多列布局
被分隔的列数
column-count:number | auto;
元素的列宽
column-width:auto | length;
列宽
column-gap:length | normal;
边框线样式，是一个简写：column-rule-*: color width style;
column-rule:width color style;
H5布局标签
header footer nav
article 定义一段独立的文档区域
section 章节，标题和段落组成
aside 侧边栏
hgroup 标题和子标题进行分组
<hgroup>
<h1>主标题</h1>
<h3>副标题</h3>
</hgroup>
其他的标签
figure 定义了图片的文本内容
<figure>
<img src="" alt="">
<figcaption> 定义figure的标题 </figcaption>
</figure>
注意：一个figure里面只能有一个figcaption
mark 标记标签
time 标记 定义日期或时间
标签的兼容
1、利用JavaScript新增元素的方式
js代码 通过js创建的元素是行内元素
document.createElement('header');
js创建的元素是行内元素，需要使用display:block; 转块级元素
2、使用封装好的插件，引入js文件（html5shive.js）
<!--[if lt ie 9]>
<script src="./js/html5shiv.min.js"></script>
<![endif]-->
多媒体
视频<video>
- src 规定要播放的视频的路径
- controls 播放控件
- loop 循环播放
- muted 静音播放
- autoplay 自动播放（静音属性才有效）
- poster 预览图
- width 宽度
- height 高度
音频<audio>
- src 规定要播放的音频的路径
- controls 播放控件
- loop 循环
- muted 静音播放
资源标签
<source>
<video>
<source src="./videoAudio/movie.mp4">
</video>
autoprefixer自动生成前缀
1. 在扩展 - 搜索”autoprefixer“ - 安装
2. 在“管理” - “安装另外一个版本” 2.2.0
3. 在css文件中，按“f1"，选择 “autoprefixer CSS”
选择器
? attr 选择属性
? attr=value 选择属性匹配属性值
? attr ~= value 选择器属性匹配属性值 词组
? attr ^= value 选择属性匹配属性值 以value开头
? attr $ = value 选择属性匹配属性值 以value结束
? attr *= value 选择属性匹配属性值 包含value
结构伪类
:first-child 选取属于父元素的首个子元素
:last-child 选取属于父元素的最后一个子元素
:nth-child(n) 选取属于父元素的第n个子元素
:nth-last-child(n) 选取属于父元素的第n个子元素，从最后一个子元素开始计数
:nth-of-type(n) 选取属于父元素的特定类型的第n个子元素
:nth-last-of-type(n) 选取属于父元素的特定类型的第n个子元素，从最后一个子元素开始
状态伪类
a:link 正常的，未访问过的
a:visitied 访问过后的
a:active 激活中
a:hover 鼠标悬停
注意：a:hover必须放在a:link和a:visitied之后，才有效
：checked 被选中的元素
：enabled 可用的状态元素
：disabled 禁用状态的元素
阴影
text-shadow:x y blur color;
box-shadow:x y blur spreed color inset;
水平 垂直 模糊度 尺寸 颜色 内阴影，默认的是外阴影
background
background-image:url(),url()....;
background-size:length | % | cover | contain ;
cover:把背景图片扩至足够大，以使背景图像完全覆盖背景区域。
contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
background-origin:content-box | padding-box | border-box;
content-box 背景图片相对于内容框来定义
padding-box 背景图片相对于内边距框来定义
border-box 背景图片相对于边框线来定义
background-clip:content-box | padding-box | border-box;
content-box 背景裁剪到内容框
padding-box 背景裁剪到内边距框
border-box 背景裁剪到边框线
resize
resize:none | both | horizontal | vertical;
注意：如果其他元素希望该属性生效，需要设置元素的overflow的属性，值除了visible以外
- none 无法调整元素的尺寸
- both 可以调整元素的宽度和高度
- vertical 可以调整元素的高度
- horizontal 可以调整元素的宽度
渐变
background:linear-gradient(角度，颜色);
关键字：left right top bottom
? 角度值：角度的单位 deg
重复线性渐变
background:repeating-linear-gradient(角度,颜色 颜色的起始位置)
渐变的值可以设置一个或多个，多个值列表之间用【逗号】隔开
径向渐变
background:radial-gradient(中心点,颜色);
中心点取值：
关键字：center
background-image: radial-gradient(circle, red, yellow, green);
不同尺寸大小关键字的使用:
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
重复径向渐变
background:repeating-radial-gradient(中心点,颜色 颜色的起始位置)
兼容问题
图片的边框
图片添加链接在IE中会出现边框线：给图片标签设置
border:none;
IE 低版本的兼容
小高度（IE6-）
.box{
...
font-size:0px;
line-height:0px;
}
IE7- 子标签相对定位时，父标签的overflow:hidden属性失效
/*给父元素添加position:relative;*/
IE6- 浮动时会产生双倍边距的bug
IE7- 块转行内块不会在一行上显示
div{
display:inline-block;
*display:inline;
*zoom:1;
}
IE7- 当li中出现两个或以上的浮动时，li之间会产生空白间隙
li{
vertical-align:top/bottom/middle;
}
cssHack
条件Hack
<!--[if ie]>
<style>
选择器{声明;}
</style>
<![endif]-->
用于选择浏览器及浏览器版本
gt 大于
gte 大于等于
lt 小于
lte 小于等于
! 非指定版本
属性Hack
IE6- 属性前
IE7- 属性前
IE8-9 属性值后
选择符Hack
IE6-
.box{
background:yellow;
}
IE7-
.box{
background:green;
}
动画
过渡
transition：property duration timing-function delya;
property 过渡的属性 多个属性之间用逗号隔开 none没有过渡属性 all所有的
duration： 过渡时间 s / ms
timing-function： linear匀速 ease
delay 延迟时间
动画
1.创建动画过程 @keyframes
2.调用动画
animation:name duration timing-function delay iteration-count direction;
name 动画名称，绑定到 @keyframes
duration 完成动画的时间
timing-function 曲线速度 linear
delay 延迟时间
iteration-count 动画播放次数number infinite无限
direction 是否轮流反向 alternate
变换
transform:
2D
translate(x,y) 平移
rotate(deg) 旋转
scale(x,y) 缩放 1默认值，比1大放大，比1小缩小
skew(x,y) 倾斜 单位是角度deg
3D
translateZ() z轴平移，前后移动
translate3d(x,y,z)
rotateX() 绕x轴旋转 前后翻转
rotateY() 绕y轴旋转 左右翻转
rotateZ() 绕z轴旋转 水平翻转
rotate3d(x,y,z,deg) -1 0 1 0-360deg
scaleZ() 在z轴上缩放
scale3d(x,y,z)
视距 perspective
元素的中心点 transform-origin: length | 关键字 | %
保留子元素的3d位置： transform-style:flat | preserve-3d;
翻转之后看不见盒子背面
backface-visibility: hidden;
弹性盒子
display:flex/inline-flex; IE11支持，IE10-不支持
容器属性
排列方向
flex-direction:row / row-reverse / column / column-reverse ;
对齐方式(主轴)
justify-content: flex-start / flex-end / center /space-between /space-around / space-evenly
对齐方式(交叉轴)
align-items ： stretch 默认|| flex-start || flex-end || center || baseline
flex-wrap : nowrap || wrap || wrap-reverse
项目属性
order : 0; 数值越小，排列越靠前
flex-grow: 0;放大
flex-shrink : 1; 默认缩小
flex-basis auto;分配多余空间前，项目占据的主轴空间，
flex：flex-grow flex-shrink flex-basis;
flex:0 1 auto; 放大 缩小 占据主轴空间
align-self : stretch 默认|| flex-start || flex-end || center || baseline
calc() 函数
calculate 计算的缩写,是css3新增的计算功能，用来指定元素的长度
.box{
calc(表达式);
}
运算符前后保留一个空格
grid网格布局
display: grid;
/* 网格布局 */
grid-template-rows: 20% 10% 100px auto;
/* 四行 */
grid-template-columns: 100px auto 20%;
/* 三列 */
grid-template-rows:repeat(3 , 1fr);
/* fr表示占剩余空间的1倍 */
grid-template-columns: repeat(3 , 1fr);
/* repeat表示3列都是1fr */
grid-template-areas区域划分
.box {
width: 500px;height: 500px;
border: 1px solid #000;
display: grid;
/* 网格布局 */
/* grid-template-rows: 20% 10% 100px auto; */
/* 四行 */
/* grid-template-columns: 100px auto 20%; */
/* 三列 */
/* grid-template-rows:repeat(3 , 1fr);
grid-template-columns: repeat(3 , 1fr); */
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
/* 给每个格子起一个名字 */
}
.box div{background-color: red; border: 1px solid #000;}
.box div:nth-child(1){grid-area: a1;}
.box div:nth-child(2){grid-area: a2;}
.box div:nth-child(3){grid-area: a3;}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
间距
grid-row-gap: 20px;
/* 每个网格横向的间距 */
grid-column-gap: 10px;
/* 每个网格纵向的间距 */
复合写法
grid-gap: 横向 纵向;
每个小格子里面的内容怎么排列
justify-items: stretch;
align-items: stretch;
复合写法
place-items: 纵向 横向;
每个格子在大盒子的水平垂直排列 类似display：flex
justify-content: start;
align-content: space-around;
复合写法
place-content: 纵向 横向;
@media媒介查询
@media screen and (max-width: 640px){
/* @media 媒介的意思 screen窗口的大小*/
/* 当 浏览器不超过640的时候使用以下样式*/
}
@media not
and (max-width: 640px){
与上面的相反 大于640px才会触发
@media screen and ( orientation: landscape)
在横屏下触发
@media screen and ( orientation: portrait) {
竖屏下触发
<link rel="stylesheet" href="css.css" media="all and (mid-width:400px)">
小于400px才引用外部css
移动端样式重置
移动端数字识别
<!-- 以最高版本的ie渲染显示 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
format-detection 格式检测
telephone 主要作用是是否设置自动将你的数字转化为拨号连接
telephone=no 禁止把数字转化为拨号链接
telephone=yes 开启把数字转化为拨号链接，默认开启
email 告诉设备不识别邮箱，点击之后不自动发送
email=no 禁止作为邮箱地址
email=yes 开启把文字默认为邮箱地址，默认情况开启
adress 跳转至地图功能
adress=no 禁止跳转至地图
adress=yes 开启点击地址直接跳转至地图的功能, 默认开启
圆角bug：
部分Android手机圆角失效
Element{
background-clip: padding-box
}
IOS链接按钮点击时的灰色遮罩问题
button,a,textarea ,input {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
IOS下按钮和输入框的默认样式
button,input {
-webkit-appearance: none;
border-radius: 0;
}
禁止文本缩放
html {
-webkit-text-size-adjust: 100%;
}
禁止默认操作
body {
-webkit-user-select:none;
-webkit-touch-callout:none; /* 系统默认菜单被禁用 */
}
修改placeholder样式
input::-webkit-input-placeholder {
color:#000;
}
input:focus::-webkit-input-placeholder{
color: blue;
}
预处理
less
@import "reset.css"; /* 导入css */
@w:1190px;/* 变量 */
使用
height:calc(@w - 1000px);
border-@{side}:10px solid @color + 200;
混入 @arguments
.boxShadow(@x,@y,@blur,@spreed,@color){
box-shadow: @arguments ;
}
.box1{
.public;
.boxShadow(0px, 0px,30px ,50px , @color)
}
继承 :extend
.box3{
&:extend(.public);
margin:auto;
}
// 等同于
.box4:extend(.public){
margin: 50px auto;
background: green;
}
运算
.bottom{
width:(200px-20)*2;
}
scss
引入
@import "./sc/base";
变量
$yyy : 200px !default;// 默认变量 只要有新值就会覆盖
#dix1{
$color : #ccc;// 局部变量
$color : #ccc !global;// 全局变量
}
#div2 {// 特殊变量 #{表达式/变量}
border-#{$zzz} : 1px solid black;
}
混入
@mixin box-shadow($shadows...) {
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
继承 @extend
#div {
@extend .btn;// 继承了.btn 与 .btn 下a的属性
}
控制指令
判断
$theme : dark;
body {
@if $theme == darl {
background-color: black;
}@else if $theme == light {
background-color: white;
}
}
循环
$round : 12;
// 开始值 结束值
@for $i from 1 through $round{
.col-#{$i}{
width: 100% / $round * $i;
}
}
$num : 5;
@while $num > 0 {
.item#{$num}{
width : $num * 2em;
}
$num : $num - 1;
}
$icons : success error waring;
@each $list in $icons {
.box-list{
background: url("#{$list}.png");
}
经验首页