CSS基础
CSS常见属性与选择器
文字属性
文字属性缩写
文本属性
颜色属性
标签选择器
id选择器
后代选择器
子元素选择器
交集选择器
并集选择器
相邻兄弟选择器 CSS2
通用兄弟选择器 CSS3
序选择器CSS3
属性选择器
属性选择器中选取属性的取值
通配符选择器
CSS三大特性
继承性
层叠性
优先级
优先级之!important
优先级的权重
div标签
span标签
转换CSS元素的显示模式
CSS基础之背景
控制背景图片的位置
具体的像素
背景属性缩写
背景关联方式
背景图片和插入图片区别
边框
内边距
外边距
CSS盒子模型
box-sizing属性
box-sizing取值
清空默认边距(外边距和内边距)
行高
字体和字号
浮动流
浮动元素贴靠现象
浮动元素字围现象
什么时候使用标准流什么时候使用浮动流
清除浮动
浮动元素高度问题
清除浮动的几种方法
清除浮动的第一种方式
清除浮动的第二种方式
清除浮动的第三种方式
清除浮动的第四种方式
清除浮动的第五种方式
伪元素选择器（CSS3）
网易注册页面小结
定位流
定位流-相对定位
绝对定位
绝对定位-注意点
绝对定位-子绝父相
绝对定位的元素水平居中
定位流-固定定位
z-index属性
a标签的伪类选择器
过渡模块
过渡模块-其它属性
过渡模块-连写
过渡模块-弹性效果
过渡模块-手风琴效果
2D转换模块
2D转换模块-形变中心点
2D转换模块-旋转轴向
2D转换模块-综合练习
盒子阴影和文字阴影
翻转菜单-综合练习
动画模块
动画模块-其它属性
动画模块-连写
动画模块-无限滚动
3D转换模块
背景尺寸属性
背景图片定位区域属性
背景绘制区域属性
多重背景图片
CSS编写格式
CSS常见属性与选择器
文字属性
注意点：
如果取值是中文， 需要用双引号或者单引号括起来
设置的字体必须是用户电脑里面已经安装的字体
如果设置的字体不存在, 那么系统会使用默认的字体来显示
默认使用宋体
如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
可以给字体设置备选方案
格式:
font-family:"字体1", "备选方案1", "...";
如果想给中文和英文分别单独设置字体, 怎么办?
但凡是中文字体, 里面都包含了英文
但凡是英文字体, 里面都没有包含中文
也就是说中文字体可以处理英文, 而英文字体不能处理中文
font-family: Arial, "微软雅黑";
注意点:
如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面
补充在企业开发中最常见的字体有以下几个
中文: 宋体/黑体/微软雅黑
英文: "Times New Roman"/Arial
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
文字属性缩写
缩写格式:
font: style weight size family;
例如:
font:italic bold 10px "楷体";
注意点:
1.在这种缩写格式中有的属性值可以省略
sytle可以省略
weight可以省略
2.在这种缩写格式中style和weight的位置可以交换
3.在这种缩写格式中有的属性值是不可以省略的
size不能省略
family不能省略
4.size和family的位置是不能顺便乱放的
size一定要写在family的前面, 而且size和family必须写在所有属性的最后
文本属性
1.文本装饰的属性
格式:
text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
快捷键:
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
2.文本水平对齐的属性
格式:
text-align: right;
取值:
left 左
right 右
center 中
快捷键
ta text-align: left;
tar text-align: right;
tac text-align: center;
3.文本缩进的属性
格式:
text-indent: 2em;
取值:
2em, 其中em是单位, 一个em代表缩进一个文字的宽度
快捷键
ti text-indent:;
ti2e text-indent: 2em;
颜色属性
1.在CSS中如何通过color属性来修改文字颜色
格式: color: 值;
取值:
1.1英文单词
一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达
1.2rgb
rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
格式: rgb(0,0,0)
那么这个格式中的
第一个数字就是用来设置三原色的光源元件红色显示的亮度
第二个数字就是用来设置三原色的光源元件绿色显示的亮度
第三个数字就是用来设置三原色的光源元件蓝色显示的亮度
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
只要让红色/绿色/蓝色的值都一样就是灰色
而且如果这三个值越小那么就越偏黑色, 越大就越偏白色
例如: color: rgb(200,200,200);
1.3rgba
rgba中的rgb和前面讲解的一样, 只不过多了一个a
那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明
例如: color: rgba(255,0,0,0.2);
1.4十六进制
在前端开发中通过十六进制来表示颜色, 其实本质就是RGB
十六进制中是通过每两位表示一个颜色
例如:
1
FFEE00 FF表示R EE表示G 00表示B
1.5十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
例如:
1
FFEE00 == #FE0
注意点:
1.如果当前颜色对应的两位数字不一样, 那么就不能简写
1
123456
2.如果两位相同的数字不是属于同一个颜色的, 也不能简写
1
122334
标签选择器
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式:
1
标签名称
2
{
3
属性:值;
4
}
注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)
id选择器
作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式:
1
id名称
2
{
3
属性:值;
4
}
标签格式：
1
迟到毁一生
注意点: 1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id 2.在同一个界面中id的名称是不可以重复的 3.在编写id选择器时一定要在id名称前面加上# 4.id的名称是有一定的规范的id的名称只能由字母/数字/下划线
a-z 0-9 _
id名称不能以数字开头
id名称不能是HTML标签的名称
不能是a h1 img input ...
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
类选择器
作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式:
1
.类名
2
{
3
属性:值;
4
}
注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名
标签格式:
1
<标签名称 class="类名1 类名2 ...">
错误的写法:
1
后代选择器
作用: 找到指定标签的所有特定的后代标签, 设置属性
格式:
标签名称1 标签名称2
{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去
子元素选择器
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式:
标签名称1>标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
交集选择器
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式:
选择器1选择器2
{
属性: 值;
}
注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称
3.交集选择器仅仅作为了解, 企业开发中用的并不多
并集选择器
作用: 给所有选择器选中的标签设置属性
格式:
选择器1,选择器2
{
属性:值;
}
注意点:
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称
相邻兄弟选择器 CSS2
作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:
选择器1+选择器2{
属性:值;
}
注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
通用兄弟选择器 CSS3
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
格式:
选择器1~选择器2{
属性:值;
}
注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
序选择器CSS3
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中只有一个标签的子元素标签
注意点: 不区分类型
2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
1
选中同级别第一个p标签进行修饰
2
p:first-child
3
{
4
color: red;
5
}
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-of-type(odd) 选中同类型中的所有奇数
:nth-of-type(even) 选中同类型中的所有偶数
:nth-child(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增
属性选择器
作用:
根据指定的属性名称找到对应的标签, 然后设置属性
格式:
1
[attribute]
2
作用:根据指定的属性名称找到拥有指定属性名称的标签, 然后设置属性
格式：
1
[attribute=value]
2
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
CSS写法：
1
input[type=password]
2
{
3
}
4
属性选择器中选取属性的取值
属性的取值是以什么开头的
[attribute|=value] CSS2 只能找到value开头,并且value是被-和其它内容隔开的
[attribute^=value] CSS3 只要是以value开头的都可以找到, 无论有没有被-隔开
属性的取值是以什么结尾的
[attribute$=value] CSS3
属性的取值是否包含某个特定的值得
[attribute~=value] CSS2 只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
[attribute*=value] CSS3 只要包含value就可以找到
通配符选择器
作用:
给当前界面上所有的标签设置属性
格式:
1
*{
2
属性:值;
3
}
4
注意点:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
CSS三大特性
继承性
作用:
给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意点:
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
应用场景:
一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容
body{}
层叠性
作用:
层叠性就是CSS处理冲突的一种能力
注意点:
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性
CSS全称 Cascading StyleSheet
优先级
作用:
当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
2.优先级判断的三种方式
2.1间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
2.2相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
2.3不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承 > 浏览器默认
优先级之!important
!important
作用:
用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
注意点:
!important只能用于直接选中, 不能用于间接选中
通配符选择器选中的标签也是直接选中的
!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
!important必须写在属性值的分号前面
!important前面的感叹号不能省略
优先级的权重
作用:
当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
权重的计算规则
首先先计算选择器中有多少个id, id多的选择器优先级最高
如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
也就是说优先级如果一样, 那么谁写在后面听谁的
注意点:
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
div标签
作用:
一般用于配合css完成网页的基本布局
span标签
作用: 一般用于配合css修改网页中的一些局部信息
在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素
div和span有什么区别?
div会单独的占领一行,而span不会单独占领一行
div是一个容器级的标签, 而span是一个文本级的标签
容器级的标签和文本级的标签的区别?
容器级的标签中可以嵌套其它所有的标签
文本级的标签中只能嵌套文字/图片/超链接
容器级的标签（块级元素，会独占一行）
div h ul ol dl li dt dd ...
独占一行
如果没有设置宽度, 那么默认和父元素一样宽
如果设置了宽高, 那么就按照设置的来显示
文本级的标签（所有文本级标签除了p标签，其余文本级标签都是行内元素，不会独占一行）
span p buis strong em ins del ...
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
行内元素是不可以设置宽度和高度的
行内块级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
注意点:
哪些标签是文本级的哪些标签是容器级的, 我们不用刻意去记忆, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套
转换CSS元素的显示模式
设置元素的display属性
display取值
block 块级
inline 行内
inline-block 行内块级
快捷键
di display: inline;
db display: block;
dib display: inline-block;
CSS基础之背景
控制背景图片的位置
在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置
格式:
background-position: 水平方向 垂直方向;
取值
具体的方位名词
水平方向: left center right
垂直方向: top center bottom
具体的像素
background_position属性有四个参数，分别为 上 右 下 左
如果只用两个参数则默认为 是： 上 右
例如: background-position: 100px 200px;
记住一定要写单位, 也就是一定要写px
记住具体的像素是可以接收负数的，表示向左移动多少像素
快捷键:
bp background-position: 0 0;
注意点:
同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色
背景属性缩写
格式：
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
快捷键:
bg+ background: #fff url() 0 0 no-repeat;
注意点：
background属性中， 任何一个属性都可以被省略
背景关联方式
默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式
如何修改背景关联方式？
在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的
格式：
background-attachment：scroll;
取值：
scroll 默认值，会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
快捷键:
ba background-attachment:;
背景图片和插入图片区别
背景图片仅仅是一个装饰, 不会占用位置
1
1
3
我是文字
4
边框
边框就是环绕在标签宽度和高度周围的线条
边框属性的格式
连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色;
solid：实线
dashed：虚线
dotted：小圆点线
double：双线
快捷键:
bd+ border: 1px solid #000;
注意点:
连写格式中颜色属性可以省略, 省略之后默认就是黑色
连写格式中样式不能省略, 省略之后就看不到边框了
连写格式中宽度可以省略, 省略之后还是可以看到边框
连写(分别设置四条边的边框)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
连写(分别设置四条边的边框)
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
注意点:
这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样
非连写(方向+要素)
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
同一个选择器中后面的边框属性会覆盖前面的边框属性
内边距
边框和内容之间的距离就是内边距
格式：
非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
连写
padding: 上 右 下 左;
这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样
注意点:
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色
外边距
标签和标签之间的距离就是外边距
格式：
非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
连写
margin: 上 右 下 左;
这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样
在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
注意点:
外边距的那一部分是没有背景颜色的
CSS盒子模型
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子
结论
1.在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙
内容/元素的宽度和高度
就是通过width/height属性设置的宽度和高度
元素的宽度和高度
宽度 = 左边框 + 左内边距 + 内容width + 右内边距 + 右边框
高度 同理可证
元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + 内容width + 右内边距 + 右边框 + 右外边距
高度 同理可证
box-sizing属性
这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
box-sizing取值
content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
border-box（保证盒子大小不变，改变盒子内部）
元素的宽高 = width/height的宽高
注意点:
1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
margin本质上是用于控制兄弟关系之间的间隙的
1
margin-top:150px;
2
margin-left:150px;
注意点:
1.在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中
2.margin: 0 auto; 只对水平方向有效, 对垂直方向无效
text-align:center;和margin:0 auto;区别
text-align: center;
作用：
设置盒子中存储的文字/图片水平居中
margin:0 auto;
作用：
让盒子自己水平居中
清空默认边距(外边距和内边距)
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距
如何清空默认的边距
格式
*{
margin: 0;
padding: 0;
}
注意点
通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好
企业开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
行高
在CSS中所有的行都有自己的行高
注意点:
行高和盒子高不是同一个概念
行高指的是每行内容的高度
盒子高指的是元素的高度
规律:
1.文字在行高中默认是垂直居中的
2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的
简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可
3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中
字体和字号
注意点:
1.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差
2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差
3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离
浮动流
网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
1.标准流(文档流/普通流)排版方式
1.1其实浏览器默认的排版方式就是标准流的排版方式
1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
2.浮动流排版方式
2.1浮动流是一种"半脱离标准流"的排版方式
2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
浮动元素排序规则
相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
注意点:
1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;
特点:
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是级元素/行内元素/行内块级元素都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
3.定位流排版方式
浮动元素的脱标
脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
浮动元素脱标之后会有什么影响
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
浮动元素排序规则
相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
浮动元素贴靠现象
1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
浮动元素字围现象
（纯粹浮动，不能设置位置，否则效果失效）浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
什么时候使用标准流什么时候使用浮动流
垂直方向使用标准流, 水平方向使用浮动（float）流
拿到一个很复杂的界面如何入手?
从上至下布局
从外向内布局
水平方向可以先划分为一左一右再对左边或者右边进行进一步布局
清除浮动
浮动元素高度问题
在标准流中内容的高度可以撑起父元素的高度
在浮动流中浮动的元素是不可以撑起父元素的高度的
清除浮动的几种方法
清除浮动的第一种方式
给前面一个父元素设置高度
注意点:
在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
清除浮动的第二种方式
给后面的盒子添加clear属性
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素（经常使用）
注意点:
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效
清除浮动的第三种方式
隔墙法
2.外墙法
2.1在两个盒子中间添加一个额外的块级元素
2.2给这个额外添加的块级元素设置clear: both;属性
注意点:
外墙法它可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性
3.内墙法
3.1在第一个盒子中所有子元素最后添加一个额外的块级元素
3.2给这个额外添加的块级元素设置clear: both;属性
注意点:
内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性
4.外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
5.在企业开发中不常用隔墙法来清除浮动
清除浮动的第四种方式
利用伪元素选择器清除浮动
本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样
注意点:
IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性
1
.box1::after{
2
/设置添加的子元素的内容为空/
3
content: "";
4
/设置添加的子元素为块级元素/
5
display: block;
6
/设置添加的子元素的高度为0/
7
height: 0;
8
/设置添加的子元素看不见/
9
visibility: hidden;
10
/给添加的子元素设置clear: both;/
11
clear: both;
12
}
13
.box1{
14
/兼容IE6/
15
*zoom:1;
16
}
清除浮动的第五种方式
1.overflow: hidden;作用
1.1可以将超出标签范围的内容裁剪掉
1.2清除浮动
1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
注意点:
IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性
1
.box1{
2
background-color: red;
3
overflow: hidden;
4
*zoom:1;
5
}
伪元素选择器（CSS3）
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
格式:
给指定标签的内容前面添加一个子元素
标签名称::before{
属性名称:值;
}
给指定标签的内容后面添加一个子元素
标签名称::after{
属性名称:值;
}
1
div::before{
2
content: "爱你";
3
width: 50px;
4
height: 50px;
5
background-color: pink;
6
display: block;
7
}
8
div::after{
9
/指定添加的子元素中存储的内容/
10
content: "么么哒";
11
/指定添加的子元素的宽度和高度/
12
width: 50px;
13
/height: 50px;/
14
/内容是可以超出标签的范围的, 所以高度为0依然可以看见内容/
15
height:0;
16
background-color: pink;
17
/指定添加的子元素的显示模式/
18
display: block;
19
/隐藏添加的子元素/
20
visibility: hidden;
21
}
网易注册页面小结
ol标签（去除默认样式）
list-style: none;
a标签（去除文本默认样式）
text-decoration: none;
p标签（文本排列居右）
text-align: right;
p标签（去除样式）
border:none;
p标签（行高）
line-height: 48px;
保证适当的注释，方便多多
定位流
相对定位
绝对定位
固定定位
静态定位
定位流-相对定位
相对定位就是相对于自己以前在标准流中的位置来移动
相对定位注意点
相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
在相对定位中同一个方向上的定位属性只能使用一个
由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
相对定位应用场景
用于对元素进行微调
配合后面学习的绝对定位来使用
绝对定位
绝对定位就是相对于body来定位
绝对定位注意点
绝对定位的元素是脱离标准流的
绝对定位的元素是不区分块级元素/行内元素/行内块级元素
规律
1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指的定位流是指绝对定位/相对定位/固定定位
2.3定位流中只有静态定位不行
3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
绝对定位-注意点
1.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
2.一个绝对定位的元素会忽略祖先元素的padding
绝对定位-子绝父相
子绝父相:
子元素用绝对定位, 父元素用相对定位
相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
position: relative;
left: -42px;
top: -18px;
绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
position: absolute;
left: 526px;
top: 90px;
绝对定位的元素水平居中
只需要设置绝对定位元素的left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
1
div{
2
width: 300px;
3
/width: 50%;/
4
height: 50px;
5
background-color: red;
6
/margin: 0 auto;/
7
position: absolute;
8
left: 50%;
9
margin-left: -150px;
10
}
定位流-固定定位
固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动
注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样，不区分行内/块级/行内块级
3.IE6不支持固定定位
1
div{
2
width: 200px;
3
height: 2000px;
4
border: 1px solid #000;
5
background-image: url(images/girl.jpg);
6
background-repeat: no-repeat;
7
background-attachment: fixed;//背景固定定位，不随着滚动条的滚动而滚动
8
}
1
span{
2
width: 100px;
3
height: 100px;
4
background-color: yellow;
5
position: fixed;//固定定位
6
}
7
1
a{
2
position: fixed;
3
right: 10px;
4
bottom: 10px;
5
width: 50px;
6
/height: 50px;/
7
background-color: rgba(0,0,0,0.3);
8
text-align: center;
9
line-height: 50px;//行高会撑起盒子的高度，所以可以取消盒子的高度
10
text-decoration: none;
11
}
12
z-index属性
默认情况下所有的元素都有一个默认的z-index属性, 默认取值是0.
z-index属性的作用是专门用于控制定位流元素的覆盖关系的
1.默认情况下定位流的元素会盖住标准流的元素
2.默认情况下定位流的元素后面编写的会盖住前面编写的
3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
注意点:
1.从父现象
1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面
1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面
a标签的伪类选择器
a标签的伪类选择器是专门用来修改a标签不同状态的样式的
通过我们的观察发现a标签存在一定的状态
默认状态, 从未被访问过
被访问过的状态
鼠标长按状态
鼠标悬停在a标签上状态
格式
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式
1
a:active
2
{
3
color: pink;
4
}
5
注意点
a标签的伪类选择器可以单独出现也可以一起出现
a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
编写的顺序必须要个的遵守爱恨原则 love hate
如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写
1.在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
2.在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
3.在企业开发中和a标签文字/背景相关的都写在伪类选择器中
过渡模块
1,过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长
2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
1
div{
2
width: 100px;
3
height: 50px;
4
background-color: red;
5
/告诉系统哪个属性需要执行过渡效果/
6
transition-property: width, background-color;
7
/告诉系统过渡效果持续的时长/
8
transition-duration: 5s, 5s;
9
10
/transition-property: background-color;/
11
/transition-duration: 5s;/
12
/告诉系统延迟多少秒之后才开始过渡动画/
13
/transition-delay: 2s;/
14
}
15
/:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上/
16
div:hover{
17
width: 300px;
18
background-color: blue;
19
}
20
过渡模块-其它属性
linear：匀速
ease：逐渐慢下来
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速
1
div {
2
width: 100px;
3
height: 50px;
4
background-color: red;
5
transition-property: width;
6
transition-duration: 5s;
7
/告诉系统延迟多少秒之后才开始过渡动画/
8
/transition-delay: 2s;/
9
}
10
div:hover{
11
width: 300px;
12
}
13
ul{
14
width: 800px;
15
height: 500px;
16
margin: 0 auto;
17
background-color: pink;
18
border: 1px solid #000;
19
}
20
ul li{
21
list-style: none;
22
width: 100px;
23
height: 50px;
24
margin-top: 50px;
25
background-color: blue;
26
transition-property: margin-left;
27
transition-duration: 10s;
28
}
29
ul:hover li{
30
margin-left: 700px;
31
}
32
ul li:nth-child(1){
33
/告诉系统过渡动画的运动的速度/
34
transition-timing-function: linear;
35
}
36
ul li:nth-child(2){
37
transition-timing-function: ease;
38
}
39
ul li:nth-child(3){
40
transition-timing-function: ease-in;
41
}
42
ul li:nth-child(4){
43
transition-timing-function: ease-out;
44
}
45
ul li:nth-child(5){
46
transition-timing-function: ease-in-out;
47
}
48
过渡模块-连写
1.过渡连写格式
transition: 过渡属性 过渡时长 运动速度 延迟时间;
2.过渡连写注意点
2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 0s;
1
div {
2
width: 100px;
3
height: 50px;
4
background-color: red;
5
/transition-property: width;/
6
/transition-duration: 5s;/
7
/transition: width 5s linear 0s,background-color 5s linear 0s;/
8
/transition: background-color 5s linear 0s;/
9
/transition: width 5s,background-color 5s,height 5s;/
10
transition: all 5s;
11
}
12
div:hover{
13
width: 300px;
14
height: 300px;
15
background-color: blue;
16
}
17
过渡模块-弹性效果
1.编写过渡套路
1.1不要管过渡, 先编写基本界面
1.2修改我们认为需要修改的属性
1.3再回过头去给被修改属性的那个元素添加过渡即可
过渡模块-手风琴效果
1
ul{
2
width: 960px;
3
height: 300px;
4
margin: 100px auto;
5
border: 1px solid #000;
6
overflow: hidden;
7
}
8
ul li{
9
list-style: none;
10
width: 160px;
11
height: 300px;
12
background-color: red;
13
float: left;
14
/border: 1px solid #000;/
15
/box-sizing: border-box;/
16
/transition-property: width;/
17
/transition-duration: 0.5s;/
18
transition: width 0.5s;
19
}
20
ul:hover li{
21
width: 100px;
22
}
23
ul li:hover{
24
width: 460px;
25
}
26
2D转换模块
ul li:nth-child(2){
/其中deg是单位, 代表多少度/
transform: rotate(45deg);
}
ul li:nth-child(3){
/*
第一个参数:水平方向
第二个参数:垂直方向
/
transform: translate(100px, 0px);
}
ul li:nth-child(4){
/
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值都是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
拉伸：如果水平和垂直缩放都一样, 那么可以简写为一个参数
/
/transform: scale(0.5, 0.5);/
transform: scale(1.5);
}
ul li:nth-child(5){
/
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
/
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
/transform: translate(100px, 0px);*/
}
2D转换模块-形变中心点
默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点
ul li{
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
/*
第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式
具体像素
百分比
特殊关键字
/
/transform-origin: 200px 0px;/
/transform-origin: 50% 50%;/
/transform-origin: 0% 0%;/
/transform-origin: center center;*/
transform-origin: left top;
}
2D转换模块-旋转轴向
ul li{
list-style: none;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid #000;
/*
1.什么是透视（距离物体多远来观察物体）
近大远小
2.注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
*/
perspective: 500px;
}
ul li:nth-child(1){
/*默认情况下所有元素都是围绕Z轴进行旋转*/
transform: rotateZ(45deg);
}
ul li:nth-child(2) img{
transform: rotateX(45deg);
}
ul li:nth-child(3) img{
/*
总结:
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
*/
transform: rotateY(45deg);
}
2D转换模块-综合练习
div{
width: 310px;
height: 438px;
border: 1px solid #000;
background-color: skyblue;
margin: 100px auto;
perspective: 500px;
}
div img{
transform-origin: center bottom;
transition: transform 1s;
}
div:hover img{
transform: rotateX(80deg);
}
盒子阴影和文字阴影
1.如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
box-shadow: 10px 10px 10px 10px skyblue inset;
2.注意点
2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
2.2快速添加阴影只需要编写三个参数即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致
3.如何给文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色;
text-shadow: 10px 10px 10px black;
偏移量为正数，向右偏移；为负数，向左偏移。
翻转菜单-综合练习
定位的元素（比如子绝父相）会覆盖没有定位的元素
动画模块
1.过渡和动画之间的异同
1.1不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
div{
width: 100px;
height: 50px;
background-color: red;
/*transition-property: margin-left;*/
/*transition-duration: 3s;*/
/*1.告诉系统需要执行哪个动画*/
animation-name: lnj;
/*3.告诉系统动画持续的时长*/
animation-duration: 3s;
}
/*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
@keyframes lnj {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
动画模块-其它属性
