一、初始CSS

01.css概念

什么是css？
cascading style sheet 层叠样式表单（具有层叠性）
CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。

02.css书写样式：

1.行内样式

行内样式：是指写到行里面的样式，且必须写在标签里，属性间用“；”号隔开

例：<h1 style="color: red ; font-size: 24px;">123456</h1>

2.页内样式

页内样式：指页面内部的样式，把样式写到style标签里面，<style>标签放哪都行，但是我们一般习惯把他放到<head>标签里面

只要不是行内样式都需要使用选择器

3.外部样式

对于html来说，css文件就是外部资源需引入<link>

<link rel="stylesheet" href（地址）="./04-css外部样式.css">

引入多个css并在多个css中都对同一个标签描述，这种情况称为样式污染，只会加载出最后一个。

CSS引入方式：

内部式：CSS 写在style标签中, 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
外部式：CSS 写在一个单独的.css文件中, 提示：需要通过link标签在网页中引入
行内式：CSS 写在标签的style属性中, 提示：之后会配合js使用

CSS常见三种引入方式的特点区别：

03.选择器

选择器必须都写在<style>标签里

常用选择器
通配符选择器（通用）*{ }	经典代码：*{ margin:0;padding:0; }
标签选择器（元素）	标签名{ }
类选择器	. 类名{ }
ID选择器	*id名{ }
ID和Class(类)的区别：ID名字唯一 Class不唯一

关系选择器
后代选择器（所有后代）	选择器选择器{ } 特点：选中后代所有
子代选择器（儿子）	选择器>选择器{ } 特点：选中儿子
兄弟选择器	选择器+选择器{ } 选中div后面紧挨的p兄弟
兄弟选择器	选择器~选择器{ } 选中div后面紧挨着的所有p兄弟

联合选择器
并集选择器	选择器 , 选择器
交集选择器	选择器 . 选择器
排除选择器	ul li:not( . item1)排除类名为item1的标签
交集选择器：

并集选择器：

属性选择器
[ id ]	只要有id就会被选中
[ id ][ class ]	id和class必须都有才会被选中
[ id ] , [ class ]	id或者class至少有一个就会被选中

属性限定
[ id='box1' ]	id为box1的被选中
[ class ^='b' ]	以b开头的class被选中
[ id $ ='a' ]	以a结尾的id被选中
[ id ='a' ]	id中包含a的被选中
[ class~='item2' ]	~=表示其中只要有一个就会被选中

伪类选择器

伪类和普通的类的区别：并不是真实存在的一个类

a标签target：_self 当前页面跳转 ; _blank 新页面跳转

1.链接伪类选择器

点击后颜色： a{ color: pink; }

收到浏览器兼容性影响： a : link{ color: cyan; } a : visited{ color: yellow; }

鼠标放上去时候的颜色： a : hover{ color: greenyellow; }

鼠标按压后的颜色： a : active{ color: turquoise; }

动态伪类

a:hover 鼠标挪动到链接上(重要)
除了a元素，:hover也能用在其他元素上
选中鼠标悬停在元素上的状态，设置样式
伪类选择器选中的元素的某种状态 总结：

2.位置伪类选择器

ctrl +z 撤销 ; ctrl+y 回退撤销

1）标签 : nth-child( )

例： div: nth-child( 1 ) { color: red; } 和div同级第一个div会变色否则不变色

满足条件两个：位置第一位且是div元素

/* div: nth-child( odd ) { color: red; } */

odd是指奇数 ; 满足条件：是div 位置是奇数位

/* p: nth-child( even ){ color: red; } */ 偶数

/* div: nth-child( 2n+1 ){ color: red; } */ 奇数

/* div: nth-child( 2n ){ color: red; } */ 偶数

/* div: first-child{ color: red; } /* 第一个

/* div: last-child{ color: yellow; } /* 最后一个

2）标签 : nth-of-type( )*

 把同类所有标签看成一个整体

例： /* div: nth-of-type ( 1 ){ color: red; } */

和div同级的所有div中位置排**第一个**的div会变成红色

/* div: nth-of-type ( odd ){ color: yellow; } */

和div同级的所有div中位置是**奇数位**的div会变成黄色

/* div: nth-of-type ( even ){ color: red; } */

和div同级的所有div中位置是**偶数位**的div会变成黄色

/* div: first-of-type { font-size: 24px; } */

和div同级的所有div中位置是**第一个**的div会变成黄色

3.input 伪类选择器（输入框）

1）获取焦点后状态

/* input: focus{ width: 300px; height: 300px; Background:chartreuse; } */

2）禁用后状态

< input type="text" name="" id="" disabled >

/* input: disabled{ background: skyblue; } */

3）可输入状态

/* input: enabled{ background: pink; } */

伪元素选择器

伪元素都是女标签，如果想用 after 或 before 必须写上一个属性

/* :: after */

类名 :: after{

content: '热' ;

display: inline-block; 变性手术（变成行内块元素）

width: 20px;

height: 20px;

background: #FF6600;

color: white;

text-align: center; 居中

border-radius: 5px; 圆角

margin-left: 10px; 与文字之间的距离 } 文字后面会出现一个带背景的热字

/* :: before */

类名 + :: befor 文字前面出现

/* 选中第一个字 */

类名 :: first-letter { font-size: 40px; }

/* 选中第一行 */

类名 :: first-line{ background: #FF6600; }

CSS颜色的表示方法： 255相当于100% ; 数字1相当于100%（完全不透明）

Chrome浏览器开发者工具：

打开Chrome调试工具，方式一：右键 – 检查，方式二：快捷键 – F12
快捷键：ctrl+ 可以调整页面或者调试工具的字体大小
可以通过删除某些元素来查看网页结构
可以通过增删css来调试网页样式

04.字体相关属性

1、font-size 设置字体大小

.box1{ font-size: 14px; /* 单位为像素 */ }

.box2 { font-size: 200%; /* 百分比相对于父级 */ }

.box3 { font-size: x-small; }

2、font-style 设置字体倾斜

.box4 { font-style: italic; }

.box5 { font-style: normal; }

3、font-weight 设置字体粗细

.box6 { font-weight: normal; }

.box7 { font-weight: bold; }

.box8 { font-weight: 800; }

font-weight用于设置文字的粗细（重量）
常见的取值：normal：等于400
常见的取值：bold：等于700
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
strong、b、h1~h6等标签的font-weight默认就是bold
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多

4、font-family 设置字体格式

.box9 { font-family: ' 黑体 ' ; }

5、font-color 设置字体颜色

.box10 { color: red; }

.box11 { color: #ccc; }

.box12 { color: rgb(21, 219, 18); }

6、a 指透明度

.box13 { color: rgba(41, 18, 216,.9); }

7、line-height 行高

div { width: 200px; height: 100px; border: 1px solid red; }

.box8 { margin: 0; padding: 0; line-height: 100px; }

行高的严格定义是：两行文字基线（baseline）之间的间距
基线（baseline）：与小写字母x最底部对齐的线

区分height和line-height的区别：

height：元素的整体高度
line-height：元素中每一行文字所占据的高度 font：
font是一个缩写属性
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写
font-style font-variant font-weight font-size/line-height font-family
font-style、font-variant、font-weight可以随意调换顺序，也可以省略
line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略

05.文本相关属性

1、text-decoration

.box1 { text-decoration: underline; /* 下划线 */ }

.box2 { text-decoration: line-through; /* 中划线 */ }

.box3 { text-decoration: overline; /* 上划线 */ }

2、text-align 文本位置

.box4 { text-align: left; }

.box5 { text-align: center; }

.box6 { text-align: right; }

3、text-indent 首行缩进

.box7 { text-indent: 2em; }

/* 1em就表示当前大小的文字1个位置 */

text-indent用于设置第一行内容的缩进
取值：数字+px
取值：数字+em（推荐：1em = 当前标签的font-size的大小）
text-indent: 2em; 刚好是缩进2个文字

{text-indent:-999999px;} 文本可以跑到浏览器外面也可以设置height=0 加上 overflow:hidden，也可以让文本看不见

4、text-transform 文字大小写转换

text-transform用于设置文字的大小写转换
text-transform取值：capitalize(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
text-transform取值：uppercase(大写字母)将每个单词的所有字符变为大写
text-transform取值：lowercase(小写字母)将每个单词的所有字符变为小写
text-transform取值：none：没有任何影响

5、文字间距

默认是0，可以设置为负数 1）字符之间的距离 .box9 { letter-spacing: 20px; }

2）单词之间的距离 .box10 { word-spacing: 20px; }

6、text-shadow 文字阴影

.box11 { font-size: 30px; textshadow:10px 10px 10px red,-10px -10px 10px #000; } 表示两个方向的阴影

（ 10px 10px 10px 第一个10px表示x轴向右移；第二个10px表示y轴向下移；第三个10px表示z轴向外，越来越模糊。）

1）text-shadow用法类似于box-shadow，用于给文字添加阴影效果

2）以通过一个网站测试文字的阴影: html-css-js.com/css/generat…

10px 10px 10px： 右下方阴影； -10px -10px 10px： 左上方阴影

凸起 .box { text-shadow: -1px -1px 2px #fff,1px 1px 2px #000; }

凹陷 .box { text-shadow: -1px -1px 2px #000,1px 1px 2px #fff; }

7、text-align

text-align: 直接翻译过来设置文本的对齐方式\
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置\
取值：left 左对齐
取值：right 右对齐
取值：正中间显示
取值：两端对齐

06.css继承性

如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性
如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高)
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性
这些不用刻意去记, 用的多自然就记住了
可以通过调试工具判断样式是否可以继承
好处：可以在一定程度上减少代码
应用场景：可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
应用场景：直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

继承失效的特殊情况：

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
a标签的color会继承失效，其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
h系列标签的font-size会继承失效，其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

07.css层叠性

设置样式特性：

给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

1、位置不同选择器相同

/* 行内 > 内部 > 外部 */

/* 内嵌式 > 内联式 > 外联式 */

/* id > 类 > 标签 */

/* ! important 优先级别最高 */

2、当组合选择器时使用权重

/* id 100 */

/* 类 10 */

/* 标签1 */

<-- 啥是层叠性 --> <-- 图层 -->

<-- 我们看到的页面实际上就是覆盖在最上面的那一层 -->

<-- 层叠性主要体现在选择器的优先级别 -->

08.变性手术

元素的类型：

块级元素（block-level elements）: 独占父元素的一行
行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示
行内块级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示

display:; 对标签类型的控制

/* 代码换行产生的间隙来源于字体默认的大小 */ 去除 html { font-size: 0 ; }

1.转成行内块元素(人妖）

span { display: inline-block; }

2.转成行内元素（女）

ul li { display: inline; font-size: 14px ; }

3.转成块状元素（男）

i { display: block; font-size: 14px ; }

4、编写HTML时的注意事项：

块级元素、inline-block元素

2. 行内级元素（比如a、span、strong等）

5、居中

元素隐藏方法：

方法一: display设置为none，元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样)
方法二: visibility设置为hidden，设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间
方法三: rgba设置颜色, 将a的值设置为0，rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素
方法四: opacity设置透明度, 设置为0，设置整个元素的透明度, 会影响所有的子元素

09.溢出处理

1.overflow 超出部分处理

/* 默认情况下我们对盒子内容的超出部分不做任何处理的 */

/* 处理超出部分 overflow */

1) 隐藏

/* overflow: hidden; */

2) 产生滚动条

/* overflow: scroll; */

对滚动条的处理

/* div::-webkit-scrollbar{ width: 20px; }

div::-webkit-scrollbar-track { background-color: black; } */

3) auto

/* overflow: auto; */

4) visible

/* 默认值超出部分不处理 */

5) inherit

/* 继承父级的 */

p{ width: 50px ; height: 50px;border: 1px solid yellow; overflow: inherit; }

2、word-break 拆分单词

/* 默认情况下我们内容会换行并且是单词完整性优先 */

1）word-break: normal;

/* 表示正常 */

2）word-break: keep-all;

/* 保证单词的完整性 */

3）word-break: break-all;

/* 优先填满一行遇到单词直接分割 */

4）word-break: break-word;

/* 优先保证单词完整性 */

3、White-space 控制是否换行

/* wrap有换行的意思 */ div{ white-space: nowrap; }

/* 超出部分显示三个点 */

div{ line-clamp : 2 ; 2表示两行

overflow : hidden ;

text-overflow : ellipsis ;

display : -webkit-box ;

-webkit-box-orient : vertical ;

-webkit-line-clamp : 2 ; }不会可以去百度搜，不需要记

10.CSS样式不生效技巧

选择器的优先级太低
选择器没选中对应的元素
元素不支持此CSS属性，比如span默认是不支持width和height的
浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
被同类型的CSS属性覆盖，比如font覆盖font-size
充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

二、盒子模型

01、初始盒子模型

生活中的盒子：

每个元素都是盒子：

< style >

div { width:50%; height: 100px;

/* 最小宽度 */ min-width: 600px; 拖拽不会随意改变大小

/* 最大宽度 */ max-width: 1000px;

border: 1px solid red; /* 边框圆角背景内外边距 */

border-radius：10px; /* 圆角 */

background: yellow; /* 背景 */

padding: 10px; /* 内边距 */

margin: 0px; /* 外边距 */}

< /style > 盒子模型(Box Model)的组成：

内容（content），元素的内容width/height
内边距（padding），元素和内容之间的间距
边框（border），元素自己的边框
外边距（margin），元素和其他元素之间的间距
背景（background），分背景颜色和背景图片

浏览器的开发工具中的盒子：

内容 – 宽度和高度：

设置内容是通过宽度和高度设置的，对于行内级元素来说, 设置宽高是无效的
min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时, 可以设置最大宽度和最小宽度\
min-height（了解）：最小高度，无论内容多少，高度都大于或等于min-heigh
max-height（了解）：最大高度，无论内容多少，高度都小于或等于max-height

02、边框

/* border / / 复合属性 */

/* border: 1px solid red; */

/* 1px边框的粗细 solid直线 red指的是颜色。中间用空格隔开 */

1、只给某一方向边框线

border-bottom: 1px solid pink; 下边框

border-left: 1px solid pink; 左边框

border-right: 1px solid pink; 右边框

border-top: 1px solid pink; 上边框

2、不想要某一边

border-top: none ; 上边框

3、得到中间空心的正方形

.first{ width: 100px; height: 100px;

border-bottom: 100px solid yellow;

border-top: 100px solid rgb(16, 219, 80);

border-left: 100px solid rgb(210, 151, 24);

border-right: 100px solid rgb(200, 29, 234); }

4、利用border制作三角形

border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状

利用border或者CSS的特性我们可以做出很多图形

/* a表示透明和 transparent 透明 */

(css-tricks.com/the-shapes-…)

.first1{width: 0px; height: 0px;

border-bottom: 10px solid rgb(12, 35, 241);

border-top: 10px solid rgba(16, 219, 80,0);

border-left: 10px solid rgba(210, 151, 24,0);

border-right: 10px solid rgba(200, 29, 234,0); }

03、Demo

1、清楚内外边框

*{ margin: 0 ; padding: 0; } ul { margin:▸0;padding:▸0;}

2、基线

.box { vertical-align:middle; }

3、并排显示

.box .item { display: inline-block; }

04、内边距 padding

/* padding 内边距 */

/* padding : 10px; 表示四个位置都是10px内边距 */

/* padding: 10px 20px; 上下左右 */

/* padding: 10px 20px 30px; 上左右下 */

/* padding: 10px 20px 30px 40px; 上右下左 */ 顺时针顺序

某个位置上的内边距

padding-top: 10px;

padding-bottom: 10px;

padding-left: 10px;

padding-right: 10px;

padding并非必须是四个值, 也可以有其他值

/* 内部区=内容区+内边框区 */

/* 占地=内容区+内边框区+边框 */

/* 在普通模式下 规定好width和height的盒子如果再给他padding 盒子会被撑大 */

05、外边距 margin

/* 和兄弟盒子之间的距离 */

/* 和父盒子之间的距离 */

某个位置上的外边距

margin-top: 10px;

margin-bottom: 10px;

margin-left: 10px;

margin-right: 10px;

margin也并非必须是四个值, 也可以有其他值

.father div:first-child{margin-top: 3px; }

/* margin和padding是一样的 */

.father div:last-child{margin-top: 5px; } div中的最后一个

06、box-盒子阴影

box-shadow属性可以设置一个或者多个阴影

2.每个阴影用shadow表示，多个阴影之间用逗号,隔开，从前到后叠加 3.常见格式：

第1个值: offset-x,水平方向的偏移，正数往右偏移第2个值: offset-y,垂直方向的偏移，正数往下偏移第3个值: blur-radius,模糊半径

第4个值: spread-radius,延伸半径

color:阴影的颜色，如果没有设置，就跟随color属性的颜色inset:外框阴影变成内框阴影

4.通过一个网站测试盒子的阴影: html-css-js.com/css/generat…

07、盒子模型属性注意点

1、对于男盒子来说

下面6个属性都起作用：

Width、height,padding 、margin 上下左右

border 上下左右；Background 背景

2、对于女盒子来说

下面属性都不起作用：

1）width、height；垂直方向上的margin和border不起作用

width、height、margin-top、margin-bottom、border-top、border-bottom

2）以下属性对行内级元素（女盒子）的效果比较特殊

padding-top、padding-bottom 垂直方向的padding

3、对于人妖盒子来说

除了并排显示，其他特性和男盒子一样

08、margin塌陷（重叠问题）

1、兄弟元素之间塌陷

1）margin有重叠问题，这个重叠问题，也叫margin的塌陷

2）兄弟元素之间的margin塌陷，之间的间隙：取决于最大的marign，并不是margin相加

3）兄弟元素之间的margin塌陷是发生在垂直方向，在水平方向上是没有塌陷的

4）解决： 设置时：要么设置上面盒子的下marign，要么设置下面盒子的上margin，二者选其一。

2、父子元素之间塌陷

1）父子元素之间margin也会塌陷, 给父元素设置margin-top，给子元素也设置margin-top,此时，就产生了margin的塌陷

2）解决

给父元素加边框
添加overflow：hidden overflow表示溢出的意思

/* 专业叫使用overflow ：hidden 触发一个BFC */
给父元素设置padding-top：1px 0px不行，必须有值
给父元素或子元素设置浮动陷 float: left

09、box-sizing设置新的盒子模型（怪异模型）

1、box-sizing用来设置盒子模型为新的盒子模型

box-sizing: border-box; /* 开启新的盒子模型 */

/* 唯一区别 width和height */

/ 传统 盒子模型 /

/* width和height 指定内容区域 */

/ 新的 盒子模型 /

增大内边距盒子不会变大只是内容区会变小

/* width和height 指盒子在网页上占据的大小 */

2、border-box：padding、border 都布置在width、height里边

3、content-box：padding、border 布置在width、height外边

10、水平居中方案

图片6.png

11、盒子的背景图片

1、盒子模型之背景颜色

1）属性名：background-color（bgc）

2）颜色取值：关键字、rgb表示法、rgba表示法、十六进制

3）背景颜色默认值是透明： rgba(0,0,0,0) 、transparent

4）背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2、盒子模型之背景图片

只给盒子设置背景或背景颜色是显示不出来的，必须设置宽高

/* 背景图片默认会填充padding */

/* 背景图片的左上角默认是和padding的左上角对齐的 */

/* 背景图片默认会填充border*/****

1、属性名：background-image（bgi）,会盖在(不是覆盖)background-color的上面

2、背景图片中url中可以省略引号

3、设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

4、如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

5、背景图片默认是在水平和垂直方向平铺的

6、背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3、盒子模型之背景平铺

/* 盒子的宽高大于背景图片的宽高那么图片会平铺 /***

1、属性名：background-repeat（bgr）

background-repeat: no-repeat;

图片3.png

2、计算机中坐标系

图片4.png

4、盒子模型之置背景图片大小

1、属性名：background-size

background-size: 100px 100px;

/* 宽高分别占50% */

background-size: 50% 50%;

2、取值

auto：默认值, 以背景图本身大小显示

cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见

contain：缩放背景图，宽度或者高度铺满元素，但保证图片完整性

percentage：百分比，相对于背景区（background positioning area）

ength：具体的大小，比如100px

5、盒子模型之背景位置

属性名：background-position（bgp）

图片5.png 2、方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

12、精灵图（css sprite）

（把多张小图放在一张大图上）

.box{ width: 30px;height: 30px;border:1px solid red;

/* 默认情况下大图的左上角和盒子Padding的左上角对齐 */

background-image: url(../img/精灵图.gif);

/* y轴正值背景图往下跑要想往上跑需负值 */ 下正上负

background-position: 0 -36px;

/* x轴正值背景图往左跑要想往右跑需负值*/ 左正右负

/* background-position: -38px 0; */ }

2、使用

精灵图的原理是通过只显示图片的很小一部分来展示的

设置对应元素的宽度和高度

设置精灵图作为背景图片

调整背景图片的位置来展示

获取精灵图的位置：www.spritecow.com/

13、字图标的使用

使用：

第一步：登录阿里icons（www.iconfont.cn/），下载代码，并且拷贝…

第二步:通过link引入iconfont.css文件

第三步:使用字体图标

方式一: 通过对应字体图标的Unicode来显示代码;

方式二: 利用已经编写好的class,直接使用即可;

< style >

i{ color: skyblue;}

< /style >

<!--在网页显示一张图片：

1）img标签前景图

2）盒子背景图片背景图

字体图标：

本质是字 color设置颜色

网上有非常多的字体图标，最出名的是iconfont.

www.iconfont.cn/ 需要注册一个账户

看上去是图片本身是字-->

<-- 字体图片一般用i标签或span标签 -->

三、层布局

1、认识标准文档流

你写的任何一个盒子，都是在标准文档流中进行排布的。

类似一个国家，有很多制度，把盒子分成三类：

1）块级盒子独占一行

2）行内级盒子并排显示

3）行内块级盒子并排显示

默认情况下，标准文档流中的盒子，不会层叠在一起

在标准文档流中，对盒子进行定位，可能通过margin和padding动盒子的位置，并且margin可以为负值

在标准文档流中，通过margin和padding动盒子的位置，会影响其他盒子。

如果想让一个盒子在网页上的任何位置，且不影响其他盒子，此时按标准文档流布局就不行了。

层布局就可以让盒子层叠在一起，通过定位实现

2、相对定位 relative

/* 相对定位特点

1)参考点: 自己本应该出现的位置

2)需要通过 left right top bottom 设置偏移量要么使用一个，要么使用两个

3）相对定位的元素并没有脱标，原来的位置还是被占用

4）应用场景：A)局部位置调整；B)作为绝对定位的参考点*/

.father{ width: 400px;height: 400px;background-color:gold; }

.son{width: 50px;height: 50px;background-color: skyblue;

/* 相对定位 relation 有相对的意思*/

/* 相对定位的参考点：原本的位置 */

position: relative;

top: 50px;

left: 50px;

/* bottom: 30px; */}

3、固定定位 fixed

1）完全脱离标准文档流，叫脱流

2）需要通过 left right top bottom 设置偏移量要么使用一个，要么使用两个

3）参考点是整个浏览器视口

4）女盒子可以直接设置宽高

5)固定定位的元素内部还是按标准文档流进行布局*/

span{position: fixed;

bottom: 10px;

right: 10px;

/* 出国的盒子就不在区分男盒子，女盒子，人妖盒子 */

width: 100px;

height: 100px;

background-color: gold;}

4、绝对定位 absolute

1）完全脱标

2）需要通过 left right top bottom 设置偏移量要么使用一个，要么使用两个

3）参考点需要我们手动设置如果不设置最终以body作为参考点

4）设置参考点：position: relation; position: fixed; position: absolute;

5)大部分情况下，设置参考点是通过 position:relation;

6）大部分情况下，会把参考点设置到父元素上 子绝父相

7)通过z-index可以改变层叠顺序值越大越靠前

.father{ width: 500px;

height: 500px;

background-color: gold;

margin: 100px auto;

/* 这一行不再是绝对定位了是设置参考点的 */

position: relative; }

.son1{ width: 200px;

height: 200px;

background-color: skyblue;

/* 绝对定位 */

position:absolute;

top: 50px;

left: 50px;

z-index: 100; }

四、使用绝对定位实现水平垂直居中

*{margin: 0;padding: 0;}

.father{ width: 500px;

height: 500px;

background-color: gold;

position: absolute;

/* 完全水平居中 */

top: 50%;

left: 50%;

margin-left: -250px; /* 往左跑 */

margin-top: -250px; /* 往上跑 */}

五、flex布局

1、应用在flex container 上的css属性（写在容器里父级）

1）flex-direction

flex items默认都是沿着main axis主轴从main start开始往main end方向排布：

.father{ display: flex;

width: 500px;

height: 500px;

background-color: gold;

flex-direction: row; /* 向右 */

flex-direction: row-reverse; /* 向左 */

flex-direction: column; /* 垂直向下 */

flex-direction: column-reverse; /* 垂直向上 */ }

2）flex-wrap

flex-wrap 决定了 flex container 是单行还是多行：

.father{ display: flex;

width: 500px;

height: 500px;

background-color: gold;

flex-wrap: nowrap; /* 不换行 */

flex-wrap: wrap; /* 换行 */

flex-wrap: wrap-reverse; /* 换行 */ }

3）flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写：

.father{ display: flex;

width: 500px;

height: 500px;

background-color: gold;

/* flex-flow是flex-dicration和flex-wrap的简写 */

/* flex-direction: column;

flex-wrap: wrap; */

相当于 flex-flow: column wrap; }

4）justify-cotent

justify-content 决定了 flex items 在 main axis 上的对齐方式：

.box{display: flex;

width: 500px;

height: 450px;

border: 2px solid red;

flex-wrap: wrap;

justify-content: flex-start; /* 项目在主轴的起点开始排列 */

justify-content: flex-end; /* 项目在主轴的终始排列 */

justify-content: center; /* 项目在主轴的中间开始排列 */

justify-content: space-between; /* 富余空间在项目与项目中间 */

justify-content: space-around; /* 富余空间均匀环绕每个项目 */

justify-content: space-evenly; } /* 富余空间大小均相等 */

5）align-items

align-items 决定了 flex items 在 cross axis 上的对齐方式：

.box{ display: flex;

width: 500px;

height: 450px;

border: 2px solid red;

align-items: flex-start; /* 项目在交叉轴的起点开始排列 / align-items: flex-end; / 项目在交叉轴的终点开始排列 /
align-items: center; / 项目在交叉轴的中间开始排列 / align-items: stretch; / 如果项目没设置高度，默认项目会充满整个交叉轴 / align-items: nomal; / 效果和stretch一样 / align-items: baseline; } / 基线位置字体在同一条线上 */

6）align-content

align-content 决定了多行flex items 在cross axis上的对齐方式，用法与 justify-content 类似：

.box{ display: flex;

width: 500px;

height: 450px;

border: 2px solid red;

flex-wrap: wrap;

align-content: flex-start; /* 多根主轴在交叉轴的起点开始排列 */

align-content: flex-end; /* 多根主轴在交叉轴的终点开始排列 */

align-content: center; /* 多根主轴在交叉轴的中间开始排列 */

align-content: space-between; /* 交叉轴上的富余空间位于项目与项目之间 */

align-content: space-around; /* 交叉轴上的富余空间环绕两排项目中间 */

/* align-content: evenly; */

align-content: stretch; /* 如果项目没有设置高度会充满整个 */ }

2、应用在 flex-items 上的css属性（写在项目里子级）

1）order（了解）

order 决定了 flex items 的排布顺序：

<-- 容器 -->

<-- 项目 -->

<-- order是项目的属性值越小越靠前 -->

<div class="son" style="order: 10;">son1

<div class="son" style="order: 6;">son2

<div class="son" style="order: 3;">son3

<div class="son" style="order: 1;">son4

< /div >

2）align-self（了解）

Align-self 可以通过 align-self 覆盖 flex container 设置的 align-items：

<-- 项目 -->

<-- 可以单独设置某个项目在交叉轴上的对齐方式 -->

< /div >

3）flex-grow (了解)

flex-grow 决定了 flex items 如何扩展(拉伸/成长)：

<-- 项目 -->

<-- 把富余空间分三份每人占一份 -->

< div class="son" style="flex-grow: 1;">son1< /div>

< div class="son" style="flex-grow: 1;">son2

< div class="son" style="flex-grow: 1;">son3

<-- 把富余空间分三份 son1占一份 son2占两份 son3占三份 -->

< /div>

4）flex-shrink (了解)

flex-shrink 决定了 flex items 如何收缩(缩小)：

<-- 项目 -->

<-- 1 1 1 表示压缩比例一样 -->

< div class="son" style="flex-shrink: 1;">son1< /div>

< div class="son" style="flex-shrink: 1;">son2< /div>

< div class="son" style="flex-shrink: 1;">son3< /div>

<-- 值越大压缩的越狠 -->

< /div>

5）flex-basis (了解)

flex-basis 用来设置 flex items 在 main axis 方向上的 base size：

<-- 项目 -->

<-- flex-basis: 200px; 指定一个项目在主轴上占据的大小 -->

<div class="son" style="flex-basis: 200px;">son1

<div class="son" style="flex-basis: 100px;">son2

<div class="son" style="flex-basis: 50px;">son3

< /div>

6）flex

flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值：

<-- 项目 -->

<div class="son"style="flex:1;">son1

<div class="son"style="flex:1;">son2

<div class="son"style="flex:1;">son3

< /div>

六、浮动布局

1、认识浮动

固定定位和绝对定位是完全脱离标准文档流。

浮动布局：

目的：让块级盒子并排显示。出国。

浮动的元素并没有完全脱离标准文档流。

float:left; float:right;

2、字围效果（字体环绕图片）

/* 如果浮动的元素完全脱离标准文档流，那么后面的元素，就向上钻钻到前一个元素下面 */

3、浮动元素的特点

浮动元素的特点:

1）浮动元素脱标（半脱离，有字围效果）

2）包裹性如果没有设置宽度，浮动的元素宽度会包裹内容

3）破坏性如果子都浮动，都出国，父如果没有设置高度，高度会变成0，就是所谓的高度塌陷

浮动对父元素造成的影响：

如果父元素没有设置高度，子都浮动了，父的高度就会变成0，我们需要清楚这种影响，专业叫清除浮动。

4、清除浮动元素对父元素造成的影响：

清除浮动的方案：

1）给父元素添加 overflow:hidden

overflow: hidden; /* 清除浮动 */

5、清楚浮动方式：

1、清除浮动（清除对父元素造成的影响）：

1）加高法用的不多，因为一个盒子的高度通常是靠内容撑起来的

2）overflow:hidden; 手动触发BFC

3）内墙法在父元素内部的最后面，手动添加一个div （了解）

<-- 内墙法 -->

< /div>

4）伪元素说白了就内墙法的改造版

/* 伪元素 ::before是在元素内部最前面插入一个伪元素 */

/* 伪元素 ::after是在元素内部最后面插入一个伪元素 */

.father::after{

display: block;

content: "";

clear: both; 专门用来清除浮动

/* 通常我们为了兼容性，还会写如下代码 */

height: 0;

font-size: 0;

visibility: hidden;}

5）封装一个清除浮动的类（clearfix）

哪个父元素受影响了，只需要在父元素身上添加这个类（clearfix）就OK了

/* clearfix 这个类专门是用来清除浮动的 */

.clearfix::after{display: block;

content: "";

clear: both;

< /div>

2、清除浮动（清除对兄弟元素造成的影响）：

1）clear:both;

left: 清除左浮动造成的影响 right：清除右浮动造成的影响

both: 清除左右浮动造成的影响（常用）

这一行代码写在什么地方？

答：哪个兄弟元素受影响了，就写在哪个兄弟元素上。

.son1{ background-color: lightgreen; float: left;}

.son2{ background-color: aqua; float: left;}

.son3{ background-color: lightcoral; clear:both; }

七、企业级布局实战套路

1、table布局 (out了，了解)

父级容器—display: table

子级容器—display:table-cell

2、float布局

两列布局解决方案(一边固定，另外一边动态变化)

三列布局解决方案

清除浮动的例子 ::after伪元素

3、inline-block布局（了解）

想要并排显示：父级font-size设置为0，子级font-size大小一致

4、flexbox布局

justify-content主轴；align-items交叉轴。

两列布局flex的实现（一侧固定另一侧自适应） flex:1;占一份

5、Grid布局（了解）

grid-template-columns表示：设置列和行尺寸网站：blog.csdn.net/ancartoon/a…

6、columns布局（了解）

CSS属性 columns 用来设置元素的列宽和列数。 columns：3 auto;把内容分成3列

7、水平居中

文本 .parent{text-align:center}
单个块级元素 .son{width:1000px(定宽)，margin:0 auto}
多个块级元素 .parent{text-align:center} .son{display:inline-block}
使用绝对定位: 父相子绝，top、right、bottom、left的值是相对于父元素尺寸，然后margin或者transform是相对于自身尺寸，组合使用达到水平居中的目的;
任意个元素(flex): #parent{display: flex; justify-content: center; }

1）文本居中

2）单个盒子（块级元素）居中

3）多个盒子（块级元素）居中

4）使用绝对定位（已知父子宽高）

父知道宽高，子不知道（使用transform）

水平竖直居中布局解决方案-flex+justify-content

5）竖直居中方法

单行文本 .parent{height:150px;line-height:150px;} 高度等于行高的值；

多行文本 .parent{height:150px;line-height:30px;} 行高等于height/行数；

图片元素: .parent{height:200px;line-height:200px;font-size:0;} .son{vertical-align:middle}

单个块级元素:
- 使用table-cell实现: .parent{display:table-cell;vertical-align:middle}
- 使用position实现: 子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到垂直居中的目的；
- 利用flex实现 .parent{display:flex; align-items: center;}
任意个元素：.parent{display:flex; align-items: center;} 或者 .parent{display:flex;flex-direction: column;justify-content: center;}

6）居中布局(水平+垂直)

table + margin实现水平方向居中，table-cell + vertical-align实现垂直方向居中
postion + transform
flex + align-items + justify-content

CSS

一、初始CSS

01.css概念

02.css书写样式：

1.行内样式

2.页内样式

3.外部样式

03.选择器

伪类选择器

1.链接伪类选择器

2.位置伪类选择器

1）标签 : nth-child( )

2）标签 : nth-of-type( )*

3.input 伪类选择器（输入框）

伪元素选择器

/* :: after */

/* :: before */

/* 选中第一个字 */

/* 选中第一行 */

04.字体相关属性

1、font-size 设置字体大小

2、font-style 设置字体倾斜

3、font-weight 设置字体粗细

4、font-family 设置字体格式

5、font-color 设置字体颜色

6、a 指透明度

7、line-height 行高

05.文本相关属性

1、text-decoration

2、text-align 文本位置

3、text-indent 首行缩进

4、text-transform 文字大小写转换

5、文字间距

6、text-shadow 文字阴影

7、text-align

06.css继承性

07.css层叠性

1、位置不同 选择器相同

2、当组合选择器时 使用权重

08.变性手术

1.转成行内块元素(人妖）

2.转成行内元素（女）

3.转成块状元素（男）

4、编写HTML时的注意事项：

5、居中

09.溢出处理

1.overflow 超出部分处理

1) 隐藏

2) 产生滚动条

3) auto

4) visible

5) inherit

2、word-break 拆分单词

1）word-break: normal;

2）word-break: keep-all;

3）word-break: break-all;

4）word-break: break-word;

3、White-space 控制是否换行

10.CSS样式不生效技巧

二、盒子模型

01、初始盒子模型

02、边框

1、只给某一方向边框线

2、不想要某一边

3、得到中间空心的正方形

4、利用border制作三角形

03、Demo

1、清楚内外边框

2、基线

3、并排显示

04、内边距 padding

05、外边距 margin

06、box-盒子阴影

07、盒子模型属性注意点

1、对于男盒子来说

2、对于女盒子来说

3、对于人妖盒子来说

08、margin塌陷（重叠问题）

1、兄弟元素之间塌陷

2、父子元素之间塌陷

1、位置不同选择器相同

2、当组合选择器时使用权重

12、精灵图（css sprite）

1、应用在flex container 上的css属性（写在容器里父级）

4）使用绝对定位（已知父子宽高）