本文深入讲解CSS的层叠样式表概念、作用与使用原则，详细解析内联、内部和外部样式表的语法与特性，包括选择器、尺寸与边框、框模型、背景与渐变等核心主题，以及弹性布局和转换效果的应用技巧。
一.CSS概述
1.什么是CSS？
CSS：Cascading Style Sheets层叠样式表/级联样式表，简称样式表。
2.CSS作用
设置HTML网页元素的样式（修饰网页）
3.HTML与CSS的关系
HTML：构建网页内容
CSS：修饰网页
4.HTML属性与CSS属性是使用原则
w3C建议尽量使用CSS属性来取代HTML的属性。
二.CSS的语法规范
1.使用CSS的方式
1.内联方式（行内样式）
特点：将CSS样式定义在HTML的开始标记中
语法：
样式声明：由样式属性和值组成，CSS属性名与其值之间用冒号连接，多个样式声明之间用分号分割。
常用的属性和值：
(1)设置文本颜色的属性和值
属性：color
值：颜色的英文单词（red,blue,yellow…）
(2)设置背景颜色的属性和值
属性：background
值：颜色的英文的单词
(3)设置字体大小的属性和值
属性：font-size
值：以px/pt为单位的数字（24px）
2.内部样式
在网页的头元素中增加一对<style></style>,在<style></style>标记中声明该网页的所有样式。
语法：
<head>
<style>
样式规则
</style>
</head>
样式规则：由选择器和样式声明组成
选择器：规范页面中哪些元素能够使用定义好的样式。
元素选择器：由元素名称作为选择器
元素选择器语法：元素名称{样式声明}
ex：div{
color:red;
font-size:24px;
}
3.外部样式
独立于任何网页的位置处，声明一个样式文件（*.css）,在css文件中保存样式规则。
使用步骤：
1.创建样式表文件（.css为后缀）
2.在文件中编写样式规则
3.在网页头元素中引入外部样式表
<link rel="stylesheet" href="CSS文件url">
练习：
新建一个网页，页面中创建p,div和h3分别放上一段文本，然后用外部样式表修饰：
p元素的样式为红色字体，大小为30px；
div元素中文本的样式为蓝色字体，40px；
h3元素中的文本样式为绿色，背景颜色为灰色。
2.CSS的样式特点
1.继承性
子元素继承父元素的样式（有层级关系）。
大部分的样式可以直接被继承。
2.层叠性
可以为一个元素定义多个样式规则，规则中的属性不冲突时，可以同时都应用到当前元素上。
ex：
p{
color:blue;
}
p{
font-size:50px;
}
#p1{
background:gray;
}
3.优先级
在样式声明有冲突时（重复），则按照样式的优先级来应用样式。
优先级由低到高：
浏览器默认设置：低
样式表（内部样式和外部样式）：中-就近原则
内联样式：高
4.调整优先级
!important 规则
将!important加在属性值的后面，与值之间用空格隔开。
ex:
color:red !important;
练习：
网页中新建一个div元素，内容随意，用内部样式设置其字体大小为40px，字体颜色为红色，然后用外部样式设置其字体大小为70px，字体颜色为蓝色，将外部样式引入到网页中查看页面的效果，然后交互内 外样式的位置，再查看页面的效果，最后用!important去改变优先级。
三.选择器（重点）
1.选择器的作用
规范了页面中哪些元素能够使用定义好的样式。
为了匹配元素。
2.选择器详解
(1)通用选择器
语法：*{样式声明}
作用：可以匹配页面上的任意元素
注意：通用选择器的效率较低，尽量少用
(2)元素选择器
语法：元素名称{样式声明}
作用：设置页面上某种元素的样式
ex: div{…}
p{…}
a{…}
header{…}
(3)类选择器
作用：定义页面上某个元素或某些的样式（谁想用谁就可以使用）
特点：通过元素的class属性来引用类选择器
语法：
1.声明
.类名{样式声明}
定义类名注意：点不能省略，类名不能以数字开头，不能包含特殊字符，但可以包含（-，_）
2.引用
类选择器的特殊用法：
1.多类选择器
让元素引用多个类选择器
2.分类选择器
将元素选择器和类选择器结合使用
语法：元素选择器.类选择器{样式声明}
ex: div.test{color:red;}
练习：页面中新建div和p元素，内容随意
用类选择器为所有元素设置字体为红色；
用分类选择器为p元素设置背景颜色为黑色。
(4)id选择器
作用：设置指定id元素的样式（专属定制）
语法：#id值{样式声明}
(5)群组选择器
作用：将多个选择器放在一起进行样式的声明
语法：选择器1,选择器2,选择器3…{样式声明}
ex:
#s1,.myColor,div,p.test{color:red;}
对比：
#s1{color:red;}
.myColor{color:red;}
div{color:red;}
p.test{color:red;}
(6)后代选择器
作用：通过元素的后代关系匹配元素
后代：一级或多级嵌套
语法：选择器1 选择器2 选择器3...{样式声明}
课后作业：
按以下布局完成样式设置：
用后代选择器完成第一个span元素样式的设置，字体大小为32px，文本颜色为红色，背景颜色为黄色。
这是第一个span元素
这是第二个span元素
一.选择器详解
1.子代选择器
作用：通过元素的子代（一层嵌套）关系匹配元素。
语法：选择器1>选择器2{样式声明}
2.伪类选择器
作用：匹配元素不同的状态
语法：所有的伪类以:开始的
选择器:伪类选择器{样式声明}
伪类选择器分类：
(1)链接伪类
:link 匹配元素尚未访问时的状态
:visited 匹配元素访问过的状态
(2)动态伪类
:hover 匹配鼠标悬停在元素上时的状态
:active 匹配元素被激活时的状态
:focus 匹配元素获取焦点时的状态
练习：
在页面中增加一个a标记，并设置以下效果：
1.链接未访问时，颜色为红色，没有下划线
（text-decoration:none;）。
2.鼠标悬停时，文本颜色为黄色。
3.被激活时，文本为橙色。
4.访问后，文本颜色为绿色。
在页面中再增加一个输入框，默认文本颜色为灰色，字体为斜体（font-style:italic）
1.被激活时，字体为非斜体(font-style:normal)。
2.获取焦点时，文本颜色为红色。
3.选择器的优先级
权值：标识当前选择器的重要程度，权值越大的优先级越高。
元素选择器 1
类选择器 10
伪类选择器 10
ID选择器 100
内联样式 1000
选择器的权值加到一起，大的优先，权值相同，以后定义为主。
二.尺寸与边框
1.单位
1.尺寸单位
px：像素（1024*768）
in：英寸（1in=2.54cm）
pt：磅（1pt=1/72in）表示文字大小
cm：厘米
mm：毫米
em：相对单位（相对于元素本身字体的大小乘以倍数 ex:2em）
rem：相对单位（相对于根元素字体的大小乘以倍数 3rem ）
%：相对单位（50%）
2.颜色单位（取值）
1.英文单词（red,blue,black,yellow,orange…）
2.rgb(r,g,b)
r:red;
g:green;
b:blue;
r,g,b取值范围0-255
ex:
rgb(0,0,255)
3.#rrggbb
由6位16进制的数字和字母表示一个颜色
由0-9和A-F组成
#eeeeee 灰色
#000000 黑色
#ffffff 白色
4.#rgb是上面的缩写形式
#eeeeee–>#eee
5.rgba(r,g,b,alpah)
alpah:透明度，取值0-1的小数，值越小越透明
2.尺寸属性
1.作用
改变元素的宽度和高度
2.语法
1.宽度
width
min-width:最小宽度
max-width:最大宽度
2.高度
height
min-height:最小高度
max-height:最大高度
3.页面中允许设置尺寸的元素
1.所有块级元素都允许设置尺寸
div,p,h1-h6,结构标记,ul,ol,dl
2.行内块元素允许设置尺寸
表单控件元素（单选按钮，复选框除外）
3.本身具备width和height属性的元素
img,table
注意：大部分的行内元素是无法修改尺寸的。
3.溢出处理
当内容多，元素区域小的时候，就会产生溢出的效果，默认都是纵向溢出。
属性：overflow/overflow-x/overflow-y
取值：
1.visible 可见的，溢出可见，默认值
2.hidden 隐藏的，溢出的内容全部隐藏，不可见
3.scroll 显示滚动条，溢出时可用
4.auto 自动，溢出时自动显示滚动条并可用
练习：参考视频中效果，完成溢出处理
(边框的设置：border:1px solid black;)
4.边框
1.边框的简写方式
border:width style color;
width:边框的宽度，以px为单位的数字
style:边框的样式
取值：solid 实线
dotted 虚线（点）
dashed 虚线（线）
color:边框颜色，合法的颜色值，也可以为transparent 透明色
注意：
取消边框：border:0/none;
练习：在网页中创建一个id为main的div元素，设置尺寸为200px*200px,并设置4个方向的边框为1px的宽度，实线，红色。（2分钟）
2.单边定义
只设置某一条边的三个属性。
属性：
border-top/bottom/left/right:width style color
练习：在上面练习的基础上，设置上边框为2px 颜色为蓝色，边框的样式为虚线（dotted）
3.单属性设置
设置四条边框的某一个属性。
属性：
border-width/style/color:值;
ex:
border-color:red;
4.单边单属性
只设置某一条边的某一个属性
属性：
border-方向-属性：值;
ex：
设置上边框的颜色
border-top-color:red;
5.边框倒角
将元素的四个角，由直角倒成圆角。
属性：
border-radius:值;
取值：以px为单位的数字 或者 百分比（圆形）
单角设置：
border-top-left-radius:左上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
border-top-right-radius:右上角
6.边框阴影
属性：box-shadow
取值：h-shadow v-shadow blur spread color inset;
h-shadow:阴影在水平方向的偏移，必须值
取值为正，阴影向右偏移
取值为负，阴影向左偏移
v-shadow:阴影在垂直方向的偏移，必须值
取值为正，阴影向下偏移
取值为负，阴影向上偏移
blur:阴影模糊距离，取值越大，模糊效果越明显
spread:阴影的尺寸，指定要在基础阴影上扩充出来的大小距离
color:阴影的颜色
inset:将默认的外阴影改为内阴影
练习：
1.在上午溢出练习基础上，当鼠标悬停在图片上时，为图片添加向右下方偏移的阴影效果，偏移尺寸为5px,阴影颜色为灰色。（2分）
2.设置一个圆形的外发光效果（外阴影）（3分钟）
7.轮廓
轮廓指的是边框的边框，绘制于边框外的一条线。
属性：
outline:width style color;
outline:none/0 取消轮廓
三.框模型（重点）
1.什么是框模型
框：页面上的元素皆为框
框模型：box model盒子模型，定义了元素框处理元素的内容，内边距，外边距以及边框的一种计算方式。
外边距：元素与元素之间的间距。
内边距：元素边框与内容之间的间距。
框模型的计算方式：
元素实际占地宽度=左右外边距+左右内边距+左右边框+width
元素实际占地高度=上下外边距+上下内边距+上下边框+height
2.外边距
1.什么是外边距
围绕在元素边框外的空白间距，就是外边距。
2.语法
属性：
margin:定义某元素四个方向的外边距
margin-top/bottom/left/right:单边定义
取值：
1.以px为单位的数字
2.取值为负数
让元素向着相反的方向移动
margin-left:取值为正，元素向右移
取值为负，元素向左移
margin-top:取值为正，元素向下移
取值为负，元素向上移
练习：页面中添加一个div元素，设置尺寸和边框，查看默认效果，然后设置div的左外边距为60px,查看页面效果，再将左外边距设为-60px查看页面效果（上外边距做同样的设置）。
3.取值为%
外边距的值，父元素宽或高的占比
4.取值为auto
自动计算外边距的值
实现块级元素的水平居中对齐
3.简写方式
1.margin:value 四个方向外边距
2.margin:v1 v2
上下 左右
3.margin:v1 v2 v3
上 左右 下
4.margin:v1 v2 v3 v4
上 右 下 左（顺时针）
4.自带外边距的元素
p,h1-h6,body,ul,ol,dl,pre
通过CSS Reset的方式来重置具备外边距的元素
p,h1,h2,h3,h4,h5,h6,body,ul,ol,dl,pre{margin:0;}
5.外边距的特殊效果
1.外边距合并
当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个外边距中较大的那个，如果两个值相同，取其中一个。
2.行内元素和行内块元素
1.行内元素垂直外边距无效，但左右外边距有效并会相加
2.行内块元素，设置垂直外边距时，整行元素都会跟着发生改变。
练习：
1.在页面中创建两个div，尺寸都是200*200，分别设置不同的背景；
2.在第二个div中添加一个子元素div，设置其尺寸为100*100，同时设置其背景颜色；
3.并设置子元素的上外边距为50px，观察页面效果
3.外边距溢出
在特殊的条件下，为子元素设置上边距时会作用到父元素上：
1.父元素没有上边框
2.为第一个子元素设置上外边距时
解决方案：
1.为父元素增加上边框
弊端：对父元素的高度有影响
2.使用父元素的内边距取代子元素的上外边距
弊端：对父元素的高度有影响
3.在父元素的第一个子元素位置处，增加一个空的<table></table>
课后作业：
1.完成学子商城登录页面效果
（参考http://www.codeboy.com/login.html，背景图先用灰色背景替代）
2.整理今天所学内容思维导图
3.预习明天内容
一.框模型
1.内边距
1.什么是内边距
元素边框与内容之间的间距。
内边距会扩大元素边框占地区域。
2.语法
属性：
padding:value 四个方向的内边距
padding-top/bottom/left/right:value 单边定义
取值：
1.以px为单位的数字
2.以%为单位的数字
3.简写方式
padding:value 四个方向
padding:v1 v2 上下 左右
padding:v1 v2 v3 上 左右 下
padding:v1 v2 v3 v4 上 右 下 左（顺时针）
2.属性：box-sizing
作用：指定框模型的计算方式
取值：
1.content-box
默认值，采用默认的方式计算元素的占地尺寸
实际宽度=左右外边距+左右内边距+左右边框+width
实际高度=上下外边距+上下内边距+上下边框+height
2.border-box
元素的尺寸，会包含border以及padding的值
实际宽度=width+margin
实际高度=height+margin
二.背景
以单一颜色或图片来填充元素作为背景。
1.背景颜色
属性：background-color
取值：合法的颜色值
注意：背景颜色和背景图片都从边框位置处开始填充。
2.背景图像
属性：background-image
取值：url(图像路径);
ex:
background-image:url(a.jpg);
3.背景图像平铺
属性：background-repeat
取值：
1.repeat 平铺，默认值
2.no-repeat 不平铺，只显示一次图片
3.repeat-x 只在水平方向平铺
4.repeat-y 只在垂直方向平铺
4.背景图像尺寸
属性：background-size
取值：
1.width height
2.width% hegiht%
3.cover 覆盖，将背景图等比放大，直到背景图完全覆盖元素所有区域为止。
4.contain 将背景图等比放大，直到背景图碰到元素的某一个边缘为止。
5.背景图像固定
将背景图固定在网页的某个位置，一直在可视化区域中，不会随着滚动条而发生位置的变化。
属性：background-attachment
取值：
1.scroll 默认值，滚动
2.fixed 固定
6.背景图像定位
作用：改变背景图在元素中的位置
属性：background-position
取值：
1.x y
x:背景图在水平方向的偏移距离
取值为正，向右移动
取值为负，向左移动
y:背景图在垂直方向的偏移距离
取值为正，向下移动
取值为负，向上移动
2.x% y%
0% 0% 左上角
50% 50% 正中间位置
100% 100% 右下角
3.关键词
x:left/center/right
y:top/center/bottom
7.背景属性简写方式
属性：background
取值：color url() repeat attachment position;
三.渐变
1.什么是渐变
渐变指的是多种颜色平缓变化的一种显示效果。
2.渐变的主要因素
色标：一种颜色及其出现的位置
一个渐变是由多个色变组成（至少两个）
3.渐变的分类
1.线性渐变
以直线的方向来填充渐变色。
属性：background-image
取值：linear-gradient(angle,color-point1,color-point2,…)
(1)angle
表示渐变填充的方向或角度
取值：
1.关键词
to top:从下向上填充渐变
to bottom:从上向下填充渐变
to left:从右向左填充渐变
to right:从左向右填充渐变
2.角度值
0deg 等同于to top
90deg 等同于to right
180deg 等同于bo bottom
270deg 等同于to left
(2)color-point
色标：颜色 及其 位置
取值：颜色 与 位置 的组合，中间用空格隔开。
ex:
red 0%:在填充方向开始的位置处颜色为红色
green 50%:到填充方向一半位置处，颜色为绿色
blue 200px:
2.径向渐变
以圆形的方式来填充渐变色。
属性：background-image
取值：radial-gradient([size at position],color-point1,color-point2,..);
size at position:
size:半径，以px为单位的数字
position:圆心的位置
取值：x y 具体数字
x% y% 元素宽和高的占比
关键词：left/center/right
top/center/bottom
3.重复渐变
将线性渐变 或 径向渐变重复几次出现。
1.重复线性渐变
background-image:repeating-linear-gradient(angle,color-point1,color-point2,...);
2.重复径向渐变
background-image:repeating-radial-gradient([size at position],color-point1,color-point2,...);
注意：在重复渐变中色标位置用绝对值，不要用%。
4.浏览器兼容性
各浏览器的新版本都支持渐变属性，但低版本不支持。对于不支持的浏览器，可以通过设置浏览器前缀的方式，让浏览器支持渐变。
firefox:-moz-
IE:-ms-
Oprea:-o-
chrome&safari:-webkit-
ex:
background:-ms-linear-gradient(0deg,red,blue);
background:-moz-linear-gradient(0deg,red,blue);
https://www.caniuse.com 查看css属性支持的浏览器版本号
四.文本格式化属性
1.字体属性
1.指定字体类型
属性：font-family
取值：用逗号隔开字体名称列表
ex:
font-family:“微软雅黑”,“黑体”,Arial;
2.指定字体大小
属性：font-size
取值：以px或pt为单位的数字
3.字体加粗
属性：font-weight
取值：
1.bold:加粗（b,h1-h6）
2.normal:正常
3.value 无单位的整百倍数字
400等同于normal
900等同于bold
4.字体样式
属性：font-style
取值：
1.normal:正常字体
2.italic:斜体(i)
5.小型大写字母
将小写字母变为大写，但大小与小写字母一致。
属性：font-variant
取值：
1.normal:正常
2.small-caps:小型大写字母
6.字体属性的简写方式
属性：font
取值：style variant weight size family;
注意：使用简写形式时，必须要设置family的值，否则无效。
ex:
font:italic 12px; //无效
font:12px “微软雅黑”;//正确
练习：
页面中新建一个p元素，内容随意，最好中英文结合，然后按以下要求设置样式：
1.字体为"Arial"类型。
2.字体大小为24px。
3.文本加粗并倾斜显示。
4.将所有的字母显示为小型大写字母。
2.文本格式
1.文本颜色
属性：color
取值：合法的颜色值
2.文本排列
作用：指定文本，行内，行内块元素的水平对齐方式。
属性：text-align
取值：left/center/right/justify(两端对齐)
3.文字修饰（线条）
属性：text-decoration
取值：
1.none：无任何线条修饰
2.underline:下划线
3.overline:上划线
4.line-through:删除线(s标记)
4.行高
作用：设置一行数据所占的高度
属性：line-height
取值：以px单位的数字；
无单位的数字（行高是当前字体大小的倍数）。
注意：如果行高设置的比文字的高度大的话，那么该行文本将在指定行高内呈现垂直居中的效果。
5.首行文本缩进
属性：text-indent
取值：以px为单位的数字
6.文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color;
五.表格
1.表格常用属性
1.边距：padding
2.边框：border
3.尺寸：width/height
4.文本格式化：font-,text-,line-height
5.背景属性：颜色，图像，渐变
6.vertical-align:指定单元格数据的垂直对齐方式
取值：top/middle/bottom 上/中/下
课后作业：
1.创建一个400400px的表格，4行4列：
1.设置每个单元格的尺寸为100100;
2.设置表格和单元格的边框为1px solid #000;
3.尝试着为每个td增加上外边距10px。
2.完成"课后作业.png"效果图中的布局（注意细节修饰）
3.可以开始做个人项目（参考http://www.cssmoban.com）
一.表格
1.表格特有属性
1.边框合并
属性：border-collapse
取值：
1.separate 默认值，即分离边框模式
2.collapse 边框合并
2.边框边距
作用：设置单元格之间或单元格与表格之间的距离
属性：border-spacing
取值：
1.指定一个值，水平和垂直的间距相同
2.指定两个值，
第一个值表示的水平间距
第二个值表示的垂直间距
注意：只有在分离边框的模式下才能设置边框的边距。
3.标题位置
属性：caption-side
取值：
top:默认值，标题在表格正上方
bottom:标题在表格的正下方
4.显示规则
作用：用来帮助浏览器指定如何布局一张表，也就是指定td尺寸的计算方式。
属性：table-layout
取值：
1.auto 默认值，即自动表格布局，列的尺寸实际上是由内容来决定的。
2.fixed 固定表格布局，列的尺寸由设定的值为准
自动表格布局和固定表格布局：
1.自动布局
(1)单元格的大小适应内容
(2)自动布局会比较灵活（优点）
(3)表格复杂时，加载速度较慢（缺点）
(4)适用于不确定每列大小并表格不太复杂时使用
2.固定布局
(1)单元格的尺寸取决于设定的值
(2)任何情况下都会加速显示表格(优点)
(3)固定表格不够灵活(缺点)
(4)适用于确定每一列的大小时使用
二.定位-浮动定位（重点）
1.定位
定位：指的是改变元素在页面中的位置。
2.定位的分类
按照定位的效果，可以分成以下几类：
1.普通流定位(默认定位方式)
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.定位-普通流定位
普通流定位又称"文档流定位"，页面中元素们默认定位方式。
1.每个元素在页面中都是在父元素左上角开始显示。
2.每个元素在页面中一定都有自己的空间。
3.块级元素都是按照从上往下排列，每个元素独占一行。
4.行内元素以及行内块元素都是按照从左往右的方式来排列。
如何解决多个块级元素在一行中显示？
4.定位-浮动定位
1.什么是浮动定位&特点
如果将元素的定位方式设置为浮动定位，元素将具备以下特点：
1.元素将被排出文档流之外（脱离了文档流），不再占页面空间，其它未浮动的元素将上前补位。
2.浮动元素会停靠在其父元素的左边或右边，或其它已经浮动元素的边缘上。
3.浮动定位解决的问题：让多个块级元素在一行中显示。
2.语法
属性：float
取值：
1.none 默认值，即无任何浮动效果
2.left 左浮动，让元素停靠在父元素的左边，或挨着左侧已经浮动的元素边缘。
3.right 右浮动，让元素停靠在父元素的右边，或挨着右侧已经浮动的元素边缘。
练习：页面中创建三个元素，id分别为d1,d2,d3,设置其尺寸各200px，分别设置背景颜色为blue,green,yellow,依次让d1,d2,d3实现右浮动，观察效果，然后再依次将d1,d2,d3分别实现左浮动观察效果。
3.浮动引发的特殊效果
1.当父元素显示不下所有已浮动元素时，最后一个将换行,但是，有可能被卡住。
2.元素一旦浮动起来后，宽度将以内容为主（未指定宽度情况下）。
3.元素一旦浮动起来，将变为块级元素
允许设置尺寸，正常处理垂直外边距。
4.文本，行内元素，行内块元素是采用环绕的方式排列的，是不会被浮动元素压在下方的，而是会巧妙的避开。
4.清除浮动所带来的影响
元素一旦浮动起来之后，就会对后续的元素带来影响（后续元素要上前补位），如果后续元素不想被影响（不想去补位），那么就可以通过清除浮动的方式来解决。
属性：clear
取值：
1.left 清除当前元素前面元素左浮动所带来的影响。
2.right 清除当前元素前面元素右浮动所带来的影响。
3.both 清除当前元素前面任何一种浮动所带来的影响。
4.none 默认值，不做任何清除浮动操作。
5.浮动元素对父元素高度带来的影响
元素的高度，都是以未浮动元素的高度为准，浮动元素是不占页面空间的，所以一旦子元素都浮动起来，那么父元素高度将为0。
解决方案：
1.直接设置父元素的高度
弊端：不是每次都知道父元素的高度
2.设置父元素也浮动
弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素（后续元素会上前补位）
3.设置父元素的overflow
取值：hidden/auto
弊端：如果有内容要溢出显示的话，也会一同隐藏起来
4.在父元素中，追加一个空的块级元素，并设置其clear:both;
三.显示
1.显示方式
1.显示方式
决定元素在网页中的表现形式（块级，行内，行内块等）
2.语法
属性：display
取值：
(1)none 不显示元素-隐藏
(2)block 让元素表现的与块级元素一致
特点：从上往下排列，单独占一行，并可以设置尺寸和垂直外边距
(3)inline 让元素表现的与行内元素一致
特点：排方式从左往右在一行中显示，不能修改尺寸（img除外）
(4)inline-block 让元素表现的与行内块一致
特点：排列方式如同行内元素，但是具备块级元素的特征，允许修改尺寸，也可以设置垂直外边距，但会影响整行。
(5)table 让元素表现的如同table
特点：
尺寸以内容为主
每个元素独占一行
允许修改修改尺寸
注意：一般将行内元素显示为块级或行内块，很少将块级元素转换为行内。
2.显示效果
1.显示/隐藏
属性：visibility
取值：
1.visible 可见的，默认值
2.hidden 元素不可见-隐藏
Q：display:none和visibility:hidden的区别？
display:none;会脱离文档流，不占页面空间。
visibility:hidden;不脱离文档流，占据页面空间。
练习：网页中新建两个div，id分别为d1,d2,设置各自的尺寸和背景颜色。
1.先设置第一个div的display:none,查看页面效果。
2.注释掉第一步的代码，然后再设置第一个div的visibility：hidden;再查看页面效果。
2.透明度
属性：opacity
取值：0-1 值越小越透明
Q：rgba与opacity的区别？
opactiy作用于元素，跟元素相关的颜色都会发生透明度的变化。
rgba:只作用于当前元素的某一个颜色值。
3.垂直对齐方式
属性：vertical-align
使用场合：
1.表格中使用
取值：top/middle/bottom
2.图片中使用
取值：top/middle/bottom/baseline基线对齐（默认值）
注意：编写网页时，通常都会将图片的垂直对齐方式更改为除baseline以外的任何一个值。
4.光标
1.作用
改变鼠标悬停在元素上时鼠标的状态。
2.语法
属性：cursor
取值：
default 箭头
pointer 小手状态
crosshair +
text I
wait 等待
help 帮助
四.列表
1.列表项标识
属性：list-style-type
取值：
none 无标识
disc
circle
square
2.列表项图像
属性：list-style-image
取值：url(图片路径)
3.列表项位置
属性：list-style-position
取值：
outside:默认值，将标识放在li的外面
inside:将标识放在li的里面
4.列表属性简写方式
属性：list-style
取值：type url() position;
常用方式：
list-style:none;
课后作业：
1.复习今天所学内容，重点-浮动定位
2.完成"课后作业.png"中的布局效果（样式参考www.codeboy.com网站首页头部）
3.做个人大项目（参考 http://www.cssmoban.com）
一.定位（相对定位，绝对定位，固定定位）-重点
1.定位相关属性
1.定位属性
属性：position
取值：
(1)static 静态，默认值
(2)relative 相对定位
(3)absolute 绝对定位
(4)fixed 固定定位
注意：将元素的position设置为relative/absolute/fixed任何一个值，那该元素就称为"已定位"元素。
2.偏移属性
top/bottom/left/right
以上四个属性取值均为数字（px单位）
ex:
top:150px; 元素向下偏移
bottom:-200px;元素向下偏移
left:100px;元素向右偏移
注意：只有"已定位"元素才能使用偏移属性
3.定位详解
1.相对定位
1.什么是相对定位
元素会相对于它原来的位置偏移某个距离
2.使用场合
在做元素位置的微调时使用
3.语法
position:relative;
配合着偏移属性使用
2.绝对定位
1.特点
1.绝对定位的元素会脱离文档流，不占页面空间
2.绝对定位的元素会相对于离他"最近的" "已定位的" "祖先元素"去实现位置的初始化，如果没有已定位的祖先元素，那么元素相对于body去实现位置的初始化。
(一般子元素要实现绝对定位，父元素通常都设置为相对定位)
2.语法
position:absolute;
配合偏移属性来使用
3.使用场合
1.弹出菜单
2.有堆叠效果的元素
4.注意
1.脱离文档流
2.绝对定位会将元素变为块级元素
3.堆叠顺序
一旦将元素变为已定位元素的话，元素们有可能会出现堆叠的效果。如果想要改变默认的堆叠顺序，可以使用z-index
属性：z-index
取值：无单位的数字,数字越大越靠上
注意：
1.父子元素间，z-index无效，永远都是子元素压在父元素上。
2.只有已定位元素才能使用z-index
4.固定定位
1.什么是固定定位
将元素固定在页面的某个位置，位置不会随着滚动条而发生位置的变化，始终固定在可视化的区域中。
2.语法
position:fixed;
配合偏移属性来使用。
3.注意
1.固定定位脱离文档流，不占页面空间
2.固定定位的元素会变成块级元素，允许修改尺寸
3.固定定位的元素永远都是相对于body去实现位置的初始化。
练习：仿照京东右下角返回顶部的效果，将图片固定在网页的右下角，点击图片时返回到网页的顶部。
CSS3 Core=====================================
二.复杂选择器
1.兄弟选择器
兄弟元素：具备相同父元素的平级元素之间称为兄弟元素。
ex：
1.相邻兄弟选择器
作用：获取紧紧挨在某元素后的兄弟元素。
语法：选择器1+选择器2{}
注意：兄弟选择器，只能向后找，不能向前找。
2.通用兄弟选择器
作用：获取某元素后所有满足条件的兄弟元素
语法：选择器1~选择器2{}
练习：通过兄弟选择器设置样式：
1.h3与div之间有30px的外边距
2.从第二个div开始，每个div都有10px的上外边距。（3分钟）
<h3>静夜思</h3>
<div>床前明月光</div>
<div>疑是地上霜</div>
<div>举头望明月</div>
<div>低头思故乡</div>
2.属性选择器
id,class,style,title,name,type,value等
1.作用
允许通过元素所附带的属性及值来匹配页面元素。
2.语法
(1)基本写法
[attr] attr:表示任意属性
作用：匹配页面中所有附带attr属性的元素。
ex:
[id] 匹配页面中所有附带id属性的元素
[class] 匹配页面中所有附带class属性的元素
(2)elem[attr]
elem:表示任意元素
attr:表示任意属性
作用：匹配页面中所有附带attr属性的elem元素。
ex:
div[id] 匹配带有id属性的div元素
(3)[attr1][attr2]…
作用：匹配同时附带多个属性的元素
ex:
[id][class] 匹配同时附带id属性和class属性的元素
(4)[attr=value]
作用：匹配页面中attr属性值为value的元素
[attr~=value]:获取属性值中包含指定词汇的元素
[attr^=value]：匹配属性值以指定值开头的每个元素
[attr$=value]：匹配属性值以指定值结尾的每个元素
[attr*=value]：匹配属性值中包含指定值的每个元素
ex：
[id=“one”]{color:red;}
等同于：
#one{color:red;}
3.伪类选择器
已经学过的伪类：
链接伪类: :link
:visited
动态伪类： :hover
:active
:focus
1.目标伪类
作用：突出显示活动的HTML锚点元素，匹配被激活的锚点。
语法：
选择器:target{…}
2.结构伪类
作用：通过元素的结构关系来匹配元素（上下级嵌套）
1.:first-child
匹配的元素是属于其父元素中的第一个子元素。
p1
p2
p3
ex:
p:first-child{…}
2.:last-child
匹配的元素是属于其父元素中的最后一个子元素。
ex:
p:last-child{…}
练习：
1.创建一个4*4表格，并填充内容
2.设置第一行的数据背景颜色为黄色
3.设置最后一行的数据背景颜色为红色（3分钟）
3.:nth-child(n)
匹配的元素是属于其父元素中的第n个元素。
ex:
tr:nth-child(3){…}
练习：在上面表格的基础上，设置表格第三行第三列中的文字为粗体并倾斜显示，字体大小为30px
4.:empty
匹配没有子元素的元素。（空格也不能包含）
课后作业：
1.完成"课后作业1.png"的布局效果（参考www.codeboy.com）
2.完成"课后作业2.png"的布局效果
3.继续开发个人项目
一.复杂选择器
1.结构伪类选择器
1.:only-child
匹配的元素是属于其父元素中的唯一子元素。
2.否定伪类
将满足指定选择器的元素给排除在外。
语法：:not(selector){…}
3.伪元素选择器
1.::first-letter或:first-letter
作用：用于匹配元素的首字符
2.::first-line或:first-line
作用：用于匹配元素的首行
注意：如果首字符与首行样式冲突时，优先使用首字符样式。
3.::selection
作用：匹配被用户选取的内容。
注意：只能修改文本颜色和背景颜色。
练习：创建一个div元素，内容随意.
1.设置div中首字符样式为加粗，红色，大小为32px,右外边距为20px.
2.将首行的文本设置为橙色，斜体
3.用户选取内容时文本颜色为蓝色，背景为灰色。
4.内容生成
1.什么是内容生成
使用css动态的向元素中插入一段内容。
2.伪元素选择器
1.:before或::before
作用：匹配到某元素的内容区域之前。
(:before)床前明月光
2.:after或::after
作用：匹配到某元素的内容区域之后。
<p>床前明月光(:after)</p>
3.属性
属性：content
作用：向匹配到的位置处增加的内容
取值：
1.字符串，用""引起来。
2.url(图片路径)
练习：2分钟
<p>学而时习之，不亦说乎</p>
<p>有朋自远方来，不亦乐乎</p>
输出显示如下：
子曰：学而时习之，不亦说乎
——《摘自论语》
子曰：有朋自远方来，不亦乐乎
——《摘自论语》
3.解决问题
1.上外边距溢出
1.在父元素的第一个子元素位置处
2.添加一个table标记，并且标记的内容为空
ex:
选择器::before{
content:"";
display:table;
}
2.解决浮动元素对父元素高度带来的影响
1.在父元素的最后一个子元素位置处
2.添加一个空的块级元素（display:block）
3.设置其clear属性的值为both
ex:
.类选择器:after{
content:"";
display:block;
clear:both;
}
二.弹性布局
1.什么是弹性布局
弹性布局(Flexible layout)是一种布局方式，主要解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。
2.弹性布局的相关概念
1.弹性布局容器
子元素的父元素称为容器
2.项目
要实现布局的子元素，称为项目
3.主轴
项目们排列方向的一根轴，称为主轴
如果主轴是x轴，那么y轴就是交叉轴
4.交叉轴
与主轴垂直相交的一根轴，称为交叉轴
3.语法
1.弹性（flex）容器
将元素变为flex容器后，那么所有子元素都将变为flex项目，都允许按照弹型布局的方式排列。
2.属性:display
取值：
1.flex 将块级元素变为容器
2.inline-flex 将行内元素变为容器
注意：
1.元素设置为flex容器之后，子元素的float,clear,vertical-align将失效。
2.元素变为flex容器之后，子元素尺寸允许被修改（把子元素变为块级）
3.容器属性
1.flex-direction
作用:指定容器的主轴及其排列方向
取值：
(1)row 默认值，即主轴为x轴，起点在左端
(2)row-reverse 主轴为x轴，起点在右端
(3)column 主轴为y轴，起点在顶端
(4)column-reverse 主轴为y轴，起点在底部
2.flex-wrap
作用：当一个主轴排列不下所有项目时，项目是否换行显示。
取值：
1.nowrap：默认值，即空间不足时也不会换行，项目自动缩小。
2.wrap:换行
3.wrap-reverse:换行并反转
3.flex-flow
作用：是flex-direction和flex-wrap的缩写形式。
取值：
1.row nowrap（默认值）
2.direction wrap
4.justify-content
作用：定义项目在主轴上的对齐方式。
取值：
1.flex-start 在主轴的起点对齐。
2.flex-end 在主轴的终点对齐。
3.center 在主轴上居中对齐。
4.space-between 两端对齐。
5.space-around 每个项目两端的间距相同。
5.align-items
作用：定义项目在交叉轴上的对齐方式。
取值：
1.flex-start 交叉轴上起点对齐。
2.flex-end 交叉轴上终点对齐。
3.center 交叉轴上居中显示。
4.baseline 交叉轴上基线对齐。
5.stretch 如果项目未设置尺寸，在交叉轴上占满所有空间。
练习：
网页中添加一个div，id为parent，设置parent的边框,在parent中再添加两个子元素div，id分别为d1和d2设置d1和d2的尺寸和背景颜色,将父元素变为容器，并设置d1和d2在容器中水平、垂直都居中显示，并且当容器缩小时，不改变项目的尺寸。（3分钟）
4.项目属性
该组属性只能设置在某一个项目元素上，只控制一个项目，不影响其他项目。
1.order
作用：定义项目的排列顺序，值越小，越靠近起点，默认值为0。
取值：整数数字，无单位。
2.flex-grow
作用：定义项目的放大比例，如果容器有足够的剩余空间，项目按照比例放大。
取值：整数数字，无单位。
默认值0，不放大。
取值越大，占据剩余空间的比例越多。
3.flex-shrink
作用：定义项目缩小比例，即容器空间不足时，项目按照比例缩小
取值：整数数字，无单位，值越大缩小的越快。
默认值1，空间不足时，则等比缩小。
取值为0，则不缩小。
4.align-self
作用：定义当前项目在交叉轴的对齐方式
取值：
1.flex-start 起点对齐
2.flex-end 终点
3.center 居中
4.baseline 基线对齐
5.stretch 未设定项目高度时占满父元素空间
6.auto 自动继承父元素align-items的属性值。
练习：
用弹性布局完成如图所示效果
三.转换
1.什么是转换
改变元素在页面中的位置，大小，角度以及形状的一种方式。
2D转换：只在x轴和y轴上发生转换效果
3D转换：增加z轴的转换效果
2.转换属性
1.转换属性
属性：transform
取值：
1.none：默认值，无任何转换效果
2.transform-function
表示1个或多个转换函数
如果是多个转换函数，中间用空格隔开
2.转换原点
属性：transform-origin
取值：数值/百分比/关键词
2个值，表示原点在x轴和y轴的位置。
3个值，表示原点在x轴y轴和z轴的位置。
默认的原点是在元素的中心位置：(center,center)/(50%,50%)
3.2D转换
1.位置（位移）
1.什么是位移
改变元素在页面的位置。
2.语法
属性：transform
取值：
1.translate(x)
指定元素在x轴上位移距离
取值为正，元素向右移
取值为负，元素向左移
2.translate(x,y)
指定元素在x轴和y轴上位移一定距离
x:同上
y:指定元素在y轴上位移距离
取值为正，元素向下移
取值为负，元素向上移
3.translateX(x)
4.translateY(y)
2.缩放
1.什么是缩放
改变元素在页面中的尺寸（大小）
2.语法
属性：transform
取值：
1.scale(value) 取值为数字
value：横向和纵向缩放比例相同
默认值1，不缩放
value>1：放大
0<value<1：缩小
value<0：放大(水平和垂直方向都翻转180度)
2.scale(x,y)
x:横向缩放比例
y:纵向缩放比例
3.单向缩放
scaleX(x)只在横向缩放
scaleY(y)只在纵向缩放
3.旋转
1.什么是旋转
改变元素在页面上的角度
2.语法
属性：transform
取值：
rotate(ndeg)
n取值为正，顺时针旋转
n取值为负，逆时针旋转
课后作业：
1.在页面中创建两个div，id分别为d1和d2,设置其尺寸为200*200px,添加不同背景;
(1)将两个div都定位到父元素的左上角显示;
(2)将d1先旋转45deg,再向右位移50px;
(3)将d2向右位移50px，再旋转45deg，对比两个div的效果。
2.用弹性布局完成"课后作业.png"布局效果。
扫一扫
958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
