Doctype
声明位于文档中最前面的位置，告诉浏览器文档用那种HTML规范
viewport手机端浏览器将页面放在一个虚拟窗口（viewport），通常这个虚拟窗口比屏幕宽
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
</head>
link和@import
都可以引入CSS文件
顺序有区别，link引用CSS会同时被加载，@import引入CSS会等页面全部下载完后再加载，因此有时候会有闪烁
@import在IE5以上支持，CSS2.1提出的标准
bootstrap
默认字体14px, 默认行高20px, 20/14=1.428571rem
xs<768px
768px<=sm<992px
992px<=md<1200px
1200px<=lg
栅格系统
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
iPhone
4s:320pt;
5/5s/5c:320pt; 物理像素640
6:375pt;
6 plus:414pt;
12px == 9pt;
1em == 16px;
px pt em rem
em:相对当前对象内文本，如当前对象内文本尺寸未被认为设置，则相对于浏览器默认字体尺寸（浏览器默认字体16px，因此默认1em = 16px）
rem:相对HTML根元素，修改根元素就成比例调整所有字体大小，又可避免字体大小逐层复合连锁反应
// 1em = 10px;
html{font-size:62.5%;}
//rem
html{font-size:14px;}
body{font-size:1rem;}
动画
//css动画
.tm-dropdown-slider-out {
-webkit-animation: drop-slideOut 200ms;
animation: drop-slideOut 200ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
}
@-webkit-keyframes drop-slideOut {
from {
top: 0;
}
to {
top: 100%;
}
}
div{
width:100px;
transition: width 2s;
//hover是width会动画变为300px
&:hover{
width:300px;
}
}
none:不改变默认行为
forwards:动画完成后，保持最后一个关键帧中定义
backwards:animation-delay所指定的一段时间内，在动画显示之前，应用第一个关键帧中定义
both:向前和向后填充模式被应用
scroll硬件加速
//滚动条硬件加速
overflow: auto;
-webkit-overflow-scrolling: touch;
上下左右居中
#parent{
position:relative;
#child {
position: absolute;
top: 50%;
left: 50%;
//transform变形改变(旋转，移动)
//translate(x,y)定义2D移动
transform: translate(-50%, -50%);
//允许属性平滑过渡
//transition:width 2s ease 0s;
}
}
#parent{
display:table-cell;
text-align:center;
vertical-align:middle;
#child{
display:inline-block;
}
}
#parent{
display: flex;
align-items: center;
justify-content: center;
}
//按图片比例
//padding-bottom设置百分比是相对于width
.mk-new-product-card > a > div:nth-of-type(1) {
width: 100%;
height: 0;
padding-bottom: 48.2%;
position: relative;
overflow: hidden;
}
浏览器内核
IE:trident -ms-
FireFox:gecko -moz-
Safari:webkit -webkit-
Opera:presto(旧) blink -o-
Chrome:webkit -webkit-
Autoprefixer插件可自动添加前缀
盒模型
具有content, padding, border, margin等属性
IE的width = content + border + padding
box-sizing: content-box | border-box | inherit;
content-box:width = content-width
border-box:width = content-width + padding-width + border
伪类选择器
目标伪类:target
元素状态伪类:enabled, :disabled, :checked
解构伪类:first-child, :last_child, :empty, :only-child
否定伪类:not(selector)
a标签lvha:
:link
:visited
:hover
:active
伪元素
content属性与:before, :after伪元素配合使用，插入生成内容
p:before{
content: "hello";
}
Flex
.box{
display: -webkit-flex; /* Safari */
display: flex;
/* 主轴方向 */
flex-direction：row | row-reverse | column | column-reverse;
/* 如何换行，默认不换 */
flex-wrap: nowrap | wrap | wrap-reverse；
/* flex-direction和flex-wrap缩写 */
flex-flow:row nowrap;
/* 主轴对齐方式 */
justify-content: flex-start | flex-end | center | space-between | space-around;
/* 主轴垂直对齐方式 */
align-items: flex-start | flex-end | center | baseline | stretch;
.item{
//项目排序
order:1；
//子项分配父项剩余空间比，默认0
flex-grow:0；
//子项收缩占的份数
flex-shrink:1;
//子项初始大小
flex-basis: 350px;
//flex-grow, flex-shrink, flex-basis简写
flex:0 1 auto;
//子项，数值占剩余空间份数
flex:1;
}
}
媒体检测
only限定某种设备
screen设备的一种
and 关键字
not
设备：all, braille, handheld, print, screen, speech
//screen指浏览器视窗
//视窗小于1024px响应以下样式
@media only screen and (max-width: 1024px) {
margin: 0;
}
//视窗小于376px响应以下样式
@media(max-width: 376px) {}
画三角
//绘三角形
.up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
}
Position
position:absolute | fixed | relative | static | inherit;
absolute:绝对定位,相对于relative
fixed:绝对定位，相对于浏览器
relative:相对定位元素
static:默认，没定位
inherit:从父元素继承position属性值
Font-face
//.eot, .ttf, .woff, .svg
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?ac2jxe');
src: url('../fonts/icomoon.eot?ac2jxe#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?ac2jxe') format('truetype'),
url('../fonts/icomoon.woff?ac2jxe') format('woff'),
url('../fonts/icomoon.svg?ac2jxe#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-1:before {
content: "\e900";
}
文本溢出
.overflow {
overflow: hidden;
text-overflow: ellipsis;
//文本不换行，直到遇到<br/>
white-space: nowrap;
}
.overflow-plus {
overflow : hidden;
text-overflow: ellipsis;
//多行文本溢出
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
//跨浏览器兼容多行文本溢出
.overflow-plus-plus {
p {
position: relative;
line-height: 1.4rem;
height: 4.2rem; //3行
overflow: hidden;
}
p::after {
content: "...",
position: absolute;
background: #ffffff;
}
}
网友评论