导图社区 CSS3
- 423
- 24
- 7
- 举报
CSS3
此图讲述了所有的CSS3知识点。CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
编辑于2021-05-16 19:41:14
- 相似推荐
- 大纲
web前端第二阶段
CSS
Day08
常用样式属性
背景颜色
background
字体大小
font-size
文本颜色
color
使用css 样式的方式
内联样式
<any style="样式的声明"></any>
样式声明的格式：样式属性：样式的值 ; 样式属性：样式值......
内联样式在项目基本不用， 样式代码重用性低， 内联样式优先级最高
内部样式
在网页头部中添加<style></style>标签, 在style中定义样式 <head> <style> 样式规则 </style> <head>
外部样式
独立于任何网页的位置处， 创建一个样式文件(.css为后缀)， 在.css文件中保存样式规则
使用步骤
1.创建样式表文件
2.在css样式表文件中编写样式规则
3.在网页的头部引入css文件 <link rel="stylesheet" href="css文件的url">
CSS样式特征
继承性
大部分的css效果是可以被直接继承的
必须是层级嵌套结构，子继承父或者更高层
层叠性
可以为一个元素定义多个样式规则
规则中属性不冲突，可以同时应用到当前元素上
优先级
如果样式声明冲突时，按照样式规则的优先级去应用
默认的优先级，由高到低
1.内联样式
2.就近优先(内部样式和外部样式)， 离标签最近的优先
3.浏览器默认样式
调整优先级
!important
放在样式属性的值之后， 与值之间用空格隔开
例：h2{color:purple !important;}
作用：调整样式的优先级
基础选择器
通用选择器
可以与页面中所有元素匹配
*{样式声明}
例：*{margin:0;padding:0}
*效率极低，不建议使用
元素选择器 h1{color:red}
设置页面中某种元素的默认样式
标记名称{样式声明}
类选择器 .vista{color:blue}
定义页面上某个或者某类元素的样式
特殊用法
多类选择器
<any class="类名1 类名2 类名3......"></any>
分类选择器
元素选择器.类选择器{样式声明}
id选择器 #x0{background:#f00}
设置指定id元素的样式(专属定制)
语法：#id值{样式的声明}
群组选择器 #x1,#x2,table,...{ background-color:red }
将多个选择器放在一起定义公共的样式
语法：选择器1，选择器2，选择器3....{样式声明}
后代选择器 div p span{color:red}
通过元素的后代关系匹配元素 后代：一级或者多于一级的嵌套
语法：选择器1 选择器2 选择器3......{样式声明}
例：div div a{text-decoration:none}
子代选择器 div>div>span{color:green}
通过元素的子代关系匹配元素 子代：一级嵌套
语法：选择器1>选择器2>选择器3....{样式声明}
伪类选择器 :link
匹配元素的不同状态 所有的伪类选择器都是以:开头
语法：选择器:伪类{样式声明}
链接伪类
:link
#a1:link{color:red;} <a id="a1" href="http://www.sina.com">新浪</a>
:visited
#a1:visited{color:yellow;} <a id="a1" href="http://www.sina.com">新浪</a>
动态伪类
:hover
匹配鼠标悬停在元素上时的状态
:active
匹配元素被激活时的状态
:focus
匹配元素获取焦点时的状态
注意：如果4个伪类都作用到同一个a标签上， 会发生冲突，必须要按照一定的顺序 编写4个伪类，爱恨原则 L(link)OV(visited)E H(hover)A(active)TE
选择器权值
!important>1000
内联样式=1000
id选择器=100
类和伪类选择器=10
元素选择器=1
通用选择器=0
继承的样式 无权值
总结
1.当一个选择器中含有多个选择器时 需要将所有的选择器的权值进行相加 然后进行比较，权值大的优先级高
2.分组选择器，权值单独计算，不想家
3.如果样式后面，添加了!important, 该样式获取最高优先级 （内联样式不能加!important）
4.权值相同，就近原则
5.选择器权值计算，不会超过其最大的数量级 （1万个元素选择器权值相加，也不会大于10）
尺寸和边框
宽度
width
最大宽度 max-width:x0
元素宽度随着屏幕变化，而变化。 但是不会超过x0
最小宽度 min-width:x0
元素宽度随着屏幕变化，而变化。 但是不会小于x0
高度
height
max-height
min-height
长度单位
绝对单位
像素 px
in 英寸 1in=2.54cm
pt
磅值 1pt=1/72in 多用于表示字体大小
cm厘米
mm毫米
相对单位
em
相对于父元素数值 乘以的倍数 2em就是父元素数值*2
rem
相对于html标签 的数值乘以的倍数
%
相对于父元素的百分比
Day09
溢出
overflow
单边设置
overflow-x
x方向溢出设置
overflow-y
y方向溢出设置
属性
visible
可见的，溢出可见（默认值）
hidden
溢出部分隐藏
scroll
不管是否溢出， 都有滚动条
auto
仅溢出方向有滚动条
边框
border
写法
border:1px solid #000
宽度
width:x0
px单位的数字
%单位的数字
高度
height:x0
px单位的数字
%单位的数字
属性
边框厚度
px单位的数字
%单位的数字
style
solid
实线
dotted
圆点虚线
dashed
方块虚线
double
双实线
color
#16进制数
颜色单词
transparent
单边单属性设置
border-方向-属性
边框倒角
四角设置
border-radius
px单位的数字
%单位的数字
单角设置
通过两条邻边 确定要倒的角
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
阴影
写法
box-shadow:20px 30px 25px 15px blue inset
各位置参数含义
x方向，必填
y方向，必填
模糊距离，选填
阴影尺寸，选填
颜色，选填
是否为内阴影（填就是内阴影，不填就是外阴影）
轮廓
outline
写法
outline:5px solid #fff
属性
宽度，必填
样式，必填
颜色，选填，默认黑色
取消轮廓
outline:none
盒子模型
默认计算方式
实际占地宽度
左外边距+左边框+ 左内边距+内容区域宽度+ 右内边距+右边框+右外边距
实际占地高度
上外边距+上边框+ 上内边距+内容区域高度+ 下内边距+下边框+下外边距
外边距
单方向设置
margin-top
margin-right
margin-bottom
margin-left
简写方式
margin:x1
所有方向的外边距
margin:x1 x2
x1：纵向外边距 x2：横向外边距
margin:x1 x2 x3
x1：上外边距 x2：横向外边距 x3：下外边距
margin:x1 x2 x3 x4
x1：上外边距
x2：右外边距
x3：下外边距
x4：左外边距
margin:0 auto
设置块级元素 水平居中
取值
px单位的数字
%单位的数字
Day10
写CSS的思路
布局，大概位置，尺寸 （大概位置：水平居中，浮动，定位，margin）
背景，边框
文本样式，文本对齐
微调
注意:元素从上往下, 从左往右,从外往里, 一个一个元素写CSS
自带外边距的元素
<h1></h1> - <h6></h6>
<p></p>
<ol></ol>
<ul></ul>
<dl></dl>
<pre></pre>
<body></body>
外边距的特殊效果
当两个垂直的外边距相遇时， 他们将合并成一个， 最终的距离， 取决于两个外边距中较大的值。
行内元素上下外边距无效； 行内块设置垂直外边距， 整行元素都跟着位移
外边距溢出
特殊的情况下， 为子元素设置上外边距， 会作用到父元素上
特殊情况
父元素没有上边框
父元素内，子元素上边与父元素上边重合时
为这个子元素设置上外边距时
解决方案
为父元素添加上边框； 弊端：影响父元素实际占地高度
为父元素设置上内边距； 弊端：影响父元素实际占地高度
在父元素第一个子元素位置处， 添加一个空<table></table> 弊端：无
内边距
padding
取值
px为单位的数字
%为单位的数字
单边设置
padding-top
padding-right
padding-bottom
padding-left
简写方式
padding:x1
padding:x1 x2
padding:x1 x2 x3
padding:x1 x2 x3 x4
口诀：任，纵横，上横下，上右下左
指定盒子模型的 计算方式
box-sizing
content-box
实际占地宽度
左外边距+左边框+ 左内边距+内容区域宽度+ 右内边距+右边框+右外边距
实际占地高度
上外边距+上边框+ 上内边距+内容区域高度+ 下内边距+下边框+下外边距
border-box
设置width包含左边框+ 左内+内容区域宽度+ 右内+右边框
元素实际占地宽度
左外+width+右外
元素实际占地高度
上外+height+下外
背景
背景的简写方式
background:color url(picdir) repeat attachment position
背景颜色
background-color
颜色单词
#16进制数
transparent
背景图片
background-image
url(图片路径)
背景图片的平铺
background-repeat
repeat
默认，平铺
no-repeat
不平铺
repeat-x
水平方向平铺
repeat-y
垂直方向平铺
背景图片的尺寸
backgruond-size
width height px/%单位数字
cover
覆盖，背景图完全把 元素覆盖住，背景图 显示不完全没关系
contain
包含，元素要包含 完整整张图片， 元素没有被占满没关系
背景图片定位
background-position:x y
以px为单位的数字
以%为单位的数字
关键字
x
left
center
right
y
top
center
bottom
背景图片的固定
说明
将背景图片固定在 页面某个位置， 一直在可视区域中 显示，不会随着页面 滚动条滚动
background-attachment
scroll
默认值，不固定，背景图像会随着 页面其余部分的滚动而移动
fixed
当页面的其余部分滚动时， 背景图像不会移动
渐变
什么是渐变
渐变指的是多种颜色 平缓变化的一种显示效果
渐变的主要因素
色标:一种颜色,及其出现的位置 一个渐变至少两个色标
一个渐变至少两个色标
渐变的分类
线性渐变
以直线的方式来填充渐变色
写法
background-image:linear-gradient( angle, color1 x1, color2 x2, color3 x3, ... )
angle:标识渐变的方式/角度
角度
x0deg
关键字
to top
等同于0deg
to right
等同于90deg
to bottom
等同于180deg
to left
等同于270deg
color:要参与渐变的颜色
#16进制数
颜色单词
x1:渐变的位置
px/%为单位的数字
径向渐变
以圆形的方式实现渐变色
写法
background-image:radial-gradient( R at x0 y0, color1 x1, color2 x2, color3 x3, ... )
R:标识圆的半径
px单位数字
x0 y0:标识圆心位置
px/%单位数字
color:要参与渐变的颜色
#16进制数
颜色单词
x1:渐变的位置
px/%为单位的数字
重复渐变
将线性渐变,或者径向渐变,重复几次实现渐变
写法
重复线性渐变
background-image:repeating-linear-gradient( angle, color1 x1, color2 x2, color3 x3, ... )
angle:标识渐变的方式/角度
角度
x0deg
关键字
to top
等同于0deg
to right
等同于90deg
to bottom
等同于180deg
to left
等同于270deg
color:要参与渐变的颜色
#16进制数
颜色单词
x1:渐变的位置
px/%为单位的数字
重复径向渐变
background-image:repeating-radial-gradient( R at x0 y0, color1 x1, color2 x2, color3 x3, ... )
R:标识圆的半径
px单位数字
x0 y0:标识圆心位置
px/%单位数字
color:要参与渐变的颜色
#16进制数
颜色单词
x:渐变的位置
px为单位的数字 一定要用px,不然会出bug
关于浏览器对渐变兼容性的问题
各个浏览器新版本都支持渐变
对于不支持的旧版本,可以通过 添加浏览器内核前缀的方式,让 浏览器支持
注意:如果使用浏览器兼容写法 线性渐变的方向,需要直接写起始 位置的单词,而不再是to ...
旧版本的chrome/safari
-webkit-inear-gradient( left, #006699 0%, #f00 50%, #990066 100% )
旧版本的IE
-ms-inear-gradient( left, #006699 0%, #f00 50%, #990066 100% )
旧版本的opera
-o-inear-gradient( left, #006699 0%, #f00 50%, #990066 100% )
Day11
文本格式化
字体属性
字体属性简写方式
font:style variant weight size family
字体的样式
font-style
italic
normal
小型大写字母
font-variant
small-caps
normal
字体加粗
font-weight
bold
normal
400~1000
字体大小
font-size
取值：以px/pt为单位的数字
例：font-size:30px
字体类型
font-family
黑体
微软雅黑
宋体
幼圆
Consolas
Gadugi
Georgia
......
文本格式化 (大部分以text开头)
文本颜色
color
颜色单词
#16进制数
文本的排列(水平方向)
text-align
left
center
right
justify(两端对齐)
行高
特点和作用
特点： 定义一行数据的高度， 当行高的高度大于 字体本身的大小时， 那么该行文本将在 指定的行高内，呈现 垂直居中显示的效果
作用： 把行高的高度设置为与容器高度一致， 文字会在容器垂直居中显示， 只针对一行文字的情况使用
line-height
px为单位的数字
无单位数字. 行高是字体大小的倍数
线条的修饰
text-decoration
none
无线条修饰
underline
下划线
line-through
删除线
overline
上划线
首行的缩进
text-indent
px为单位的数字
文本阴影
text-shadow:10px 20px 15px #f00
横向距离
纵向距离
模糊距离
颜色
表格
表格常用样式属性
table的样式
尺寸
边框
背景
字体
文本
内外边距
td的样式
尺寸
边框
背景
字体
文本
内边距（外边距无效）
文本格式属性
背景属性
单元数据的垂直对齐方式
vertical-align
top
middle
bottom
注意：
普通文本的垂直排序， 不能使用vertical-align
vertical-align只在table，img使用
设置表格显示规则
table-layout
auto
默认值，自动布局
td的尺寸实际上由内容决定 自动布局比较灵活(优) 表格复杂时，加载速度较慢(缺) 适用于不确定每列大小并且不复杂的表格使用
fixed
固定表格布局
td的尺寸，由设置的宽高为准 td大小，取决于设置的尺寸 任何情况下都会加速加载表格(优) 固定布局，不够灵活(缺) 适用于确定每列尺寸时使用
表格特有的样式属性
边框合并
border-collapse
separate
默认值，边框分离状态
collapse
边框合并状态
边框边距
设置单元格与单元格之间的间距
border-spacing
px为单位的数字
一个值，同时设置水平和垂直的间距
两个值，第一个设置水平间距，第二个设置垂直
注意：表格必须保持在边框分离状态
表格标题的位置
caption-side
top（默认值）
bottom
总结
table的表现方式
table是一种特殊的表现方式；
实际尺寸是根据内容数据的多少决定的；
单元格小，内容多，那么自动撑开；
内容少，单元格就按尺寸展示
表格在页面中的渲染方式
整张表格读取到内存中， 一次性渲染在页面上
自动布局与 固定布局的对比
自动布局
单元格的大小会 自动适应内容
表格复杂时，加载速度较慢
自动布局比较灵活（优点）
适用于不确定每列大小的， 并且不复杂的表格
固定布局
单元格大小取决于设置的值
任何情况下，都会加速加载表格（优点）
固定表格布局不够灵活
适用于确定每列的尺寸的表格
定位
什么是定位
设置元素在页面中位置
分类
普通流定位 （默认文档流定位）
不同元素显示方式不一样， 但是都有默认的显示效果
每个元素在页面都有自己的空间
每个元素都是从父元素的左上角开始显示/渲染
块级元素都是按照从上到下的方式逐个排列，每个元素独占一行
行内元素时多个元素在同一行中显示，从左往右逐个排列
浮动定位
让块级元素横向显示
float
left
左浮动，让元素停靠在父元素的左边， 或者挨着左侧已有的浮动元素
right
右浮动，让元素停靠在父元素的右边， 或者挨着右侧已有的浮动元素
none
默认
特点
1.元素一旦浮动，脱离文档流， 不占页面空间，后面未浮动元素会上前补位
2.浮动元素会停靠在父元素的左边或者右边， 或者其他已浮动元素的边缘浮动解决了多个 块级元素在同一行内显示的问题
3.当父元素显示不下所有 浮动元素时，最后一个元素 将自动换行
4.浮动解决了多个块级元素在同一行显示的问题
浮动引发的特殊情况
1.当父元素显示不下所有元素时， 最后一个元素将换行
2.元素一旦浮动起来，如果没有设置宽度， 浮动元素宽度会以内容为准， 即：宽靠内容撑起来
3.元素一旦浮动起来会变为块级元素 （可以设置宽高，上下外边距有效）
4.浮动元素周围有 文字或者行内元素
文本，行内元素，行内块， 在与浮动元素相遇时，有特殊的算法， 上述元素，不会被浮动元素压在下方， 而是巧妙地避开，环绕着浮动元素显示
5.浮动元素占位
1.浮动元素一行显示不下， 会折行显示，这个折行， 会从高度上去离原来 最近的一个位置
2.如果之前的浮动元素高度太大， 会发生浮动元素占位问题； 即：浮动元素往哪边浮动，那一边的位置，就不能够使用
6.清除浮动
元素一旦浮动，就会对 后续元素带来一定的影响， （后续元素要上前补位）。 如果不想让后续元素上前补位， 要给后续元素添加清除浮动， 让后续元素不被之前浮动元素所影响。
clear
left
清除当前元素前面 左浮动元素的影响
right
清除当前元素前面 右浮动元素的影响
none
不清除（默认值）
both
清除所有方向浮动的影响
7.高度坍塌（浮动元素对父元素的影响）
父元素是块级，不写高， 那么高度是以内容高度为准， 但是，浮动元素脱离默认文档流， 不再占据页面高度了。 父元素的高度就为0了——高度坍塌
解决方案
1.给父元素添加高度 弊端：动态内容，不知道高
2.给父元素添加浮动 弊端：会给其他非浮动元素带来影响
3.为父元素设置overflow 取值为auto/hidden （弊端：如果父元素想溢出显示，冲突。 而且overflow和float根本不是一个原理。）
4.在父元素尾部追加一个空的块级元素， 并设置clear:both。 这个子元素默认宽是父级100%，由于 内部无内容，默认高的0；所以不会在 页面上看到，但是会占据该在的位置， 让父元素找到高。
相对定位
position:relative;
配合偏移属性，才能移动位置
特点
1.相对定位元素，没有脱离默认文档流， 页面上还占位，后面元素不补位。 （如果相对定位不使用偏移属性， 效果跟没有设置定位一样， 但该元素变成了已定位元素）
2.相对谁做偏移
使用的时机
1.在做元素微调的时候使用
2.为内部的子元素做绝对定位时， 提供目标（以我定位）
绝对定位
position:absolute
配合偏移属性使用
特点
1.绝对定位脱离默认文档流，页面不占位置 后面元素上前补位
2.绝对定位的位移参照物
绝对定位的元素会相对于离他 "最近的""已定位的""祖先元素"（上级元素） 去实现位置的初始化。 若没有已定位的祖先元素， 则相对于body去实现位置的初始化。
使用场合
1.有堆叠效果的布局
2.弹窗，弹菜单
注意
绝对定位会脱离默认文档流， 会使元素变为块级
固定定位
day12
一、显示
1.显示方式
显示方式决定了元素在 网页中的表现形式 （块级，行内，行内块...）
display
1.none
不显示元素，不占位置的隐藏
2.block
让元素表现得和块级元素一致
独占一行，可设置宽高和垂直外边距
3.inline
让元素表现得和行内元素一致
多个元素在一行中显示，不能修改尺寸， 垂直外边距无效
4.inline-block
让元素表现得和行内块元素一致
多个元素在一行中显示， 可以设置宽高和垂直外边距
5.table
让元素表现得和table一致
尺寸以内容为准，独占一行，可以设置宽高
注意：display一般将行内元素修改显示方式为块级或者行内块，便于设置宽高尺寸
2.显示效果
visibility
1.visible
默认值，可见的
2.hidden
隐藏，不可见
面试题
display:none和visibility:hidden的区别是什么？
display:none，会脱离文档流，不占页面空间
visibility:hidden，不脱离文档流，占据页面空间
3.透明度
opacity
取值[0,1]
面试题
opacity与rgba()的区别是什么
opacity作用于元素，只要跟元素相关的颜色都会跟着透明
rgba()只是设置当前元素透明度
4.垂直对齐方式
vertical-align
使用场合
1.表格中使用，控制表格中的文字垂直对齐方式
top/middle/bottom
2.img中使用
top/middle/bottom/baseline（基线，默认值）
一般情况下，编写网页的时候， 会把所有的图片垂直对齐方式 改为非基线对齐
5.光标样式
改变鼠标悬停在元素上时的状态
cursor
1.default
箭头
2.pointer
小手
3.text
文本光标
4.wait
等待（沙漏、转圈）
5.crosshair
十字光标
6.help
鼠标旁的问号
二、列表
1.列表标识项
list-style-type
1.none
2.disc
3.circle
4.square
2.列表标识图像
list-style-image:url(picture.jpg)
3.列表标识项的位置
list-style-position
outside
默认值。标识在li外，在ul/ol的padding-left里面
inside
标识在li内部
4.简写方式
list-style:type url position
最常使用的一种方式：list-style:none;去掉标识符
三、定位---相对、绝对、固定
1.属性
position
1.static
默认值，静态，默认文档流
2.relative
相对定位
3.absolute
绝对定位
4.fixed
固定定位
名词解释：已定位元素
将元素的position设置为relative/absolute/fixed 任意一个值，这个元素就叫做已定位元素。
2.偏移属性
top/right/bottom/left
取值：px单位数字
距离哪个方向有多远
Day13
一、定位
1.固定定位
将元素固定在页面的某个位置， 位置不好随着页面滚动条发生变化。 一直固定在可视区域
position:fixed;配合偏移属性top/right/bottom/left使用
特点
1.固定定位始终相对于body去实现位置的初始化
2.固定定位元素变成块级
3.固定定位元素脱离文档流
2.堆叠顺序
一旦将元素定为已定位元素， 元素们有可能出现堆叠效果， 默认堆叠顺序，后写的元素在上面。
改变堆叠顺序的属性：z-index
取值：无单位数字，数字越大，元素越靠上
注意
1.只有已定位元素才能使用z-index
2.父子元素间，z-index无效， 永远都是子元素压在父元素上。
CSS3 core（核心）
1.复杂选择器
1.兄弟选择器
兄弟元素，具备父级元素的平级元素 之间成为兄弟元素，注意：只能往后找，不能往前找
1.相邻兄弟选择器 获取紧紧挨在某元素后的兄弟元素
选择器1+选择器2{样式声明}
2.通用兄弟选择器 获取某元素后， 所有的满足条件的兄弟元素
选择器1~选择器2{样式声明}
2.属性选择器
id class name type value style title
允许通过元素所附带的属性及其值 来匹配页面元素
1.基本语法
[attr]
匹配页面中所有附带attr属性的元素
例：[id]{} [class]{} [style]{}
表示任意属性
elem[attr]{}
之某一个元素
匹配页面中所有附带attr属性的elem元素
例：div[id]{} p[class]{}
匹配多个属性的元素
[attr1][attr2]...{}
elem[attr1][attr2]...{}
[attr=value]{}
匹配attr属性为value的元素
例：[id="one"]{background:#ff0;}、 [title="this is the title"]{background:#ff0;}
2.属性值的匹配
[attr^=value]
匹配属性以指定值开头的元素
[attr$=value]
匹配属性以指定值结尾的元素
[attr~=value]
匹配属性值中包含指定单词的元素
[attr*=value]
匹配属性值中包含指定值的元素
3.伪类选择器
已经学过的伪类
:link
:visited
:hover
:active
:focus
1.目标伪类
elem:target{}
突出显示获得HTML锚点元素， 匹配被激活的锚点
2.结构伪类
elem:first-child{}
匹配元素是属于其父元素的第一个子元素
elem:last-child{}
匹配元素是属于其父元素的最后一个子元素
elem:nth-child(n){}
匹配元素是属于其父元素的第 n 个子元素
elem:empty{}
匹配没有子元素的元素
注意
有文本，哪怕是空格，也算子元素， 不一定非要有标签的嵌套才叫子元素； 真正意义上的“没有子元素的元素”， 仅限于形如<div></div>的元素
elem:only-child{}
匹配属于其父元素的唯一子元素
3.否定伪类：
not(selector){}
将满足指定selector 选择器的元素排除掉
4.伪元素选择器
elem::first-letter{}
匹配元素的文字的首字符
elem::first-line{}
匹配元素的首行
elem::selection{}
匹配用户选中的内容
注意：只能设置两种样式（字体颜色和背景颜色），其它的无效
5.内容生成
1.什么是内容生成
使用css动态地向元素中 插入一段内容（文本，元素）
2.伪元素选择器
1. ::before
在匹配的元素内容区域之前，添加内容
2. ::after
在匹配的元素内容区域之后，添加内容
3.内容属性
content 向匹配的位置处添加内容
取值
""括起来的字符串
url(图片)
3.可以解决的问题
1.高度坍塌
父元素不写高，所有子元素都浮动。 父元素的高度就为0
解决方案：在父元素最后添加空的 块级元素，并设置clear:both
day14
1.内容生成
高度坍塌
子元素外边距溢出
2.弹性布局
1.什么是弹性布局
弹性布局是一种灵活的布局方式， 主要解决某元素中子元素的布局方式。 为布局提供最大的灵活性
2.弹性布局的相关概念
1.弹性布局容器
要弹性布局的子元素的父元素称之为容器
2.弹性布局项目
要弹性布局的子元素称之为项目
3.主轴
项目们排列方向的一根轴，称之为主轴 如果项目们按照横向排列，水平轴就是主轴 如果项目们按照纵向排列，垂直轴就是主轴
4.交叉轴
与主轴垂直相交的轴，称之为交叉轴
3.语法
将元素变为弹性容器后， 他所有的元素将变为弹性项目， 都允许按照弹性布局的方式排列
属性：display
flex
将块级元素 变为容器
inline-flex
将行内元素 变为容器
注意：
1.给弹性项目添加float/clear/vertical-align，无效。
2.弹性项目如果是行内元素， 也可以设置尺寸
3.弹性容器设置text-align无效， 但是容器中的项目会继承容器的 text-align
4.容器的属性
1.主轴的方向
设置容器的主轴以及项目排列的方向
flex-direction
row
默认值，主轴就是x轴， 起点在左端
row-reverse
主轴是x轴，起点在右端
column
主轴是y轴，起点在顶端
column-reverse
主轴是y轴，起点在底端
2.设置压缩、换行
作用：当一个主轴排列不下所有项目， 可以设置压缩显示或者换行显示
flex-wrap
no-wrap
默认值，空间不够也不换行， 项目自动缩小
wrap
换行，不压缩
wrap-reverse
换行并反转
Day15
过渡
1.什么是过渡
让CSS属性的值 在一段时间内平缓变化的效果
2.语法
1.设置过渡的属性
transition-property
取值
1. all
支持所有可以过渡的属性
2. 具体哪种属性的属性名
例
transition-property: background border-radius;
多个属性名之间用 空格或换行隔开
支持过渡效果的属性
1.颜色属性
2.所有取值为数字的属性
3.转换属性
4.阴影属性
5.visibility
2.设置过渡的时长
指定多长时间内完成过渡的操作
transition-duration
取值：以s或者ms为单位的数字
3.过渡时间曲线函数
transition-timeing-function
1.ease
默认值，慢速开始， 加速，慢速结束
2.linear
匀速
3.ease-in
慢速开始，快速结束
4.ease-out
快速快速，慢速结束
5.ease-in-out
慢速快速，加速， 减速，慢速结束
4.设置过渡延时时间
transition-delay
以s或者ms为单位的数字
5.过渡属性的编写位置
1.要发生过渡的元素，本身的样式中编写
管去管会
2.写在过渡的触发操作里
只去不回
6.过渡的简写方式
transition
property duration timing function delay;
最简化的写法：transition:duration;
4.转换
1.什么是转换
改变元素在页面中的位置、大小、 角度、形状的一种方式
2D转换
1.只在x轴和y轴上，发生的转换效果
2.转换的属性
transform
取值
1. none
默认值，无任何转换效果
2. transform-function
如果有多个转换函数，用空格隔开
位移，改变元素在页面中的位置
translate( )
translate(v1)
指定元素在x轴上的位移距离
translate(v1,v2)
v1指定元素在x轴上的位移距离， v2指定元素在y轴上的位移距离
translateX(v)
仅设置x轴上的位移
translateY(v)
仅设置y轴上的位移
scale( )
scale(v1)
横向和纵向的缩放比，默认值为1
v1>1
放大
0<v1<1
缩小
-1<v1<0
缩小并反转
v1<-1
放大并反转
scale(v1,v2)
v1：横向的缩放比
v2：纵向的缩放比
scaleX(v1)
单独设置水平缩放
scaleY(v1)
单独设置垂直缩放
rotate(xdeg)
x>0 顺时针 x<0 逆时针
注意：
1.旋转原点会影响最后旋转效果
2.旋转是连同坐标轴一起旋转的， 旋转后再位移，会影响位移效果。
skew()
倾斜，改变形状
skew(v1)
v1：让元素向着x轴发生倾斜效果， 实际上是改变y轴的角度。
v1>0逆时针倾斜 v1<0顺时针倾斜
skew(v1,v2)
v1：让元素向着x轴发生倾斜效果， 实际上是改变y轴的角度。
v2：让元素向着y轴发生倾斜效果， 实际上是改变x轴的角度。
skewX(v)
仅设置y轴倾斜
skewY(v)
仅设置x轴倾斜
3.转换原点
transform-origin
取值：px %单位数字、关键字top bottom right left
2个值，表示原点在x轴和y轴上的位置
3个值，表示原点在x轴和y轴和z轴上的位置
3D转换
1.增加了z轴上的转换效果
2.透视距离
模拟人的眼睛到元素之间的距离， 根据元素不同，元素的3D转换效果也会不同
perspective
取值：px单位数字
注意：该属性要加载转换元素的父元素上
3.3D旋转
transform
取值
1.rotateX(Xdeg)
以x轴为中心轴旋转元素 （烤羊腿）
2.rotateY(Ydeg)
以y轴为中心轴旋转元素 （旋转门）
3.rotateZ(Zdeg)
以z轴为中心轴旋转元素 （风车）
4.rotate3d(x,y,z,Ndeg)
x,y,z取值大于0的数字的时候， 表示该轴参与旋转， 取值为0表示不参与旋转。
动画
1.什么是动画
使元素从一种样式逐渐 变为另一种样式， 就是将多个过渡放在一起。
2.动画是通过“关键帧”来控制 每一步播放效果的
关键帧
1.执行的时间点
2.该时间点上要应用、的样式
3.动画的使用步骤
1.声明动画
@keyframes 动画名称{ 0%{元素动画开始时，该元素的样式} x1%{元素动画进行到x1%时，该元素的样式} x2%{元素动画进行到x2%时，该元素的样式} x3%{元素动画进行到x3%时，该元素的样式} ...... 100%{元素动画完成时，该元素的样式} }
2.调用动画
animation-name
调用的动画名称
animation-duration
动画持续时间 s/ms;
animation-timing-function
动画速度的时间曲线函数
ease/linear/ease-in/ ease-out/ease-in-out
animation-delay
动画延迟时间
s/ms
animation-iteration-count
设置动画的播放次数
取值
1.具体的数字
2.infinite
无限播放
animation-direction
取值：
1.normal
默认值，正常播放
2.reverse
逆向播放
3.alternate
轮流播放，奇数次正向， 偶数次逆向。
动画的简写方式
animation:name duration timing-function delay count direction;
animation-fill-mode
设置动画在播放前 和播放后的状态
取值
none
默认值，前后无填充
forwards
动画播放完成后，将保持在 最后一帧的样式上
backgwards
动画播放之前的延迟状态， 保持在第一帧的样式上
both
forwards 和 backwards 都生效
animation-play-state
设置动画的播放或暂停
取值：
paused
暂停
running
播放
3.动画的兼容性
如果要兼容低版本浏览器， 需要在动画声明之前加前缀
-webkit-keyframes 动画名称{}
-ms-keyframes 动画名称{}
-moz-keyframes 动画名称{}
-o-keyframes 动画名称{}
CSS优化
1.优化的目的
减小服务器压力
提升用户体验
2.CSS优化的原则
尽量减少HTTP请求的个数
页面顶部引入CSS文件
将CSS和JS文件放到独立的文件中
3.CSS代码优化
合并样式（提取公因式） 缩小样式文件，减少样式的重写
避免出现空的src、href
选择更优的样式属性
代码压缩
响应式
1.什么是响应式
Responsive web page 自适应网页
可以根据浏览器设备的不同（pc,pad,phone） 而自动更改布局，图片，文字效果， 不影响用户体验
2.响应式网页必须做到
1.布局：不能固定宽度， 必须使用流式布局
2.文字和图片大小随着容器的大小而改变
3.媒体查询技术（根据不同设备，显示不同效果）
响应式网页存在的问题：
代码复杂度极大地增加，
只适用于内容不太多的 页面（企业的官网，门户网站）。
3.如何测试响应式网页
1.使用真实设备测试
好处：真实可靠
坏处：成本高，测试任务量大
2.使用第三方模拟器
好处：测试极其方便
坏处：测试效果有限， 有待进一步验证。
3.使用Chrome等浏览器 自带的模拟器
4.编写响应式网页
1.在meta中声明viewport元标签（手机适配）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-sealable=0, shrink-to-fit=no,viewoprt-fit=cover">
width=device-width
设置视口宽度 为设备宽度
initial-scale=1.0
表示视口宽度 是否能缩放
1.0代表不缩放
maximum-scale=1.0
允许缩放的最大倍率
user-sealable=0
是否允许用户手动缩放
取值
yes
no
1
0
设置视口最精简的写法
<meta name="viewport" content="width=device-width, initial-scale=1">
2.所有内容，文字，图片，使用相对尺寸(%/em/rem)， 不要使用绝对值数字！！！
3.流式布局+弹性布局，再配合媒体查询技术
4.CSS3的媒体查询技术
Media Query
media 专指设备
比如：screen(pc/pad/phone),tv,print......
媒体查询，可以自动根据当前浏览设备的不同， 或者屏幕尺寸，方向，解析度不同，有选择地执行 部分CSS样式，忽略其他部分CSS样式
1.使用media query
根据媒体查询结果， 使用不同的外部CSS文件
<link rel="stylesheet" href="pad.css" media="screen and (min-width:768px) and (max-width:991px)">
注意：这种方法使用较少， 所有的CSS文件都会被加载， 每个CSS文件中存在很多重用代码， 不符合优化原则。
2.根据媒体查询的结果， 执行同一个CSS文件， 不同代码块
@media screen and (min-width:XXX) and (max-width:XXX){ 选择器{} 选择器{} .... }
BootStrap
Day16
一、使用boot(boot入门)
1.下载boot
2.制作boot模板
二、全局CSS样式
1.按钮相关的class
基本类 .btn
按钮的颜色
危险 .btn-danger
成功 .btn-success
警告 .btn-warning
信息 .btn-info
主要 .btn-primary
次要 .btn-secondary
深色 .btn-dark
浅色 .btn-light
链接 .btn-link
不同边框的按钮
.btn-outline-danger
.btn-outline-success
.btn-outline-warning
.btn-outline-info
.btn-outline-primary
.btn-outline-secondary
.btn-outline-dark
.btn-outline-light
.btn-outline-link
不同大小的按钮
.btn-sm 小按钮
.btn-lg 大按钮
.btn-block 块级按钮
2.图片和边框
.rounded
.rounded-circle
.img-thumbnail
.img-fluid
3.文字相关class
字体大小和加粗
.h1~.h6
字体加粗
.font-weight-bold
.font-weight-normal
.font-weight-light
字体颜色
.text-danger
.text-success
.text-warning
.text-info
.text-primary
.text-secondary
.text-dark
.text-light
.text-link
水平对齐
.text-left
.text-center
.text-right
.text-justify
（ justify没有响应式！）
媒体查询的 水平对齐
text-xl-left
text-xl-center
text-xl-right
text-lg-left
text-lg-center
text-lg-right
text-md-left
text-md-center
text-md-right
text-sm-left
text-sm-center
text-sm-right
字体大写
.text-uppercase
字体小写
.text-lowercase
首字母大写
.text-capitalize
4.列表相关的class
使用boot的列表类，要先把列表创建成列表组
ul-->list-group
li--->list-group-item
激活状态列
.list-group-item.active
禁用列表项
.list-group-item.disabled
列表项颜色
.list-group-item-danger
.list-group-item-success
.list-group-item-warning
.list-group-item-info
.list-group-item-primary
.list-group-item-secondary
.list-group-item-dark
.list-group-item-light
.list-group-item-link
去除列表项标识符
.list-unstyled
5.table相关样式类
基本类 .table
带边框的表格
.table-bordered
各行变色表格
.table-striped
带悬停效果
.table-hover
表格颜色
.table-danger
.table-success
.table-warning
.table-info
.table-primary
.table-secondary
.table-dark
.table-light
.table-link
响应式表格 （要写在table标签的父元素中）
.table-responsive-xl
.table-responsive-lg
.table-responsive-md
.table-responsive-sm
三、辅助类
边框
基本类
.border
.border-top
.border-right
.border-bottom
.border-left
边框颜色
.border-danger
.border-success
.border-warning
.border-info
.border-primary
.border-secondary
.border-dark
.border-light
.border-link
去除边框
.border-0
.border-top-0
.border-right-0
.border-bottom-0
.border-left-0
倒角
默认倒角
.rounded
.rounded-0
设置一侧的倒角
.rounded-top
.rounded-right
.rounded-bottom
.rounded-left
设置圆
.rounded-circle
背景颜色
.bg-danger
.bg-success
.bg-warning
.bg-info
.bg-primary
.bg-secondary
.bg-dark
.bg-light
.bg-link
显示
.visible
隐藏
.invisible
浮动
.float-xl-left
.float-xl-right
.float-xl-none
.float-lg-left
.float-lg-right
.float-lg-none
.float-md-left
.float-md-right
.float-md-none
.float-sm-left
.float-sm-right
.float-sm-none
Day17
一.boot的css全局样式
1.弹性布局
(1)创建弹性容器
.d-xl-flex
.d-lg-flex
.d-md-flex
.d-sm-flex
.d-xl-inline-flex
.d-lg-inline-flex
.d-md-inline-flex
.d-sm-inline-flex
(2)设置主轴方向
flex-xl-row
flex-xl-column
flex-xl-row-reverse
flex-xl-column-reverse
flex-lg-row
flex-lg-column
flex-lg-row-reverse
flex-lg-column-reverse
flex-md-row
flex-md-column
flex-md-row-reverse
flex-md-column-reverse
flex-sm-row
flex-sm-column
flex-sm-row-reverse
flex-sm-column-reverse
(3)项目在主轴上排列方式
justify-content-start
justify-content-end
justify-content-center
justify-content-between
justify-content-around
2.表单
(1)表单元素排列方向，form标签的样式
.form-group
堆叠表单(垂直排列，全屏的宽度)
.form-inline
内联表单(水平方向排列)
(2)样式类
.form-control
块级，W-100
.form-check
相对定位，向右1.25rem
.form-check-input
绝对定位，向左1.25rem
.form-check-label
字体颜色，下外边距
.form-text
块级，上外边距0.25rem
二.组件
1.下拉菜单
样式布局最小的结构--3层结构
.dropdown-toggle在按钮上画三角
. dropdown-header给菜单加标题
<div class=" dropdown-divider"></div> 给menu加分割线
disabled禁用
事件的写法
在button写自定义属性
data-toggle="dropdown"
数据切换的目标，是dropdow-menu元素
2.按钮组
在外包裹的div上添加类