本文已参与「新人创作礼」活动，一起开启掘金创作之路。
目录
一.学前基础
1.简介
层叠式样式表 Cascading Style Sheet
css语言由选择器和键值对构成
一些规范
1.往往在冒号后面打一个空格，如color: red;
2.选择器和大括号之间保留一个空额。
2.CSS的三大特性
层叠性
编辑
编辑
继承性
编辑 使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的某些样式，如text-，font-，line-这些开头的和color，高度内外边距等不会继承。
行高的继承
编辑
编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
color:pink;
font:18px/1.5 'Microsoft YaHei';
}
div{
font-size: 20px;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是p</p>
</body>
</html>
优先级
通过不同选择器选择到同一个元素，如果设置了相同的属性，那么执行哪一个需要看选择器的权重。优先执行权重大的。
编辑
编辑
注意1：
<style> .one{ color: pink; } p{ color:red; } </style> <div class="one"> <p >我是p</p> </div>
这里会显示红色，因为虽然.one是类选择器但是继承关系，优先级小于元素选择器。
不管父元素的权重多高，继承到子元素都是0，所以即使pink后面加了!important，样式也算是p继承的，也算是0，还会显示红色。
注意2：
给body指定color样式，在color中写个a标签，在浏览器中a还会显示蓝色，因为a标签就默认给文字定义了蓝色，元素选择器优先级大于继承优先级。
权重的叠加
复合选择器会有权重叠加的问题
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul li{ color: red; } li{ color:pink; } </style> </head> <body> <ul> <li>我是li</li> </ul> </body> </html>
显示红色，ul权重是0001，li权重是0001，复合选择器的权重就是0002。
注意不会产生进位。
3.Emmet语法
快速生成HTML结构语法
快速生成 ul>li
快速生成div+p
快速生成.nav，这种方式默认生成带class的div
想要生成别的带class的标签可以用标签名.类名
如p.box生成
带id的用法就是将.换成#
想要生成的类名或id名有顺序
.box$等于
.box$*1等于
.box$*2等于
在生成的标签里面默认显示几个文字
div{我是div}等于
我是div
div{$}*2等于
12
CTRL+alt+l 格式化文档
4.元素的显示模式
什么是元素显示模式
网页的标签很多，在不同的地方会用到不同类型的标签，元素的显示模式就是元素以什么方式进行显示，比如div独占一行，span一行可以放多个。
分类
块元素
常见的块元素：
..
，
,
,,
,
特点:
1.独占一行
2.高度，宽度，外边距，内边距都可以控制
3.宽度默认是容器（父级）的100%
4.是一个容器及盒子，里面可以放行内或块级元素
注意：
1.文字类的元素不能使用块级元素
2.
等标签主要用于存放文字，因此
里面不能放块级元素，特别是不能放div
行内元素
常见的行内元素:,,,,,
,,,,特点：
1.一行可以显示多个行内元素
2.高，宽直接设置是无效的
3.默认高度是本身内容的高度
4.行内元素只能容纳文本或其他行内元素
注意：
行内块元素
,, 它们同时具有块元素和行内元素的特点
编辑
小结
编辑
元素显示模式转换
一个模式的元素需要另外一种模式的特性，比如标签a增大触发范围。
编辑
但a标签是行内元素，不能设置宽和高，需要转换成块级元素去设置。
display:block;//转换为块级元素 display:inline;//转换为行内元素 display:inline-block;//转换为行内块元素
二.选择器
可以分为基础选择器和复合选择器两大类
1.基础选择器
标签选择器
标签名作为选择器
类选择器
1.标签需要设置class属性，通过.类名来选择
2.可以使用多类名，即一个标签的class可以设置多个类名，不同类名之间用空格来间隔。
如
有些标签修改的属性当中有的相同，有的不同，相同的部分可以提取出来，在一个类选择器下修改属性，可以减少代码量。
id选择器
1.标签需要设置id属性，通过#id名来确定
2.id的值是唯一的。
3.id选择器和类选择器最大的不同在于使用次数上。类选择器能作用于多个标签，id选择器只能作用于一个标签。
4.类选择器在修改样式时用的最多，id选择器一般用于页面唯一性的元素上，和js搭配使用。
通配符选择器
*能选择所有的标签
2.复合选择器
复合选择器就是基础选择器的组合。
后代选择器/包含选择器
写法：外层标签+空格+内层标签
比如ol和ul中都要li，如果要选中ol中的li，就可以用后代选择器了
后代包括儿子，孙子，一直往下都可以被选中。
如果是孙子就可以这样选择 父标签+空格+儿子标签+空格+孙子标签
也可以将标签名替换为类选择或者id选择
子选择器
只能选择作为某元素最近一级子元素，就是选亲儿子。
用大于号。元素1>元素2
并集选择器
通过逗号，分割
然和形式的选择器都可以作为选择器的一部分
将熊大熊二改为粉色，小猪一家改为粉色
编辑
编辑
伪类选择器
用于向某些选择器添加特殊效果。
用冒号:开头如:hover :first-child
链接伪类选择器
编辑
input:focus 选取获得焦点的表单元素，焦点就是光标一般在input类表单中才能获取。
注意事项
为了确保生效，要按照:link,:visted,:hover:active的顺序声明。
记忆：lvhao lv的钱包好
通常这样使用
<style> a{ color:gray; text-decoration: none; } a:hover { color:blue; text-decoration: underline; } </style>
复合选择器总结
![]( "点击并拖拽以移动")
编辑
三.样式
1.字体文本样式
font-family 设置字体
注意：
1.一般情况下如果有空格隔开的多个单词组成的字体，要加单引号。
2.这个属性后面可以写好几个值，解析时会依次看哪个字体电脑可以使用，如果不能用就往下判断。
font-size 设置文字大小
注意：
1.可以以body为选择器修改字体大小，但标题标签的字体大小不会改变，标题标签的字体大小需要单独指定。
font-weight 设置字体粗细
bold：加粗
bolder：特粗体
lighter：细体
number：没有单位，用数字100-900表示，默认400是正常状态，等价于normal，700等同于bold。
font-style 设置文本的风格如斜体
编辑
字体复合属性
可以更节约代码
编辑
如果这四个属性只想写一部分，必须有font-weight和font-family
即font:700px '黑体';如果用font但只设置了weight属性是不起作用的。
没有字号和没有字体时就不能采用连写的方式。
color 定义文本颜色
编辑
text-align 设置元素内文本内容水平对齐方式
编辑
如果想要img图片居中，给img设置text-align是不行的，先给img图片加一个p父标签，再给p标签设置居中。
text-decoration 添加到文本的修饰 可以是下划线，删除线，上划线
编辑
可以用来去掉超链接的下划线，text-decoration：null；
text-indent 指定文本的第一行缩进，通常将段落首行缩进
编辑
编辑
2em就是缩进两个字的大小
line-height 设置行间距（行高），控制文字行与行之间的距离
编辑
当改变行间距，文本高度不变，上下间距变大。
文字阴影
编辑
编辑
div{ width: 200px; height: 100px; font-size: 30px; text-shadow: 5px 5px 20px rgba(0,0,0,0.8); }
2.背景样式
可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等
background-color
1.transparent:透明
2.给定一个颜色
background-image
1.null
2.url(相对地址或绝对地址)
background-repeat
背景平铺 沿着x或y方向重复显示背景图片 默认情况下，设置一个背景图片是会平铺的。页面元素既可以加背景图片也可以加背景颜色，背景图片会覆盖背景颜色。
1.repeat
2.no-repeat
3.repeat-x
4.repeat-y
background-position
改变图片在背景中的位置，准确的说是在容器中的位置。
编辑
如果是方位名词，background-position：top，center和background-position：center,top是等价的，都是top和bottom是控制上下的，right和left是控制左右的，只有center可以控制两个方向，所以可以根据关键字来识别是对应哪个方向的。如果只指定一个参数，另一个默认是center。
如果参数值是精确单位，那么第一个参数是x，第二个是y。
如果只指定一个参数，另一个默认是center。
如果参数是混合单位，既有方位名词，又有精确单位，那么第一个参数一定对应x，第二个参数一定对应y。
background-attachment
属性设置背景图像是否固定或者随着页面其余部分滚动，后期可以做视差滚动的效果
编辑
编辑
背景的复合写法
将这些属性简写在同一个属性background中，节省代码量，没有特定书写顺序，一般习惯约定顺序为
编辑
背景的应用
应用1
编辑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h3{ width: 200px; height: 40px; background-color:whitesmoke; font-size: 14px; font-weight: 400; line-height: 40px; background-image:url(../images/logo.png); text-indent: 5em; background-repeat: no-repeat; background-position:left; } </style> </head> <body> <div> <h3>成长守护平台</h3> </div> </body> </html>
应用2
让超大背景图居中显示
<style> body{ background-image: url(""); background-repeat: no-repeat; background-position:center top; } </style>
应用3
背景颜色半透明
编辑
rgba分别是 red，green，blue，alpha，里面内容不会受到影响，比如文字不会受到透明度和颜色的影响。
小总结
编辑
3.列表样式
删除无序列表前面的圆点
编辑
四.布局
1.盒子模型
编辑
盒子由边框，外边距，内边距，实际内容组成。
编辑
border 边框
编辑
编辑
编辑
常用dotted点状，dashed虚线，solid实线
border-collapse:collapse;合并相邻的边框
比如在表格中 每个td都是一个盒子，td的边框会合到一起，显得更粗，上面这行代码会消除这个情况。
边框的复合写法
编辑
边框属性分开定义
编辑
注意：
边框会影响盒子的大小。比如设置盒子的width和height都是100px，设置了10px的border，那么这个盒子的大小宽和高就都是120px
padding 内边距
边框与内容之间的距离，内容默认是紧贴到边框上的左上角。
编辑
内边距的复合写法
编辑
注意
1.padding影响盒子的实际大小
比如盒子是200px200px，上下左右加了20px的内边距，那么盒子的大小就会变成240px240px
2.用padding时，通常增加了padding大小，会相应的减小width和height的大小来保证盒子大小不变。
3.如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小。比如div中放了一个p标签，div标签设置宽高为300px，p标签没有设置宽高，如果给p设置padding为30px，那么p的盒子就是300px*60px，因为如果不指定宽度，就会默认等于父类的宽度。如果不指定高度，默认高度为0。也就是说p宽度本来就是300是继承的父标签的，但宽度没有设置100%，再给它设置padding，p的宽度还是300px，如果给宽度设置100%，那么p的宽度就会变成360px。
margin 外边距
控制盒子与盒子之间的距离
编辑
margin不会改变盒子的大小。
总结
margin指的是什么？
1.与父级元素边框的距离
2.与同级元素边框的距离
3.默认情况下，块级元素垂直方向上的外边距重叠，取最大值
比如两个并列的div，同时设置了margin:50px，那么这两个div之间的距离是50px，而不是100px
4.默认情况下，块级元素和行内元素垂直方向上外边距重叠，取最大值
5.默认情况下，行内元素水平方向上的外边距叠加。
比如两个并列的a标签，都设置了margin:50px，那么两个a就相隔100px
塌陷问题
编辑
只要有两个盒子嵌套，给子盒子设置外边距，就会出现塌陷问题，父元素会塌下来，距离等于给子元素设置的外边距的距离（如果父元素没有设置外边距的话），如果父元素也设置了外边距，塌陷的高度就是两者外边距的较大值 。
解决方案
可以为父元素定义边框 .father{ border :1px solid transparent}
可以为父元素定义内边距 .father{padding:1px}
可以为父元素添加overflow:hidden .father{overflow:hidden}
清除内外边距
网页元素很多都带有默认的内外边距，比如ul的li，而且不同浏览器默认的也不一致，因此在布局前，首先要清除下网页元素的内外边距。
*{ margin: 0; padding: 0; }
注意:行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换成块级或行内块元素就可以了。
圆角边框
编辑
编辑
设置圆角
当length为正方形宽度一半时，盒子就会变成圆形。
下面是原理图
编辑
也可以设置
border-radius:50% 意思是盒子宽高的一般
圆角矩形
编辑
div{ width: 200px; height: 100px; background-color: pink; border-radius:50px; }
也可以分别设置四个角
border-radius: 20px 30px 40px 50px;
也可以写三个值，两个值
也可以单独给每个角设置
编辑
盒子阴影
编辑
div{ width: 200px; height: 100px; background-color: pink; box-shadow: 10px 10px 10px 10px rgb(0,0,0,0.3); }
编辑
第一个值设置正值阴影就往右，设置负值阴影就往左。x轴
第二个值正值往下，负值往上。y轴
第三个值表示虚实效果，数值越大越模糊。
第四个值表示影子大小，值越大影子面子越大。
第五个值是内外阴影，默认是外阴影，inset是内阴影。
影子不会占用空间。
2.浮动
传统网页布局的三种方式（简单说就是盒子如何排）
- 标准流（文档流/普通流） 标签按照规定好的默认方式来排序。如块级元素可以独占一行，行内元素可以一行好多个。
- 浮动
- 定位
网页的布局要结合这三种方式才能完成
浮动介绍
语法
编辑
float属性创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动的特性
1.浮动元素会脱离标准流
脱离标准流的控制（浮）移动到指定位置（动）。
浮动的盒子不再保留原先的位置。也就是原先的位置可以被其他元素来占用了。
编辑
等车时骚气的Pink老师。飞起来了，原先的位置就被后面的占了。
2.浮动元素会一行内显示并且元素顶部对齐
如果一行显示不开，就会另开一行显示
3.浮动元素会具有行内块元素的特性
行内元素没有宽高，是由内容决定，所以不能手动设置行内元素的宽高，但给行内元素设置了浮动，就有了行内块元素的性质，也就是说可以设置宽高了。
所以行内元素想要给高度和宽度，除了转为行内块元素，还可以设置浮动。
原先是块级元素，设置浮动后也是行内块元素的特性，块级元素默认宽度是继承父亲的，设置了浮动后，默认宽度就由内容决定了。
4.浮动元素之间没有缝隙是紧挨着的。
如果想有缝隙，那么需要指定margin值。
浮动使用
浮动元素和标准流父级搭配使用
为了约束浮动元素的位置，网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
编辑
注意
1.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
先给三个盒子
编辑
给第二个盒子设置浮动
编辑
第一个盒子还是独占一行，第二个盒子浮动了，第三个盒子就向上移动了。
那么1，3盒子设置浮动，而2没有设置浮动是什么效果呢？
编辑
2盒子跑到了1盒子下面，3盒子不会影响到他前面标准流盒子，所以会排在下面。
清除浮动
没有设置浮动，黑色是footer
编辑
白色和橘色设置浮动
编辑
清除浮动（造成的影响）
编辑
父元素很多时候不方便给高度
浮动元素的父盒子在子元素数量确定的情况下可以给高度。
如果子元素的数量不确定就不能给高度了。
理想状态是让子盒子撑开父亲，有多少孩子盒子就多高。
但是子元素浮动后，如果不给父元素设置高度会出现问题
父元素的高度会变为0，因为盒子内没有标准流中的元素，并且会影响下面的标准流的盒子。因为他们会往上跑。
清除浮动的本质
本质就是清除浮动元素造成的影响。
如果父盒子本身有高度，则不需要清除浮动。
清除浮动后，父级元素会根据浮动的子盒子自动检测高度，父级就有了高度，就不会影响下面的标准流了。
清除浮动
编辑
方法1
在最后一个浮动元素后面加一个标签，设置这个标签的clear的属性为both。新添加的这个标签必须是块级元素。
编辑
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 600px; background-color: pink; margin: 0 auto; } .box1{ width: 230px; height: 100px; background-color: aliceblue; float: left;; } .box2{ width:250px; height: 100px; background-color: salmon; float: left; } .footer{ height: 100px; background-color: black; } .clear{ clear: both; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="clear"></div> </div> <div class="footer"></div> </body> </html>
方法2
给父元素设置overflow，属性 hidden，auto，scroll。
hidden缺点是无法显示溢出的部分。
方法3 ：after伪元素法
编辑
给父元素的添加class为clearfix就可以了，一个标签可以有多个类名通过空格隔开。
相当于格外标签法的升级版
方法4 双伪元素清除浮动
编辑
也是给父亲添加的CSS属性
总结
1.多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
2.清除浮动要满足的条件
- 父级没有高度
- 子盒子浮动了
- 影响下面布局了
3.定位
定位有什么作用？
可以让某个元素自由的在一个盒子内移动，并压住其他盒子。
定位组成
定位=定位模式+边偏移
定位模式指定一个元素在文档中的定位方式。
边偏移决定该元素的最终位置。
通过top,bottom,left,right四个属性。
定位模式
编辑
静态定位
元素默认的定位方式，意思就是无定位的意思。
静态定位按照标准流特性摆放位置，它没有边偏移。
position:static;
相对定位
相对定位元素在移动位置时，是相对它原来的位置来说的。跟浏览器和父元素没有关系。
position:relative;
原来的位置依然保留，下面的盒子不会跑上去，依然以标准流的方式对待它。
因此相对定位并没有脱标，典型应用是给绝对定位当爹的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background-color: pink; } .box2{ width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
编辑
绝对定位
绝对定位在移动位置时，是相对于祖先元素来说的。
position:absolute;
1.如果没有祖先元素或者祖先元素没有定位（标准流或浮动的盒子） ，则以浏览器为准定位（Document）。
2.如果祖先元素有定位（相对、绝对、固定），就以最近一级有定位的祖先元素为参考点移动位置，即如果父亲没有定位，而爷爷有定位，则以爷爷为参考来移动。如果父亲和爷爷都有，则以父亲为主。
3.绝对位置脱标，不占有原来的位置。
固定定位
将元素固定到浏览器可视区的某个位置，在浏览器滚动时，元素的位置不会改变。
position：fixed；
当浏览器最大化时，浏览器的可视窗口为
编辑
当变化浏览器窗口时，可视区也变化
编辑
1.元素在移动时，会根据可视窗口进行移动。
2.跟父元素没有关系。
3.不随滚动条的滚动而滚动。
4.固定定位不再占有原先位置
固定定位也是脱标的，固定定位可以看作是特殊的绝对定位，怎么特殊法呢？与父元素无关，永远参照浏览器。
粘性定位
粘性定位可认为是相对定位和固定定位的混合。
编辑
编辑
定位模式的应用
子绝父相
编辑
父亲不能加绝对定位，加了绝对定位是不占有原来位置的，那么下面的元素会上去。
将图片固定到版心右侧
编辑
编辑
定位的叠放顺序
在使用定位时，可能会出现盒子的重叠情况。
可使用z-index控制盒子的前后次序（z轴）
编辑
定位的应用
绝对定位的盒子居中
正常标准流的盒子可以通过margin：0 auto 实现水平居中
但是加了定位的盒子不能通过这句代码实现了，这句代码对加了定位的盒子没有效果。
position: absolute; /*父容器宽度的一半*/ left: 50%; /*设置为盒子宽度的一半让盒子再往左走100px，不能设置margin-right：100px*/ margin-left: -100px; width: 200px; height: 200px;
垂直居中也同理，设置top:50%. margin-top:-100px。
固定定位也可以这样设置。
定位的特性
编辑
3.脱标的盒子不会触发外边距塌陷。
所以浮动，绝对定位（固定定位）元素不会触发外边距合并。
定位的拓展
编辑
五.其他
1.一些需要注意的点
1.宽度继承
盒子模型中，只给父元素设置了宽和高，子元素没有设置宽和高，那么子元素会继承父元素的宽度，但是高度是0.
不给box2设置宽度默认宽度会继承，设置了就是设置后的大小。
2.设置padding撑开盒子的问题
还是上面的代码
给box1设置宽高为100px。
不给box2设置宽高，给box2设置内边距padding，那么box2的宽度不挤出box1的padding最大值是50px。
给box2设置宽的话，假如设置宽为为20px，那么box2挤出box1的padding最大值是40px。
2.技能点
居中
让单行文字垂直居中
CSS没有提供文字垂直居中的代码，可以通过让文字行高等于盒子的高度来实现。
为什么可以实现呢？
编辑
行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，行高大于盒子高度，文字偏下。
块级元素居中
让块级盒子水平居中，需要满足两个条件：1.盒子必须指定宽度。2.盒子左右外边距设置为auto。
编辑
行内元素和行内块元素水平居中对齐，盒子内的文字居中对齐
给其父元素添加text-align：center。
width:100%的应用
让子元素和父元素的宽度一样宽，比如在div中放了张图片，给div设置了宽度，当图片放进去，发现撑开了盒子，这时候给图片设置width：100% ，图片就和父元素盒子一样宽了
隐藏
1.设置display:none;
隐藏的元素所占的位置也没了，下面的元素会上去
再通过display:block来显示元素
2.设置visibility
编辑
扔占着原来的位置
3.设置overflow
对溢出的部分进行显示和隐藏
编辑
比如用一个盒子装文字，文字太多了挤出盒子一部分，那这一部分就是溢出的 。
编辑
scorll：显示滚动条来拖动显示
auto：若文字超出则显示滚动条，不超出不显示滚动条
