CSS
CSS基础
css通用属性
id 元素身份证号 唯一性
class 类型 元素的名字，一个元素可以有多个类名，多个元素可以有相同的类型
类型 不能使用纯数字，不要使用数字开头，不要使用中文，如果是多个词组组成的类型 可以使用中划线接
使用style标签设置内嵌式的css样式
内嵌式说明：
内嵌式 在head标签内使用style标签设置css样式
特点：内嵌可以作用在一个页面，其他的页面要用只能将style复制粘贴
不推荐，在练习的时候使用 结构 变现 部分分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 使用style标签设置内嵌式的css样式 -->
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>helloworld</p>
</body>
</html>使用style标签设置外嵌式的css样式
外链式说明：
外链式 推荐
将css样式在以.css为后缀的css文件中书写
哪一个页面要使用这个css文件，就使用link标签引入
符合我们web标准的原则：结构 变现 行为 相分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 使用style标签设置外嵌式的css样式 -->
<link rel="stylesheet" href="./01-style.css">
</head>
<body>
<p>helloworld</p>
</body>
</html>行内式：
行内式
通过给元素设置style通过属性，实现给元素添加样式
在style属性值设置元素样式 样式是一个名值对 名:值 ，多个名值对之间使用分号分割特点：行内式只能作用在一个标签 不推荐
<div style="color:red;font-size:20px;background-color: yellow;">div</div>复合选择器
css语法格式
选择器{
样式声明
}
标签选择器，类选择器.，id选择器#,通配符选择器*
基本选择器
标签选择器将页面中同一类型的标签都选择出来
p {
background-color: aqua;
}选择器 作用：选择元素；
样式属性名: 样式值;
id选择器 #
通过id名将元素选择出来
#tesst01 {
color: red;
}类选择器 .
通过类名将具有相同的类名的元素选择出来
.test01{
background-color: aqua;
}通配符选择器 *
将页面中所有类型的标签都选择出来
*{
margin:0;
padding:0;
}复合（组合）选择器
由多个基础选择器组合形成选择器 可以更高效 快捷选择元素
亲子选择器
格式： 元素1>元素2…{}
找到元素以下的下一级，儿子级
找元素1的亲儿子元素2
p>h1{
color:red;
}后代选择器
格式：元素1元素2.。。{}
即为元素一下的所有后代都要选择
找元素1的后代元素2，元素只要是元素1后代即可 亲儿子 孙子 重孙子
div p{
color:red;
}交集选择器
格式：元素1,元素2.。。{}
找同时符合多个条件的元素
可以给多个类，标签，等用，逗号隔开。实现都给他们同时设置的属性
div,p{
color:red;
}兄弟选择器
格式1 元素1+元素2{} 找紧挨着的哪一个弟弟元素
格式2 元素1~元素2{} 找下面所有的弟弟元素
div+p{
color:red;
}
div~p{
color:red;
}属性选择器
格式 [属性名] 找具有指定属性名的元素
[属性名="属性值"] 找出的元素得具有相同的属性名和属性值
[属性名^="属性值"] 找出的元素得具有相同的属性名且属性值以..开头
[属性名$="属性值"] 找出的元素得具有相同的属性名且属性值以..结尾
所有的选择器 都是只能向下（弟弟）或者向里（亲子，后代）找，不能找哥哥 和祖先
[class=属性值]{
color:red;
}
[class^=属性值]{
color:red;
}/*相同属性名的开头字母*/
[class$=属性值]{
color:red;
}/*相同属性名的结尾字母*/元素的关系
- 父元素：直接嵌套子元素的元素就是父元素
- 子元素：直接被父元素嵌套的元素
- 祖先元素：直接或者间接嵌套后代元素的元素就是祖先元素 父元素也是祖先元素
- 后代元素：直接或者间接被祖先元素嵌套的元素就是后代元素
伪类选择器
（不存在的类，特殊的类）
- 格式：伪类以冒号开头 :
- 作用：给元素的特殊状态添加样式 ：被点击的状态 悬停的状态 第一个元素 最后一个元素等~
- 分类：
- - ui伪类
- - 静态伪类 只能作用在a标签
爱恨原则 ”love hate“
lvha 分别为首字母的缩写，简称爱恨原则，他们是有css排列顺序
可以作用在a标签上的四个伪类 叫做超链接伪类，这四个超链接伪类必须要按照 lvha的顺序设置，否则就会失效
:link :visited :hover :active
:link
未访问之前的链接改变颜色，访问过一次就失效，提示一次这个未访问
:visited
访问过的超链接改变的颜色，原本的是紫色，访问过后将会变成设定的颜色,一般访问过的超链接 最多修改字体颜色，不要放大，保护用户隐私
:hover
鼠标悬停效果
:active
激活，鼠标按下 没有抬起的状态
:focus
元素获取焦点（聚焦）时状态
<style>
a:link {
color: red;
}
a:visited {
color: aqua;
}
a:hover {
color: blue;
font-size: 30px;
}
div:active {
color: yellow;
}
</style>
<body>
<a href="#">helloworld</a>
</body>结构化伪类
:first-child{}
作用：选择出来的元素是其父元素的第一个子元素 （我是我父亲的第一个孩子）
:last-child{}
作用：选择出来的元素是其父元素的最后一个子元素 （我是我父亲的最后一个孩子）
:nth-child(n){}
作用：选择出来的元素是其父元素的第n个子元素
- n的取值范围是0 到 正无穷
- n 0 1 2 3 4 5 6 ….
- 偶数 2n 0 2 4 6 8 10 12 或者 even
- 奇数 2n+1 1 3 5 7 9 11 13…. odd
- 3n 0 3 6 9 选择3的倍数的项的元素
- 4n 选择4的倍数的项的元素
- 5n 选择5的倍数的项的元素
- -n+3 3 2 1 0 -1 -2 选择前3项
- n+3 3 4 5 6 7 8 从3开始3以后的项
:first-child :last-child :nth-child() 不区分元素类型，只看元素在其父元素内排行
:first-child :last-child :nth-child() 不区分元素类型，只看元素在其父元素内排行
:first-of-type
/*子级同类型元素第一个*/
ul :first-of-type {
color: aqua;
}
:last-of-type
/*子级同类型元素最后一个*/
ul :last-of-type {
color: blue;
}:nth-of-type(n)
/*指定元素*/
ul li:nth-of-type(2) {
color: blueviolet;
}:not(:nth-of-type(3n))
指定元素取消
ul li:not(:nth-of-type(3n)) {
color: burlywood;
}这三个伪类的用户和 :first-child :last-child :nth-child()类型，只不过这三个区分元素类型，:last-of-type :nth-of-type(n) :first-of-type不区分元素类型
:not() 排除指定元素
::after
li::after {
content: "sddd";
}li:not(:nth-of-type(3))
ul li:not(:nth-of-type(3)) {
background-color: aqua;
}
ul li:not(:nth-child(3)) {
background-color: aqua;
}
ul li:not(.notMe) {
background-color: aqua;
}伪元素选择器
作用：同通过css给元素内添加标签，不会在页面的html结构中新增标签，但是可以起到一样的效果，从而简化html结构
格式：
- 元素::before
作用：在元素内容的最前面添加行内元素
content属性必须要有
- 元素::after
作用：在元素内容的最前面添加行内元素
content属性必须要有
::first-letter 选择第一个字母
::first-line 选择第一行
::selection 将用户鼠标选中的内容选择出来
div::before {
content: '新增的内容';
background-color: aqua;
/* color: red; */
}
div::after {
content: '新增的内容2';
background-color: aqua;
/* color: red; */
}
p::first-letter {
color: red;
font-size: 30px;
}
p::first-line {
background-color: burlywood;
}
p::selection {
background-color: blueviolet;
}css的三大特性
- 继承性
有一些样式属性，子元素没有设置的时候可以从父元素那里继承
可以继承的属性都是一些和文字相关的属性：text- line- font- color
不可以继承的属性有和元素布局相关的属性，元素的宽度 ，位置 背景...
优点:当多个子元素具有相同的样式时我们只需要将样式设置在他们共同的祖先元素上即可
使用场景：可以将页面的主要的字体颜色和字体样式设置在body标签上
- 优先级
- 继承来的样式 没有优先级
- 通配符选择器 0
- 标签和伪元素选择器 1
- 类和伪类选择器 10
- id选择器 100
- 行内样式 1000
- !important 正无穷
注意：复合选择器的优先级是将多个基础选择器 相加计算(并集选择器的优先级是分开算的)
再多的选择器 相加也不会超过其重量级
!important 慎用，后期想改也改不了，除非删除
- 层叠性
样式冲突：当我们通过不同的选择器选择出相同的元素，给这个元素的相同的样式属性，设置不同的样式值
当元素通过多种方式设置样式时，最终取决优先级
- 样式冲突时，优先级不一样，谁的优先级高听谁的
- 样式冲突时，优先级相同，后来者居上，谁设置的样式靠后就听谁的，后面的样式会覆盖前面的样式
当样式没有冲突的时候，多个样式都会作用的元素上，层叠性
<style>
body {
color: blue;
}
/* 1+1 */
/* div p {
font-size: 20px;
} */
/* 1+1+10*/
/* div>p.p01 {
font-size: 30px;
color: chartreuse !important;
} */
/* 1 */
/* p {
color: red;
font-weight: 800;
} */
/* .p01 {
color: yellow;
} */
/* 100 */
#p001 {
color: rgb(124, 76, 3);
}
/* */
div.div01,
p {
color: aqua;
}
</style>css的长度单位
- 像素 px
- 像素：像素就是频幕上一个个正方形的小发光点（物理像素，真实存在），这些小的发光点的颜色及位置决定了图像的样式，像素是图型的最小单位 px
- 分辨率：屏幕水平方向和垂直方向有多少个像素，1920*1080，水平有1920个像素，垂直有1080个像素
相同的尺寸内，分辨率低，说明像素点少，每一个像素点尺寸大
在pc端 css像素和物理像素比 默认是1：1
- 在pc段1px的css像素 会 使用1个物理像素点表示
- 百分比
元素属性的百分比 ** 一般 ** 是相对于其元素相同属性的百分比
元素的width采用百分比 相对于其父元素width的百分比
优点：子元素会随着父元素的变化而变化
- em
元素的长度单位为em时，是相对于元素自身的font-size来计算
所有的浏览器都有默认的字体大小，谷歌浏览武的默认字体大小为16px
- rem
元素的长度单位为rem时，是相对于根元素（html标签）的font-size来计算
* {
margin: 0;
padding: 0;
}
html {
font-size: 40px;
}
body {
font-size: 50px;
}
div.div01 {
/* css像素 */
width: 1920px;
height: 300px;
background-color: aqua;
}
/* 百分比 */
/* div.outer {
width: 500px;
height: 500px;
background-color: blue;
}
div.inner {
width: 100%;
height: 50%;
background-color: red;
} */
/* em */
div.outer {
/* font-size: 40px; */
width: 500px;
height: 500px;
background-color: blue;
}
div.inner {
font-size: 30px;
/* width: 10em;
height: 10em; */
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
</head>
<body>
<div class="div01">
</div>
<div class="outer">
<div class="inner"></div>
</div>text-decoration
作用：给文本设置装饰线
取值： none 默认值 没有装饰线 去除 a标签的下划线
underline 下划线 和 u ins标签有一样的样式效果
overline 上划线
line-through 中划线，删除线 和 s del标签有一样的样式效果
- text-indent
作用：设置文本首行缩进
取值： 正直 负值
px em
over-flow
-
作用：设置元素溢出内容时溢出内容的处理方式 （定高）
取值：visible 溢出内容可见 默认值
hidden 溢出内容隐藏 水平和垂直方向上的溢出内容都隐藏
scroll 不论是否需要都会产生水平和垂直方向上两个滚动条
auto 根据内容决定是否产生滚动及滚动条的方向
overflow-x 作用:设置水平方向溢出内容的处理方式
取值 visible hidden scroll auto
overflow-y 作用:设置垂直方向溢出内容的处理方式
取值：visible hidden scroll auto
white-space
作用：告诉浏览器如何处理页面空白
取值： normal 正常 默认值
nowrap 不换行
pre
以预处理的格式来显现页面 （页面中 一般情况下不能显示 空格 和换行，当white-space: pre ---》html内容怎么写就怎么显示）
css盒模型
css是将页面中所有的元素设计为一个矩形盒子，我们的页面布局就是摆放这些盒子
html页面中的标签本质就是一个矩形盒子，包含了 内容区域 边框 内填充 外边距
css盒模型
- - 标准盒模型
- - 内容区域：通过width和height属性设置
- - 边框 border系列属性
- - border-width 可以省略 采用 默认的宽度是3px
作用：设置边框的宽度
格式：4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 四个方向的边框
- border-top-width 单独设置上边框的宽度
- border-right-width 单独设置右边框的宽度
- border-bottom-width 单独设置下边框的宽度
- border-left-width 单独设置左边框的宽度
- border-color 可以省略 采用 默认的颜色是黑色
作用：设置边框的颜色
颜色取值： 预定义 rgb rgba #fff
格式： 4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 四个方向的边框
- border-top-color 单独设置上边框的颜色
- border-right-color 单独设置右边框的颜色
- border-bottom-color 单独设置下边框的颜色
- border-left-color 单独设置左边框的颜色
transparent 透明
- border-style 不能省略
作用：设置边框的样式
格式： 4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 四个方向的边框
取值：solid 实线边框 dotted 点线边框 dashed 虚线边框 double双实线边框
- border-top-style 单独设置上边框的样式
- border-right-style 单独设置右边框的样式
- border-bottom-style 单独设置下边框的样式
- border-left-style 单独设置左边框的样式
- border 组合属性(简写属性) ，所有和元素边框相关的样式可以统一设置
- 格式：
- border：border-width border-style border-color;
- border-top 设置上边框
- border-bottom 设置下边框
- border-left 设置左边框
- border-right 设置右边框
在标准盒模型下 元素的边框会增大元素的尺寸
- 非标准盒模型（怪异盒模型）
三角形
width: 0px;
height: 0px;
/* background-color: aqua; */
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-left: 10px solid red;
border-bottom: 10px solid green;元素的盒模型
内容：
padding
作用：设置元素内容和边框之间的距离
格式：padding： 4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 4个方向的边框
取值：
- 带单位的数值
- 百分比(子元素的水平和垂直方向的padding取值为百分比 是相对于父元素的width来计算的)
padding-top padding-bottom padding-right padding-left
在准备盒模型下 padding会增大元素的尺寸、- 如果没有指定宽度的时候 padding是不会撑大元素的尺寸，所以当我们子元素为父元素的100%，不要写width为100%，采用默认的即可
元素可见框尺寸：内容 + padding +border
boeder外边框
padding=边框内设置的padding值里面是内容
- 标准盒模型
在标准盒模型 下 width和height设置就是元素内容区域的大小
标准盒模型下计算 内容width=可见框大小的宽度-水平方向的padding和border
内容height=可见框大小的高度-垂直方向的pdding和border
- 非标准盒模型（怪异盒模型）
box-sizing
作用：设置元素盒模型的计算方式，设置width和height的作用
取值：content-box 默认值 标准盒模型 width和height设置元素的内容区域的大小border-box 怪异盒模型
width和height属性设置的不是元素内容区域的大小，而是设置的元素可见框（内容+padding+border）的大小
如果还设置了border padding，元素会自动的计算内容区域的大小
元素的盒模型
- 内容
- padding
-border
- margin 外边距
作用：设置元素和其他元素之间的距离,不会增大元素可见框大小，可以决定元素的位置
格式：margin：4个值 上 右下 左
3 上 左右 下
2 上下 左右
1 4个方向
margin-top：上外边距 影响自身 取值为正直 自身向下移动 取值负值 自身向上移动
margin-left：左外边距 影响自身 取值为正直 自身向右移动 取值负值 自身向左移动
margin-right：右外边距 影响是右侧元素 正值 右侧元素向右移动 取值负值 右侧元素向左移动
margin-bottom：下外边距 影响是下面的元素 正值 下面元素向下移动 取值负值 下面元素向上移动
取值：带单位的数值
** 百分比 ** 子元素的margin取值为百分比时是相对于父元素的宽度来计算的
清楚默认样式
list-style:none; 清楚ul ol等样式
text-decoration: none;去除标签默认下划线样式
行内块元素和块级元素可以直接设置 width height 内外边距 border
input有默认样式padding和border
行内元素的盒模型
- 行内元素 不能直接设置width 和height
- 行内元素 设置边框,padding,margin后 元素会变大 但是 水平方向会影响页面布局，垂直方向不会影响页面布局
margin的用法
元素水平居中
- 行内 行内块 文字
给其父元素设置 text-align：center
- 块级元素
给定宽的块级元素设置左右margin为auto
- margin: 0 auto;
- margin: 20px auto;
- margin-left: auto;
margin-right: auto;
元素垂直居中
- 行内 行内块 文字
给其父元素设置 line-height 等于height
- 块级元素
- 定位？
隐藏元素的方式
overflow:hidden；
隐藏超出的内容
text-overflow: ellipsis;
display: -webkit-box;
/** 将对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical;
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2;
/** 显示的行数 **/
display
作用：
转换元素的显示模式，隐藏元素
取值- block 转为块级元素
- inline
- inline-block
- none 将元素隐藏 ，元素不在占据页面中的原位置，会影响页面布局，在html结构中没有删除
- flex ？
visibility
作用：
设置元素的可见性
取值 :
visible 元素可见 默认
hidden 元素不可见（隐藏），元素会占据页面中的原位置，不会影响页面布局
- 使用rgba将背景颜色变透明 使用于没有内容的元素
opacity
元素会占据页面中的原位置，不会影响页面布局
作用：
设置元素的透明度
取值：
0 ~1
0 为完全透明
1 完全不透明
- 设置元素的宽度 或 高度 为0
- 有内容时 设置 overflow:hidden;
- 通过margin设置为负值 将元素移出页面范围
轮廓线 outline
格式：设置方式和border一样
特点：不会影响页面布局，不会增大元素可见框的尺寸
outline: 10px solid red;
设置圆角 border-radius
作用：
设置元素的边框为圆角
原理：
使用圆形和元素的角相切形成圆角
格式：
border-top-left-radius: 水平方向圆的半径 垂直方向圆的半径;
- 当水平方向圆的半径和 垂直方向圆的半径一样时是 正圆和角相切 ，两个值一样可以只写一个
- 当水平方向圆的半径和 垂直方向圆的半径不一样时是 椭圆和角相切
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
简写属性：
border-radius 可以同时设置圆的4个`角
格式：border-radius 4个值：左上角 右上角 右下角 左下角; 正圆和角相切
3个值：左上角 右上和左下 右下角；
2个值：左上和右下 右上和左下；
1个值 4个一样
border-radius: 10px 20px 30px 40px/30px 50px 60px 80px;
前4个值是水平半径/ 后4个值为垂直半径
取值：带单位的数值|百分比（相对于元素自身的宽高来计算）
常用场景：
正圆
步骤1：元素设置为正方形
2: border-radius: 50%;
border-radius: 宽或高 值得一半/50%;
圆角矩形
步骤1： 将元素设置为长方形
border-radius:短边的一半
box-shadow盒子的阴影
内外阴影的取值 :"outset","inset"
outset 外阴影：
- 默认值 不能写，写了就会禁用属性值没有任何效果
box-shadow:阴影的水平偏移量 垂直偏移量 模糊距离 阴影的颜色 ;
box-shadow: 0px 0px 0px red inset;文字的阴影
text-shadow:阴影的水平偏移量 垂直偏移量 模糊距离 阴影的颜色 ;
text-shadow: 0px 0px 0px red inset;注意：
- 阴影的水平偏移量和垂直偏移量不能省略
- 阴影不占据页面位置，不会影响页面布局
背景 background
background-color
设置元素背景颜色
- 背景颜色和背景图片可以同时存在 同时设置后 背景颜色在背景图片的下面，会最为背景图片的背景
background-image
给元素设置背景图片
-格式：
background-image: url('引入图片的地址，网络文件。本地文件');
引入图片后 默认是原图的尺寸
- 当元素的尺寸 大于 背景图片
- 图片会自动的在元素内水平方向和垂直方向双向平铺，直到将元素全部铺满
- 当元素小于 背景图片
背景图片显示不全 图片的左上角和元素的左上角是对齐的
- 当元素等于 背景图片
背景图片可以显示完全
background-repeat:
作用:
设置背景图片是否平铺
取值 ：
repeat 默认值 双向平铺
no-repeat 水平和垂直方向都不平铺
repeat-x 只水平方向平铺
repeat-y 只垂直方向平铺
bacground-size
作用：
设置背景图片的大小
格式：
bacground-size:水平方向的尺寸 垂直方向的尺寸;
注意：设置背景图片尺寸的时候 ，要按照原图的比例设置，否则就会变形，推荐只设置一个方向的尺寸，另一个方向会自动计算
取值：
- 带单位的数值|auto
- background-size: 300px;
300px默认为水平方向的尺寸，垂直方向默认为auto
- background-size: auto 300px;
- 百分比
当背景图片的大小设置为百分比时，百分比是相对于背景图片作用在元素width和
height来计算
- cover
背景图片会按照原图比例进行缩放，直到将元素完全铺满的最小尺寸，可能会导致背景图片显示不全
- contain（包含）
背景图片会按照原图比例进行缩放，直到背景图片在元素内显示全的最大尺寸，可能会导致元素有空白没有被铺满
background-position
作用：
设置 背景图片在元素内的位置
默认：
背景图片和元素的左上角对齐
格式：
background-position：x y;
x 为背景图片在x轴的位置
y 为背景图片在y轴的位置
取值：
- 带单位的数值 px em rem 两个值的顺序不能颠倒，默认第一个就是水平方向的位置
background-position: xpx ypx;
x为正值时背景图片向右偏移 为负值 向左偏移
y为正值时背景图片向下偏移 为负值 向上偏移
可以只写一个 省略的默认为center
- 方位名词 两个值的顺序可以颠倒
水平方向的方位名词 ：left center right
垂直 ：top center bottom
可以只写一个 省略的默认为center
- 百分比 要严格的顺序之分，不能颠倒位置
使用百分比的方式来表示方位名词
background-position: 0% 0%; left top
background-position: 0% 50%; left center
background-position: 0% 100%; left bottom
场景：
雪碧图，精灵图
图片，音视频 css文件 js文件都是属于外链资源，需要向服务器单独发请求
图片是按需加载，当需要的时候才去请求加载图片
background-attachment
作用：
设置背景图片附着，设置背景图片是否父跟随元素移动
取值:
scroll 背景图片随着元素滚动 默认值
fixed 背景图片不会随着元素滚动
background-attachment: fixed;
background-attachment取值为fixed 背景图片的偏移量不在相对于元素来计算，而是相对于浏览器可视窗口来计算
background-clip
作用：
设置背景颜色出现的范围
取值：
- border-box 默认值
背景颜色 默认会出现在内容 padding border下
- padding-box
背景颜色会出现在内容 padding下
- content-box
背景颜色只出现在内容区域
background-origin
background-origin:content-box;
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。和背景相关的属性 都是不可以继承
background-color;
bg-image
bg-repeat
bg-position：x y;
100px 100px
bg-size:width height;
100px 100px;
bg-attachment
bg-origin
bg-clip
background简写，组合属性,所有和背景相关的属性可以统一设置
background属性没有严格顺序之间，但是我推荐的使用顺序
background：bg-color bg-image bg-repeat bg-position/bg-size bg-attachment bg-origin bg-clip;注意：
bg-position/bg-size ；bgsize要写在bg-position的后面，且使用/分隔
-bg-origin bg-clip要写在最后，前面的是 bg-origin
float
块元素默认垂直排列，想让元素水平排列需要使用浮动
作用：
让元素可以在其父元素内水平向左或者向右浮动，实现水平布局
产生浮动的本来目的是为了实现文字环绕
取值：
none 不浮动 默认值
left 元素在父元素内向左浮动
right 向右浮动
清楚浮动：
clear
作用：清楚浮动元素对自身产生的影响
本质：给设置了clear属性的元素添加了一个看不见 摸不着但是真实存在的margin-top，值浮动元素的高度
取值：
left 清楚左浮动的元素对自身产生的影响
right 清除右浮动的元素对自身产生的影响
both 清除左右两侧浮动的元素对自身产生的影响
格外标签法：
在浮动元素的最后面设置一个块级标签，给其设置 clear：both
.clearFloat {
clear: both;
}
通过伪元素清除浮动：
- 单伪元素
给浮动元素的父元素 添加 ::aftet伪元素，转为块级元素 设置clear：both
设置清楚浮动添加伪元素，content:''; 是必须的。
.clearFix::after {
content: '';
display: block;
clear: both;
}
- 双伪元素 **
给浮动元素的父元素 添加::before ::aftet伪元素，转为table 设置clear：both
.clearFix::before,
.clearFix::after {
content: '';
display: table;
clear: both;
}- 给父元素设置overflow：hidden 将父元素变为bfc也可以清楚浮动副作用很小
.clearFix {
overflow: hidden;
}img和文字的页面居中
图片快，行内块居中：
标准流中在父级元素水平居中左右margin:0 auto;
块级元素在父元素内垂直居中 只能使用定位,一旦元素脱离标准流 水平居中设置的左右margin为auto就不起作用了
块级元素在其父元素内水平垂直居中
子绝父相
子元素：
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;元素设置定位
水平居中
left: 50%; 移动父元素宽度的50%
margin-left: -自身宽度的一半;
2.2 垂直居中
top: 50%; 移动父元素高度的50%
margin-top: -自身高度的一半; .inner2 {
width: 100px;
height: 100px;
position: absolute;
top:50%;
margin-left:50px;
}文字居中
.box {
width: 300px;
height: 300px;
line-height: 300px;行高等高
text-align: center;/*水平居中*/
}bfc
bfc 块级格式化上下文
c是页面中一个独立的布局空间（以独立的渲染空间），有自己的布局规则，外面的元素不会影响里面，里面的元素课也不会影响外面
bfc是一个隐含 的属性，不是通过某一个属性单独设置，是通过其他属性间接的设置
共有 0 条评论