后代元素选择器
.header a
选中class为header的元素的后代元素a标签
下一个兄弟
ul>li.two + li
=>
.two + *
- zero
- one
- two
- three
- four
- five
之后所有兄弟
ul>li.two ~ li
=>
.two ~ *
属性选择器【过滤器】
在已有选择器的基础上进行筛选
selector[]
input[type]
input[type=text]
input[type^=s]
input[type$=t]
input[type*=t]
伪类选择器【过滤器】
表示结构的
:first-child
:last-child
:nth-child()
number/2n+1/even、odd
表示状态的
:link
:hover
:active
:visited
:focus
伪元素选择器【添加元素】
selector::after
将一个伪元素添加到selector选择到的元素里面的最后面
ul.nav::after {
content:"four";
display:block;
...
}
css -> css语法 -> 选择器 {规则}
-> 选择器 -> 规则
规则取值：
关键字：
位置 left right center top bottom medium
取消 none
…
颜色：
十六进制 #ffffff #ededed,简写为#fff
rgb函数 rgb(0,0,0)
关键字
渐变色 linear-gradient
长度：
绝对单位 px
相对单位
em 当前元素上的字体大小
font-size:12px
1em = 12px
2em = 24px
rem 当前html元素中设定的字体大小
html {
font-size:10px;
}
ul {
font-size:20px;
}
li {
height:2rem; //20px
}
% 百分比
border-radius:50%
字体样式 (可以被继承)
color
font-family 族
‘微软雅黑’ ,‘Microsoft YaHei’,‘宋体’
字体栈
font-family:"微软雅黑","Microsoft YaHei",serif;
font-size 大小
网页默认字体为16px
12px 10px
font-weight 粗细
bold
thin
bolder
100~900
font-style 是否打开斜体
line-height
font:
速写，简写
font: font-style font-weight font-size/line-height font-family
font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei"
网络字体
奇葩字体，（字 -> icon）
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1564624596715'); /* IE9 */
src: url('iconfont.eot?t=1564624596715#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,=') format('woff2'),
url('iconfont.woff?t=1564624596715') format('woff'),
url('iconfont.ttf?t=1564624596715') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1564624596715#iconfont') format('svg'); /* iOS 4.1- */
}
.lishiziti {
font-family:'iconfont'
}
.weixin:before {
content:'\e123'
}
图标：
1. 将图标从设计图中切割下来，当做图片使用(小程序)
缺点：放大与缩小比较麻烦，失真；无法更换颜色
2. 字体图标库（网页）
hello
字体图标库(第三方库)
iconfont / fontawesome(拓展)
使用方法：
1) 在iconfont官网中选择要使用的图标，放入到购物车中
2) 下载源码到本地
3) 本地引用iconfont.css文件
4) 应用样式即可
文本样式 (可以被继承)
text-align 文本在容器中的排列方式
left
right
center
text-indent 文本在容器中的缩进
2em
text-decoration-line 文本装饰线的位置
none
underline
overline
line-through
text-decoration-style 文本装饰线的类型
solid
double
dotted
dashed
wavy
text-decoration-color 文本装饰线的颜色
text-decoration 以上速写形式
text-shadow 文本的阴影
left top c color;
列表样式
list-style-type
circle/quare/…
list-style-image
url()
list-style-position
inside/outside
list-style:none 【*】
盒子样式（块元素）
width
height
margin
盒子上下外边距不会合并，比如，第一个元素margin-bottom:20px;第二个元素margin-top:10px;他们的外边距为20px
margin-top
margin-right
margin-bottom
margin-left
margin:10px; 上右下左都为10px
margin:0 10px; 上下为0，左右为10px
margin:0 5px 10px;上0，下10px 左右5px
margin:5px 10px 15px 20px 上右下左
padding
padding-top
padding-right
padding-bottom
padding-left
padding:10px; 上右下左都为10px
padding:0 10px; 上下为0，左右为10px
padding:0 5px 10px;上0，下10px 左右5px
padding:5px 10px 15px 20px 上右下左
border
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-style
border-right-style
border-bottom-style
border-left-style
border-style
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border:1px solid #ededed;
border-radius
box-shadow
box-shadow:5px 5px 10px #ccc;
box-shadow:inset 0px 0 3px lightblue;
background-origin 背景起点
border-box
padding-box
content-box
background-clip 对已经铺好的背景裁切
border-box
padding-box
content-box
background-image
url()
background-color
颜色
background-position
位置
center
left top
100px 50px
background-repeat
repeat-x
repeat-y
no-repeat
background
background:url('') no-repeat center;
background:center/cover padding-box url('./image/lianjia_08.png') no-repeat ;
1) 盒子模型
内容盒子 （width = 内容宽）【传统盒子/w3c盒子】
是绝大多数浏览器的默认盒子模型
width : 100px
表示内容区域的宽为100px
边框盒子 （width = 边框以内所有元素宽）【怪异盒子/IE盒子】
width : 100px;
表示边框以内所有的宽的综合
width = border + padding + 内容区域
布局
使用块元素搭建网页结构,改变默认文档流的方式，让其在一行中显示多列。【让块在一行中显示】
浮动布局
float
float:left/right
可以使块元素脱离当前的文档流
1) 宽度如果没有手动指定那么就由内容决定
2) 多个浮动元素在一个浮动流中并排显示，如果一排放不下就会自动换行
3) 浮动元素失去了对父元素的支撑
clear
clear:left/right/both
清理左边/右边/左右两边的浮动元素，一般使用这个特性强制子元素换行，达到支撑父元素的目的
一行多列：
全部浮动
ul>li{
float:left
}
一行两列
方法一：
两列都浮动
.left {float:left }
.right {float:right; }
方法二：
一列浮动，一列添加margin-left
.left {float:left; width:200px}
.right {margin-left:220px;}
overflow
overflow-x
overflow-y
auto/none/visible/scroll
当父元素的宽/高固定，子元素的宽/高超过了父元素就可以使用这个特性
display
block/inline/inline-block/...
块/行内/行内块
行内块
可以与其他行内元素共享一行空间
可以指定宽高
定位布局
position
static 静态（默认） 非定位元素
relative 定位元素（相对定位）
参照点：原先所在的位置
特性：不脱离文档流（宽度默认为为100%，原来在文档流的位置不会被抢占），但是可以覆盖在其他元素上
absolute 定位元素（绝对定位）
参照点：距离它最近的父定位元素，如果没有，参照视口
特性：脱离文档流（宽度由内容决定，原来在文档流的位置被其他元素抢占）
fixed 定位元素（固定定位）
特性：脱离文档流
参照点：相对于浏览器视口，并且不会随着网页的滚动而滚动
sticky 定位元素（粘滞定位 【CSS3新特性】）
特性：不脱离文档流
是relative与fixed的集合，使用top/left/right/bottom设置过渡点，当超过了这个临界点，就提现fixe固定在网页中的特性
只能定位元素才能使用定位属性
top 、left、bottom、right
改变定位元素在z轴中的位置
z-index
默认为0，值越小越靠下
伸缩盒
作用：主要应用在响应式(网页可以随着终端的屏幕尺寸合理调整布局)布局中
应用：
1. 父元素(宽高都需要明确)
display:flex
flex-direction:row/column
flex-wrap:nowrap/wrap
2. 子元素
flex-basic
flex-grow:
flex-shrink:
flex:grow shrin basic;
flex:grow;
面试题：
1. 如何使得一个块元素在浏览器中居中
1) margin:0 auto;
2) 相对定位
3) 绝对定位
2. 哪种机制可以使得元素脱离文档流
float:left;
position:absolute/fixed;
3. 脱离文档流后的特性
优先级
important
权重
顺序
.content > div.one.two{ 0031
color:teal;
}
.content > div:first-child{ 0021
color:red ;
}
.content > div:nth-child(1){ 0021
color:orange;
}
.content > div.one{ 0021
color:pink;
}
#box { 0100
color:blue;
}
box
svn
动画
- 定义动画帧
@keyframes 动画名称 {
from {
left:0;
}
to {
left:1600px;
}
}
=》
@keyframes 动画名称 {
0% {
left:0;
}
…
100% {
left:1600px;
}
}- 引用动画
animation-name:
动画名称
animation-duration:3s;
一次动画持续时间
animation-iteration-count
2/infinite
动画重复的次数
animation-timing-function
linear/steps()
animation-fill-mode
动画最后一帧的填充样式
forwards
backwards
both ?
animation-direction
动画方向
alternate-reverse
reverse
alternate
animation-delay:
延迟
animation-play-state:
动画状态
running; - 第三方css动画库
animate.css
如何应用第三方库css/js【iconfont fontawesome animate.css】：
1. 模块用 npm install xxx
2. 本地下载 animate.css/iconfont.css
3. cdn 别人吧代码管理在别人的服务器（cdn）上,我们在线应用
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css
- 引用动画
变形
transform:变形函数;
变形函数：
scale(2)
rotate(45deg);
rotateX(45deg);
rotateY(45deg);
rotateZ(45deg);
skew(45deg)
skewX(45deg)
skewY(45deg)
translate(300px)
translateX(300px)
translateY(300px)
过渡
transition
transition-property 属性
transition-duration 持续时间
transition-timing-function 时间曲线函数
transition与animation的区别：
1) transition表示某些属性的过渡
width:100px;
width:200px;
width:100px -> 200px 过渡
transition-property:width;
transition-duration:2s;
transition-timing-function:linear;
不需要定义关键帧
2) transition用于表示简单的动画，需要触发（:hover）
媒体查询
不适用于大型的电商网站
适用于网页html结构相同，但是需要在不同设备上显示不同的布局
@media
京东商城 newbalance中国商城
pc index_pc.html index.html
pad index_pad.html index.html
phone index_phone.html index.html
||
针对不同终端显示不同布局
you.163.com
过滤：
判断用户设备
-重定向->
pc you.163.com index_pc.html
mobile m.you.163.com index_mobile.html
newbalance.com.cn/
样式自适应各种屏幕