CSS细化知识点总结
1.行内样式:只对它所修饰的元素起作用
语法：style=”属性1：值1;属性2：值2...属性n:值n”
2. 样式的优先级： 当有多个样式作用在同一元素上时，谁离元素近，就使用谁的样式，即谁离得近，谁的优先级高.
3. 长度单位em:1em就是当前一个字体的尺寸，text-indent: 2em;让文本缩进2个字符
4. 颜色的三种表示法：
1.rgb颜色表示法：rgb(red,green,blue)，其中三个参数代表三种颜色的强度，值是[0,255]
2.十六进制表示法：用十六进制的值表示颜色，#RRGGBB
3.英文单词表示法：用英文单词表示颜色，例如红色是red
5.基础选择器：1. 标签选择器：用元素名称作为选择器，选择出网页上所有名称匹配的元素
2.类选择器使用分2步：
2.1.给要选中的元素添加class属性， 格式class="值"
2.2.声明类选择器，类选择器名称:.class属性值
类选择器可以选出多个元素，它们的类名要相同
3. ID选择器使用分2步：
3.1.给要选中的元素添加id属性， 格式id="值"
3.2.声明ID选择器，ID选择器名称:#id属性值
按h5的标准，每个元素的id都是唯一的，ID选择器只能选出一个元素
4. 通配符选择器*:选出网页上所有的元素
6.关系选择器：1. 交集选择器:由2个选择器直接构成,选择的元素范围是它们各自的元素的公共部分,即交集
2. 并集选择器:由多个选择器通过逗号连接在一起,这些元素可以是任意的基础选择器，并集选择器选择的元素范围是所有选择器选出的元素的并集(合并在一起)
3. 后代选择器:选出参考元素的所有后代元素，
语法：E F，即选出所有E选择器匹配元素的所有后代F元素(包含儿子和孙子)
4. 亲子选择器:选出参考元素的所有亲子元素，
语法：E>F，即选出所有E选择器匹配元素的所有直接儿子元素F(不包含孙子元素)
7.属性及伪类选择器：1.属性选择器:根据元素的属性来选择元素
语法1： [attr]:选择网页上具有attr属性的所有元素，不用管attr属性的值
语法2：E[attr]:选择具有attr属性的所有E元素,不用管attr属性的值
语法3：E[attr=value]:选择具有attr属性且属性值是value的所有E元素
语法4：[attr=value]:选择具有attr属性且属性值是value的所有元素
注意：如果属性值value没有/及：等特殊字符，那么value可以不用双引号包裹
2. 伪类选择器:
2.1.:active:鼠标在元素上按下时的状态
2.2. :hover:鼠标悬浮(停在上面)在元素上的状态
8.选择器的优先级：1.简单选择器优先级顺序: !important>id选择器>类选择器>标签选择器>通配符选择器 如果在简单选择器里的某个样式上加了!important，那么此时它的优先级是最高的
2. 当修饰元素的选择器是复合选择器时，先比较id选择器出现的次数，谁的id选择器的次数多，谁的优先级高；在id选择器次数相同情况下，再比较类选择器的次数，谁的类选择器的次数多，谁的优先级高
9. css属性
背景属性
可以使用background属性来代替background-image, background-repeat, background-position三个属性
技巧：
设置背景图片水平和竖直方向都居中
1)将html和body的高度都设为100%
|
html,body { height: 100%; } |
2)设置背景图片的位置为50% 50%或者center center
|
background-position: center center; |
（1）background-repeat：设置背景图片重复，默认值是repeat(在水平和竖直方向都平铺)
* repeat-x：在水平方向平铺
* repeat-y：在竖直方向平铺
* no-repeat:不平铺，只显示一张
（2）background-position: center center; 背景图片居中,默认只能水平居中
（3）background-attachment: fixed; 将背景图片固定，不会随着文档滚动而消失
文本属性
（1） opacity：设置不透明度,范围是[0,1],1表示完全不透明，最清楚，0表示完全透明，元素就隐藏了
（2） font-style: italic; 字体风格,italic为斜体
（3） font-weight: bold；字体粗细 ,bold和bolder都是加粗
（4） text-decoration: line-through；text-decoration:文本装饰，可以定义文本的下划线，上划线或中划线
（5） letter-spacing: letter-spacing:字与字之间的间距
（6） height: 50px;line-height: 50px; 当元素内的行高和高度相同时，元素内的文本就能在竖直方向上居中
（7） text-align: text-align:设置块级元素内的文本的水平对齐方式
（8） overflow: hidden:超出元素框的内容会被修剪，看不到了
scroll:多余的内容能够看到，会出现滚动条
auto:自动适应，如果元素高度不够，则会出现滚动条，否则没有滚动条
10.列表属性
有序列表ol>li
list-style-type: upper- alpha:列表项的符号是大写英文字母
upper- roman:列表项的符号是大写罗马字母
11.元素分类：
(1) 块级元素：独占一行的元素，不能和相邻元素共享一行，例如：h1-h6,p，div,ol,ui,li,pre,table等
(2) 行内元素：能和相邻元素共享一行的元素，例如：span,a,img等
特点：不要对行内元素设置宽和高，设了也没用,宽和高自动适应内容,img除外(它可以设置宽高)
(3)行内元素和块级元素的转换：
块级元素转换为行内元素:给块级元素设置display:inline
行内元素转换为块级元素:给行内元素设置display:block
（4）行内块级元素：既有行内元素的特点(可以和相邻的行内元素共享一行)，
又有块级元素的特点(可以设置宽和高，以及padding和maring)
将元素设置为行内块级元素：display:inline-block
（5）把元素隐藏起来，有两种方式：
方式1：给元素设置display属性，值为none,隐藏元素且不会保留元素的物理空间，与它相邻的元素会挤过来
方式2：给元素设置visibility属性，值为hidden，隐藏元素，但是会保留元素的物理空间
12.CSS定位
（1）绝对定位（position: absolute;）：设置绝对定位，此时元素会脱离文档流 ,它原来的物理空间会被相邻的元素占有.，绝对定位的元素在移动过程中是参照离它最近的父元素进行平移
left:让元素向右移动多少像素
top:让元素向下移动多少像素
绝对定位的元素会脱离文档流，与它相邻的元素会挤过来
固定定位：特殊的绝对定位，它的参照物是body元素(网页上所有的元素的祖先元素)
（2）相对定位:参照元素当前的位置进行定位，相对定位元素需要配合left,right,top,bottom来定位，相对定位的元素没有脱离文档流，在定位过程中保留了物理空间 ，不会被相邻元素占有
绝对定位，参照物是离他最近的父元素
相对定位:参照元素当前的位置进行定位
（3）Z-index属性：在z轴(视觉线)上的堆叠顺序，值越大的就越在前面，离我们的眼睛越近
13.CSS浮动：float
left: 设置元素向左浮动,参照父元素的左上角,向父元素的左边移动
right:设置向右浮动,
设置了浮动的元素的物理空间消失了，会被相邻的元素占有--浮动定位的元素脱离了文档流
注意：浮动定位的元素也脱离了文档流
清除浮动：让浮动的元素再次回到文档流中，重新拥有物理空间，清除浮动的步骤
1.在最后一个浮动元素的后面添加一个空div
2.给空div设置clear样式，值是left/right/both，left是清除左边的浮动元素 right清除向右浮动元素 both是清除两边的浮动元素
14.CSS的盒子模型
（1）内边距padding：
左内边距，即内容到左边框的距离
padding-left:20px ;
右内边距，即内容到右边框的距离
padding-right:20px ;
上内边距，即内容到上边框的距离
padding-top:40px ;
下内边距，即内容到下边框的距离
padding-bottom:40px;
统一设置4个方向的内边距
padding: 40px;
（2）边框boder：
设置4个方向的边框，值：边框宽度 样式 颜色 dashed:虚线边框 solid:实线边框
border-top:20px solid red;
border-bottom: 20px solid red;
border-left:20px solid red;
border-right: 20px solid red;
统一设置4个方向的边框
border:10px solid red;
（3）外边距margin
margin-top:20px;
margin-bottom: 20px;
margin-left:20px;
margin-right: 20px
设置4个方向的外边距
margin: 20px;
(4)清除默认样式，充分利用整个body
*{
margin: 0;
padding: 0;
}
(5)块级元素居中对齐
清除默认样式，充分利用整个body
*{
margin: 0;
padding: 0;
}
div{
设置块级元素左右的margin为auto，会自动适应父元素，在水平方向上居中
margin:值1(上下的margin) 值2(左右的margin)
margin:0px auto;
15.CSS3的新知识
（1）设置圆角边框：border-radius: 20px;
（2）box-shadow：属性向框添加一个或多个阴影。
|
属性值 |
描述 |
|
h-shadow |
必需。水平阴影的位置，允许负值。 |
|
v-shadow |
必需。垂直阴影的位置，允许负值。 |
|
blur |
可选。模糊距离。 |
|
spread |
可选。阴影的尺寸。 |
|
color |
可选。阴影的颜色。 |
注意：扩展：text-shadow添加文字阴影
（3）box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
|
属性值 |
描述 |
|
content-box |
设置元素触发标准盒子模型 |
|
border-box |
设置元素触发怪异（IE）盒子模型 |
标准盒子模型：width和height属性设置的是内容区的宽高。
怪异盒子模型：width和height属性设置的是内容区、内边距和边框的宽高。
常见的怪异盒子标签：input[type='submit']和input[type='reset']。
（4）CSS3的过度
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
transition: property duration timing-function delay;|
属性值 |
描述 |
|
property |
指定CSS属性的name，transition效果 |
|
duration |
transition效果需要指定多少秒或毫秒才能完成 |
|
timing-function |
指定transition效果的转速曲线 |
|
delay |
定义transition效果开始的时候 |
|
timing-function取值 |
描述 |
|
linear |
规定以相同速度开始至结束的过渡效果 |
|
ease |
规定慢速开始，然后变快，然后慢速结束的过渡效果 |
|
ease-in |
规定以慢速开始的过渡效果 |
|
ease-out |
规定以慢速结束的过渡效果 |
|
ease-in-out |
规定以慢速开始和结束的过渡效果，中间匀速 |
实例：将鼠标悬停在一个div元素上，实现在3秒内实现盒子的宽度从100px到500px：
.box {
100px;
height: 100px;
transition: width 3s ease;
}
.box:hover {
500px;
}
实例：将鼠标悬停在一个div元素上，实现在4秒内实现盒子的宽度从100px到500px，并且在10秒内改变盒子背景颜色：
1 .box { 2 100px; 3 height: 100px; 4 5 transition: width 4s ease, background-color 10s linear; 6 } 7 .box:hover { 8 500px; 9 10 } 11
精品java学习视频
正则表达式和文本操作：链接：https://pan.baidu.com/s/1f2As51CjLdTNDFQTbg1K6Q 提取码：98b4