-@规则
- @charset 设置样式表编码
- @import 导入其他样式文件(模块化)
- @meida 媒体查询(移动端开发)
- @font-face 自定义字体
自定义字体
- 到www.iconfont.cn阿里妈妈图标库选图标放入购物车
- 下载代码,解压
- 将后缀为
.eot
.svg
.ttf
.woff
.woff2
的文件复制到项目中 - 打开压缩包中的html文件找到下面的@font-face代码和.iconfont代码复制到css文件中
- 修改@font-face代码url中的路劲为自己刚才3中文件的路径
- 根据解压包中html文件使用字体
选择器
常见选择器
- id 选择器,每个 id 只能对应一个标签, id 是一对一的关系
- class 选择器,多对多的关系
- 标签选择器
- 通配符选择器
- 属性选择器
选择器权重
!important
Infinity- 行间样式 1000
- id 100
- class|属性|伪类 10
- 标签|伪元素 1
- 通配符 0
组合选择器
-
父子选择器(空格分隔)
div span{}
-
直接子元素选择器(只选择下面一级的元素)
div>span{}
-
并列选择器(不能都是标签选择器)
div.num{}
-
分组选择器(多个标签相同操作)
div,span,p{}
-
组合选择器的权重
同一行权重相加(不管是并列,还是派生选择器)
-
权重相同
相同 css 文件;写在后面的其作用
不同 css 文件:先导入的起作用
-
子节点选择器
.mid_panel>div:nth-of-type(5){ /*选中 mid_panel 下第5个div子节点*/ }
hover
- hover 本身有权重,只有权重大的时候才能其作用
- hover 默认修改本身元素样式,可以在后面添加子元素修改子元素样式
伪元素
-
:first-line
用于设置文本首行样式
-
:first-letter
用于设置文本首字母样式
-
:before
元素内容前插入新内容
-
:after
元素内容之后插入新内容
-
:first-child
第一子元素
/*选中伪元素*/
元素::after{
content: "内容" /*伪元素默认为行级元素*/
}
布局
层模型
position
-
absolute
脱离文档流进行定位,根据最近的有定位的父级进行定位,如果没有,就相对于文档定位(一般用于定位)
-
relative
保留原来位置进行定位,相对于自己原来的位置进行定位(一般用于父级参照物),不会使元素脱离文档流
-
fixed
固定定位,把元素固定到浏览器某个位置,不会随着浏览器滚动为改变
-
static(默认)
正常文档排列方式
盒模型
-
标准盒模型
总宽度 = border(左右) + width + padding(左右)
总高度 = border(上下) + height + padding(上下)
- 盒子壁 border
- 内边距 padding
- 盒子内容 width * height
- 外边距 margin(margin 不算到盒子大小上)
-
怪异盒模型(IE盒模型)
总宽度 = width
总高度 = height
内容区就是除去 padding 和 border 的区域
标准盒模型 --> 怪异盒模型: box-sizing = border-box
display
-
inline 行级元素
内容决定元素所占位置,不能通过改变 css 改变宽高span strong em a del
-
block 块级元素
独占一行,可以通过 css 改变宽高
div p ul li ol form address
-
inline-block
内容决定大小,可以改变宽高
img
这些属性可以通过 css 的 display 改变
注意:行级元素只能嵌套行级元素(a 标签不能套 a 标签)
块级元素能嵌套任何元素,但是(p 标签不能嵌套块级元素)
浮动
让元素站队,left 是从左排, right 是从右排,空间不够时换行
-
浮动流:浮动元素产生了浮动流
- 所有产生了浮动流的元素,块级元素看不到他们(块级元素会往上走)
- 产生了 bfc 的元素和文本类的属性的元素以及文本都能看到浮动元素
-
清除浮动流(利用伪元素选中逻辑最后)
父级元素::after{ content: ""; display: block; clear: both; //清除左右两边的浮动流(必须是块级元素) }
flex 弹性布局
为盒子模型提供最大的灵活性
-
基本使用
-
任何容器都可使用 flex 布局
.box{ display: flex; }
行内元素也能使用 flex 布局
display: inline-flex
webkit 内核浏览器,必须加上 -webkit 前缀
display: -webkit-flex;
注
设置 flex 布局后,子元素的 float、clear 和 vertical-align 属性将失效
-
-
基本概念
设置了 flex 布局的元素称为 flex container(容器),所有子元素称为 flex ite(项目)
-
容器属性
-
flex-direction:决定主轴方向(项目排列顺序)
-
row(默认)
-
row-reverse
-
column
-
column-reverse
-
-
flex - wrap:换行
默认情况下项目都排在一条线上,如果超出容器,则减少项目宽度,该属性定义如何换行
-
nowrap:不换行
超出容器时,缩小 item 的 main-size 或 cross-size
-
wrap:换行,第一行在上方
-
wrap-reverse:换行,第一行在下方
-
-
flex-flow:是 flex-direction 和 flex-wrap 的简写。默认值为 row nowrap
flex-flow: column wrap
-
justify-content:定义项目在主轴上的对齐方式
-
flex-start(默认)
-
flex-end
-
center
-
space-around
-
space-between
-
space-evenly
margin 指的是 item 的 margin
-
-
align-items
-
flex-start(默认)
-
flex-end
-
center
-
baseline
项目第一行文字基准线对齐
-
-
align-content
定义多根轴线对齐方式,若只有一根轴线,该属性不起作用
-
flex-start:与交叉轴起点对齐
-
flex-end:与交叉轴终点对齐
-
center
-
stretch(默认值):占满整个容器
-
space-between
距离关系请参照 justify-content
-
space-around
-
space-evenly
-
-
-
项目属性
-
order
定义项目排序顺序,数值越小,排列越靠前,默认为 0
-
flex-grow
定义项目放大比例,默认为 0 ,即如果存在剩余空间也不放大,如果所有项目 flex-grow 的属性都为 1,则它们等分剩余空间,如果一个项目为2,其他为1,则占据空间大1倍
注:如果没有剩余空间,怎么设置都没用
-
flex-shrink
定义了项目的缩小比例,空间不足时将项目缩小。默认为 1,各项目等比例缩小,0不缩小
-
flex-basis
分配多余空间之前,项目占据的主轴空间(main size)默认为 auto (即项目本来大小),也可设置为固定值,项目占据固定大小(设置了固定值,将不受 grow 和 shrink 的影响)
-
flex
flex-grow,flex-shrink,flex-basis 的简写
-
align-self
允许单个项目有与 其他项目不一样的对齐方式,可覆盖 align-items 属性,默认为 auto(继承父类元素属性)
-
grid 网格布局
将网页划分成一个个网格,可以任意组合不同的网格
flex是轴线布局,只能指定"项目"针对轴线的位置,可以看做是一维布局。flex通过项目的 flex 属性只能实现单行的栅格布局无法实现多行栅格布局
grid是将容器划分为"行"和"列",产生单元格,然后指定"项目"所在单元格,可以看作二维布局
-
容器属性
-
display: grid
使用grid布局
-
grid-templage-columns
grid-templage-rows
指定行与列构建网格
.container { 300px; height: 300px; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }
上述代码将容器分为三行三列的九宫格
也可以使用百分比
.container { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; grid-template-rows: 33.3% 33.3% 33.3%; }
repeat()函数
重复写同样的值的时候可以使用该函数,与上面的效果是一样的
grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%);
grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px);
auto-fill关键字
单元格大小固定,容器大小不确定的时候,如果希望每一行每一列容纳尽可能多的单元格
.container { display: grid; grid-template-columns: repeat(auto-fill, 100px); }
fr关键字
比例关系
.container { display: grid; grid-template-columns: 1fr 1fr; /*比例为1:1*/ }
fr与绝对单位结合使用
.container { display: grid; grid-template-columns: 150px 1fr 2fr; }
minmax()函数
范围
/*列宽不大于1fr,不小于100px,基于单元格里面的内容*/ grid-template-columns: 1fr 1fr minmax(100px, 1fr);
auto关键字
浏览器自己决定长度
/*等于该行的剩余宽度*/ grid-template-columns: 100px auto 100px;
网格布局中加入网格线名称
用
[]
指定每一根网格线的名字,方便后面的使用.container { display: grid; grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; }
-
grid-row-gap
grid-column-gap
grid-gap
设置行列间距
.container { grid-row-gap: 20px; grid-column-gap: 20px; /*等价于 grid-gap: 20px 20px*/ }
grid-gap是上面两个属性的合并简写属性
grid-gap:<row-gap> <column-gap>
如果只写一个值那么后面那个值等于前面一个值
-
grid-template-areas
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: 'a b c' 'd e f' 'g h i'; }
划分出来的九个区域分别命名为
a
到i
grid-template-areas: 'a a a' 'b b b' 'c c c'; /*九个单元格划分为 a,b,c 3个区域*/
注意:区域的命名会影响网格线的命名,每个区域的起始网格线会自动命名为
区域名-start
,终止网格线自动命名为区域名-end
-
grid-auto-flow
属性放置顺序
-
column(默认) 先行后列
-
row 先列后行
-
row dense 某些项目指定位置后剩余元素怎么放置
-
column dense
-
-
justify-items
align-items
place-items:<justify-items> <align-items>
单元格内容的水平垂直位置
-
start
-
end
-
center
-
streth(默认) 拉伸,占满整个单元格
-
-
justify-content
align-content
place-content:<justify-content> <align-content>
整个内容区域在容器里面的水平位置
- start
- end
- center
- streth
- space-around
- space-between
- space-evenly
-
grid-auto-columns
grid-auto-rows
浏览器自动创建的多余网格的列宽和行高,当元素被定义在网格外时
#container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-auto-rows: 50px; } .item { font-size: 2em; text-align: center; border: 1px solid #e5e4e9; } .item-1 { background-color: #ef342a; } .item-2 { background-color: #f68f26; } .item-3 { background-color: #4ba946; } .item-4 { background-color: #0376c2; } .item-5 { background-color: #c077af; } .item-6 { background-color: #f8d29d; } .item-7 { background-color: #b5a87f; } .item-8 { background-color: #d0e4a9; grid-row-start: 4; grid-column-start: 2; } .item-9 { background-color: #4dc7ec; grid-row-start: 5; grid-column-start: 3; }
-
-
项目属性
-
grid-column-start
grid-column-end
grid-row-start
grid-row-end
通过单元格四周的网格线定义单元格的位置和大小
.item-1 { grid-column-start: 2; grid-column-end: 4; }
上面的代码指定一号项目的左边框是第二跟垂直的网格线,右边框是第四根垂直网格线
除了用下标指定还可以用网格线名称指定
.item-1 { grid-column-start: header-start; grid-column-end: header-end; }
span关键字
表示跨越的网格数
/*两个样式效果一样*/ .item-1 { grid-column-start: span 2; } .item-1 { grid-column-end: span 2; }
水平跨越两个网格
-
grid-column: <start-line> <end-line>
grid-row: <start-line> <end-line>
-
grid-area
指定项目放在哪个区域
.item-1 { grid-area: e; }
将 1 号项目放在 e 区域
-
justify-self
align-self
place-self:<justify-self> <align-self>
设置单元格内容的水平垂直位置,与
justify-items
用法完全一致但只作用于单个项目- start
- end
- center
- stretch
-
margin 的两个 bug
-
margin 塌陷
子元素相对于父元素的 margin-top 不起作用,子元素和父元素的 margin-top 会导致整体移动,取 margin-top的最大值。
解决:1、给父级加上 border-top
2、bfc: block format context
-
如何触发一个盒子的 bfc
- position: absolute
- display: inline-block
- float: left/right
- overflow: hidden
(使用哪个,具体分析)
-
-
margin 合并
正常来说两个元素的 margin 是分开计算的,即两个元素的距离 = margin1 + margin2
但两个块级元素的 margin 是合并的,距离 = max(margin1, margin2)
解决:(1) 将一个元素或两个元素都放进 bfc 的父级中(不推荐)
(2) 不解决,通过数学计算好距离(推荐)
文本类元素的特点
文本类元素包括 inline 和 inline-block
-
当两个文本之间有空格,换行符时,文本元素之间会有分隔符
每个 img 换行的话图片之间会存在一个分隔符,这是带有 inline 属性的标签都有的文字特征
- 所有 img 之间都不用空格和换行
- 将 img 标签改为 block
-
当文本元素里有文字后,后面的文字与该文字底对齐,没有文字就与容器底对齐
-
vertical-align: middle/top/bottom/px; 文本元素对齐线
顶部固定导航脱离文档流问题
设置了 fixed 会脱离文档流,下面的元素会往上走,可以设置 border 将元素挤下来(如果设置的是 padding 滑动条不会被挤下来)
滑动条出现在容器内部
设置属性 overflow: auto
CSS中常见的单位
- px ——像素、绝对单位
- pt ——磅,绝对单位
- em ——相对单位,相对于父元素字体大小
- rem ——相对根节点 html 字体大小计算,兼容性:chrome/firefox/IE9+
- vw ——视窗宽度,范围 0-100
- vh ——视窗高度
- vmin ——min(vw,vh)
- vmax ——max(vw,vh)
- in ——英寸,绝对单位
- ch ——数字0的宽度
position实现水平垂直居中
父级必须有定位属性
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%)
}
css初始化
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
vertical-align
图片或表单与文字垂直居中对齐(行内元素或行内块元素)
- 默认基线对齐
- middle:中线对齐
- bottom:底线对齐
- top:顶线对齐
相邻边框
可以看到两个相邻的边框会让边框变粗,这种变粗大多时候是不需要的
解决:margin负值的妙用
只需要给 margin-left
添加一个与边框大小相同的值即可,这样后面的盒子就会把前面的边框挡住
但如果我们给盒子设置hover样式的话,由于右边的边框被挡住了,所以就没有hover样式
解决:
- 如果每个盒子都没有相对定位,则给hover盒子设置相对定位
- 如果每个盒子都有相对定位,则给hover盒子设置更高的z-index层级
文字环绕效果
给左边的盒子设置 float:left
即可
text-align 实现布局
text-align能对盒子内的所有行内元素和行内块元素 实现居中、左、右布局
样式
伪元素使用自定义字体
content里面放入十六进制编码

-->e61a
.box::after{
content: 'e61a';
font-family: 'iconfont'!import;
}
write-space
- nowrap:不换行
background
-
background-image 设置背景图片
- url("图片路径")
-
background-repeat 图片不能铺满容器时是否重复出现
- repeat(默认重复)
- no-repeat
-
background-size 设置图片大小
- px px 直接设置宽高,也可以只设置宽,高按比例缩放
- % % 百分比设置宽高
- cover 图片按比例铺满整个容器(可能图片会丢失一部分)
- contain 图片按比例铺满整个容器(图片完整出现,多的地方留白)
-
background-position 图片在容器中的位置
- x y
- % %
- left top
- left bottom
- ...
- center center
-
渐变
线性渐变
- background-image: linear-gradient(方向,开始的颜色,结束的颜色)
- 方向: to bottom(默认);to right; to left ; to top
- background-image: linear-gradient(方向,开始的颜色,结束的颜色)
超出容器...
-
单行文本超出容器 ...
white-space: nowrap; /*不换行*/ overflow: hidden; /*溢出部分隐藏*/ text-overflow: ellipsis; /*溢出部分...代替*/
-
多行文本超出容器 ...
手动 ...
头部图标
-
制作 ico 图片
通过线上转为 ico 图片
-
将 ico 图片放进项目中
-
通过
<link rel="icon" href="icon图片路径">
图片代替文字
作用:当网络环境很差的时候,浏览器会屏蔽掉网页的 css 和 js 只加载 html ,通过图片代替文字,这不会影响网站的主要功能的实现
-
缩进 + 单行 + 超出隐藏
text-indent: 99999px; white-space: nowrap; overflow: hidden;
-
padding 撑开图片
height: 0; padding-top: 100px; overflow: hidden;
颜色
-
颜色的三种表示
-
直接写英文单词
red blue green
-
十六进制
#ff5000
#fff
(aabbcc -> 缩写abc) -
二进制
rgb(255,0,0)
-
-
透明度
-
rgba()
a: 0~1(0:完全透明 1:完全不透明)
-
opacity: 0~1
-
样式的继承
样式继承是指父类设置了样式,子类也会有样式(仅对于文字样式)
样式继承的优先级低于所有选择器的优先级,只有当元素没有设置样式的时候,样式继承才能起作用
圆角 border-radius
-
每个盒子有四个角
border-radius: 上左 上右 下右 下左
border-top-left-radius 设置左上圆角
-
圆角的值
px 该 px 为边的一半时也是一个圆
% 50% 表示一个圆
三角盒子
边角均分原理
-
等腰三角形
.triangle{ 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; border-left: 100px solid transparent; border-bottom: 0 solid transparent; }
-
直角三角形
.triangle{ 0; height: 0; border-top: 100px solid transparent; border-right: 50px solid #eee; border-bottom: 0 solid transparent; border-left: 0 solid transparent; }
遮罩层
我们写html页面是经常会有这种需求:点击一个按钮弹出一个框,这个框存在时不能点击其他地方,只有关闭这个框才能点击其他地方。这个时候就需要用到遮罩层
遮罩层就是利用一个长宽为浏览器长框的 div ,将这个div置于弹出框之下,其他元素之上,这个遮罩层与弹出框同步出现,这样弹出框出现的时候,遮罩层的存在使我们无法点击其他地方
-
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> /*遮罩层*/ .bgdiv{ background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; 100vw; height:100vh; opacity:0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; } /*弹出框*/ .contain{ 200px; height: 200px; z-index: 100; background: red; position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; } </style> </head> <body> <div id="app"> <button @click="state = !state">弹出</button> <div class="contain" v-show="state">弹出框</div> <div class="bgdiv" v-show="state"></div> </div> <script src="js/vue.js"></script> <script> let vue = new Vue({ el: '#app', data: { state: false }, methods: { } }) </script> </body> </html>
修改 placeholder 样式
input::-webkit-input-placeholder{
color: #eee;
...
}
css初始化
京东的初始化
* {
margin: 0;
padding: 0
}
/*设置不斜体*/
em, i {
font-style: normal
}
/*删除列表的点*/
li {
list-style: none
}
img {
/*照顾低版本浏览器,如果图片外面包含了链接会有边框的问题*/
border: 0;
vertical-align: middle
}
/*按钮鼠标变成小手*/
button {
cursor: pointer
}
/*删除a标签默认颜色和下划线*/
a {
color: #666;
text-decoration: none
}
/*a标签hover样式*/
a:hover {
color: #c81623
}
/*字体*/
button, input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif
}
body {
/*抗锯齿*/
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "5B8B4F53", sans-serif;
color: #666
}
.hide, .none {
display: none
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
图片模糊filter滤镜
/*blur是一个函数,小括号里面数值越大,图片越模糊,注意数值要加 px 单位*/
filter: blur(5px)
calc属性计算函数
calc(100%-20px)
精灵图
将网页中的一些小背景图整合在一张大图中,这样修只需要向服务器请求一次(缓解服务器压力)
通过 background-position
实现
往上往左移动为负值
角框
伪元素设置边框实现
动画
animation
与过渡相比:更多变化、更多控制、连续自动播放
元素可以添加多个动画(用逗号隔开)
.panrun{
animation: runpan 5s linear infinite; /*动画规则 动画时间 线性动画 无限循环*/
}
/*定义动画规则*/
@keyframes runpan{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
animation 是一个简写属性,用于设置六个动画属性
-
animation-name(必须)
规定需要绑定到选择器的 keyframe 名称
@keyframe
动画序列- 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列
- 在
@keyframe
中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果 - 动画使元素从一种样式组件变化为另一种样式的效果。可以改变任意多的样式任意多次数
- 关键词'from'和'to'等同于0%和100%
-
animation-duration(必须)
规定完成动画所花费的时间,以 s 或 ms 计,默认0
-
animation-timing-function
规定动画的速度曲线,默认'ease'
step速度曲线
step(10)
分步完成动画 -
animation-delay
规定在动画开始之前的延迟,默认0
-
animation-iteration-count
规定动画应该播放的次数,默认为1,infinite代表无限循环
-
animation-diretion
规定动画下一周期逆向播放,默认'normal','alternate' 逆播放
-
animation-play-state
规定动画是否正在运行或暂停。默认是'running',还有'pause'
-
animation-fill-mode
规定动画结束后状态,保持'forward';回到起始位置'backwards'
简写形式
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
不包含 animation-fill-mode
animation: move 2s linear 0s 1 alternate forwards
除了动画名称和持续时间必须写,其他都可以省略
Animate.js
transition
谁做过渡,给谁加这个属性
-
使用规范
transition: 要过渡的属性 花费时间 运动曲线 合适开始
-
过渡属性
宽度高度,背景颜色,内外边距都可以(多个属性逗号分隔)。如果想要所有的属性都变化过渡,写一个 all
-
花费时间
单位是秒(必须写单位)
-
运动曲线(可以省略)
默认ease
-
何时开始(可以省略)
默认
0s
-
-
EX
.box{ transition: width 1s, height 1s }
transform
2d转换,可以实现元素的位移,旋转,缩放
-
translate:移动
正值向右向下
负值向左向上
translate(x,y) translateX(n) translateY(n)
注:
- 不会影响其他元素的位置
- 可以使用绝对单位px,和百分比(相对于自身元素)
- 对行内标签没有效果
-
rotate:旋转
transform: rotate(ndeg)
设置中心点
.box{ transform-origin: left bottom; /*方位名词*/ transform-origin: 50% 50%; /*百分比*/ transform-origin: 50px 50px; /*像素*/ }
注:
- 单位是deg,代表度数
- 正值表示顺时针,负值代表逆时针
- 默认旋转中心点时元素的中心点
-
scale:缩放
transform: scale(x,y)
transform: scale(n)
等比例缩放注意:
- x,y是数字,不加单位,是倍数的意思
- 不会影响其他盒子
- 可以设置缩放中心点
-
2D转换综合写法
transform: translate() rotate() scale()
注:顺序会影响最终效果
3D转换
X轴:水平向右(右正左负)
Y轴:垂直向下(下正上负)
Z轴:垂直于屏幕(外正里负)
-
3D位移
translateX
translateY
translateX
translate3d(x,y,z)
-
3D旋转
rotateX
rotateY
rotateZ
rotate3d(x,y,z)
矢量
perspective:给父级添加这个属性才能产生3D效果(近大远小),模拟人类眼睛,该属性的值就是这只眼睛到屏幕的值,值越大平面成像越大,值越小平面成像越小
transform-style:控制子元素是否开启三维空间。transform-style: preserve-3d
案例
- 图片放大效果
- 边框重叠效果
- 进度条效果
- 图片模糊效果
- 三角形效果
- 热点图效果
- 打字机效果
- 奔跑效果
- 翻转盒子
- 3D导航栏
- 旋转木马照片墙