选择器

• 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;
css

• x: 水平，y: 垂直，blur：模糊度，spreed：尺寸，color：颜色，insert：内阴影，默认的是外阴影

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 背景裁剪到边框线 */
css

resize

复制resize:none | both | horizontal | vertical;
css

• none：无法调整元素的尺寸
• both：可以调整元素的宽度和高度
• vertical：可以调整元素的高度
• horizontal：可以调整元素的宽度

注意
如果其他元素希望该属性生效，需要设置元素的 overflow 的属性，值除了 visible 以外

线性渐变

复制background: linear-gradient(角度，颜色);
/* 关键字：left right top bottom */
/* 角度值：角度的单位  deg */
css

重复线性渐变

复制background: repeating-linear-gradient(角度,颜色 颜色的起始位置)
/* 渐变的值可以设置一个或多个，多个值列表之间用【逗号】隔开 */
css

径向渐变

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);
css

重复径向渐变

复制background:repeating-radial-gradient(中心点,颜色 颜色的起始位置)
css

图片的边框

图片添加链接在 IE 中会出现边框线：给图片标签设置

复制border:none;
css

IE 低版本的兼容

• 小高度（IE6-）

复制font-size:0px;
line-height:0px;
css

• IE7- 子标签相对定位时，父标签的 overflow:hidden 属性失效

复制position: relative; /* 给父元素添加解决 */
css

• IE6- 浮动时会产生双倍边距的 bug IE7- 块转行内块不会在一行上显示

复制display:inline-block;
*display:inline;
*zoom:1;
css

• IE7- 当 li 中出现两个或以上的浮动时，li 之间会产生空白间隙

复制vertical-align:top/bottom/middle;
css

CSS Hack

条件 Hack

复制<!--[if ie]>
  <style>
    选择器{声明;}
  </style>
<![endif]-->
css

用于选择浏览器及浏览器版本

• gt：大于
• gte：大于等于
• lt：小于
• lte：小于等于
• !：非指定版本

属性 Hack

• IE6- 属性前
• IE7- 属性前
• IE8-9 属性值后

选择符Hack

复制IE6-
.box{
  background:yellow;
}
IE7-
.box{
  background:green;
}
css

过渡

复制transition: property duration  timing-function  delya;
css

• property 过渡的属性 多个属性之间用逗号隔开 none没有过渡属性 all所有的
• duration： 过渡时间 s / ms
• timing-function： linear匀速 ease
• delay 延迟时间

动画

1. 创建动画过程 @keyframes
2. 调用动画

复制animation: name duration timing-function delay iteration-count direction;
css

• name：动画名称，绑定到 @keyframes
• duration：完成动画的时间
• timing-function：曲线速度 linear
• delay：延迟时间
• iteration-count：动画播放次数 number，infinite 无限
• direction：是否轮流反向，alternate

变换

复制transform: translate(x,y) rotate(deg) scale(x,y) skew(x,y)
transform-origin: length | 关键字 | %
transform-style:flat | preserve-3d;
perspective: number;
backface-visibility: hidden;
css

• 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：元素的中心点
  • transform-style：保留子元素的 3d 位置
  • backface-visibility: 翻转之后看不见盒子背面

Flex 弹性盒子

设置 flex 属性

复制display:flex/inline-flex;  /* IE11支持，IE10-不支持 */
css

容器属性

复制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 
css

项目属性

复制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
css

Grid 网格布局

设置 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 */
css

区域划分

复制 .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;}
css

复制<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
html

间距

复制grid-row-gap: 20px;/* 每个网格横向的间距 */
grid-column-gap: 10px;/* 每个网格纵向的间距 */
grid-gap: 横向 纵向;/* 复合写法 */
css

内容排列

每个小格子里面的内容怎么排列

复制justify-items: stretch;
align-items: stretch;
css

盒子排列

每个格子在大盒子的水平垂直排列 类似display：flex

复制justify-content: start;
align-content: space-around;

/* 复合写法 */
place-content: 纵向 横向;
css

媒体查询与 calc 函数

媒体查询

复制/* @media 媒介的意思 screen窗口的大小 */
@media screen and (max-width: 640px){/* 当浏览器不超过 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 */
css

calc() 函数

复制calc(表达式)
css

• calculate 计算的缩写,是 css3 新增的计算功能，用来指定元素的长度
• 运算符前后必须保留一个空格