css复习

基础选择器

基础选择器	作用	特点
标签选择器	可以选出所有相同的标签	不能差异化选择
类选择器	可以选出一个或多个标签	可以根据需求选择
id选择器	一次只能选择一个标签	id属性只能在文档中出现一次
通配符选择器	*表示选取页面中所有的元素	选择的太多，有部分不需要

复合选择器

复合选择器是由两个或多个 基础选择器 通过不同的方式组合而成的

复合选择器
后代选择器	元素1 元素2 {样式声明} 选择元素1里面的所有元素2
子选择器	元素1>元素2 {样式声明} 选择元素1里面的所有直接后代（儿子）元素2
并集选择器	元素1，元素2 {样式声明} 通常用于集体声明
伪类选择器	用冒号：表示，:hover鼠标经过，:focus用于选取获得焦点的表单元素
相邻兄弟选择器	元素1+元素2 {样式声明} 选择与元素1(向下)相邻的一个兄弟元素2
通用选择器	元素1~元素2 {样式声明} 选择与元素1(向下)相邻的所有兄弟元素2

CSS3属性选择器

权重为10

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性，且值=val的E元素
E[att^=“val”]	选择具有att属性，且值以val开头的E元素
E[att$=“val”]	选择具有att属性，且值以val结尾的E元素
E[att*=“val”]	选择具有att属性，且值中含有val的E元素

CSS3结构伪类选择器

权重为10

选择器	简介
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个子元素E
E:nth-child(n)	匹配父元素中第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

n可以是数字，关键字和公式

n为公式时，n从0开始

n的取值	取值
数字	选择第n个
even	偶数
odd	奇数
2n	偶数
2n+1	奇数
5n	5,10,15 ……
n+5	从第5个到最后
-n+5	前5个

CSS3伪元素选择器

权重为1

选择器	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

必须有content属性

属于行内元素

css字体属性

CSS字体属性
font-family	定义文本的字体系列
font-size	定义字体大小
font-weight	定义字体粗细 normal(400),bold(700),100-900
font-style	设置字体样式 normal默认，italic斜体

css文本属性

CSS文本属性
color	文本颜色
text-align	设置元素内 文本内容 的 水平对齐方式，left,center,right
text-decoration	装饰文本，none没有装饰线,下划线underline,上划线overline,line-through删除线
text-indent	文本缩进，通常是将段落的首行缩进
line-height	行间距，行高

元素的显示模式

块元素	行内元素	行内块元素
h1-h6,p,div,ul,ol,li	a,strong,b,em,i,del,ins,span	img,input
独占一行	一行可以显示多个	一行可以放多个行内块元素
可以设置宽度和高度，宽度默认是容器（父级宽度）的100%	宽高直接设置是无效的，默认宽度是它本身内容的宽度	可以设置宽高，默认宽度是它本身内容的宽度
里面可以放行内或块级元素（文字类元素比如p里面不能放块级元素）	行内元素内只能容纳文本或其他行内元素

display:block,inline,inline-block

css背景

CSS背景
background-color	背景颜色，默认transparent透明
background-image	背景图片，none,url()
background-repeat	背景平铺，repeat|no-repeat|repeat-x|repeat-y
background-position	背景图片位置 ，x y精确单位|top|center|bottom|left|center|right方位名词
background-attachment	背景附着，scoll背景图像随内容滚动|fixed背景图像固定
背景复合写法	background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置
background:rgba(0,0,0,0.2)	背景色半透明

盒子模型

就是把html页面中的布局元素看作是一个盒子，也就是一个装内容的容器

css盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框，外边距，内边距和实际内容

border	padding	content	margin
border-width:边框粗细 px	如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子		让块级盒子水平居中margin:0 auto
border-style:边框样式 none|solid单实线|dashed虚线|dotted点线
border-color:边框颜色

外边距合并

1. 相邻块元素垂直外边距的合并：当上下相邻的两个块元素相遇时，如果上面的元素由下外边距，下面的元素有上外边距，则他们的垂直间距不是margin-bottom和margin-top之和，取两个值中的较大者这种现象称为相邻块元素垂直外边距的合并。
   1. 解决方案：尽量只给一个盒子添加margin值
2. 嵌套块元素垂直外边距的塌陷：对于两个嵌套关系的块元素，父元素有上外边距同时子元素有上外边距，此时父元素会塌陷较大的外边距值
   1. 解决方案：
      1. 可以为父元素定义上边框
      2. 可以为父元素定义内边距
      3. 可以为父元素添加overflow:hidden

清除内外边距

*{
    margin:0;
    padding:0
    
}

css3新增样式

圆角边框 border-radius	左上 右上 右下 左下
盒子阴影 box-shadow	h-shadow v-shadow blur(模糊距离) spread(阴影的尺寸) color inset
文字阴影 text-shadow	h-shadow v-shadow blur color

传统网页布局的三种方式

网页布局的本质：用css摆放盒子

• 普通流（标准流）：标签按照规定好的默认方式排列，比如块元素独占一行，从上到下排列
• 浮动
• 定位

浮动

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float:none|left|right

浮动特性：

• 浮动元素会脱离标准流（脱标），不再保留原先的位置，
• 浮动元素具有行内块元素的特性
  • 浮动元素会在一行内显示并且元素顶部对齐
  • 如果块级盒子没有设置宽度，默认宽度和父级盒子一样宽，但是添加浮动之后，它的宽度根据内容来决定
  • 浮动的盒子中间没有缝隙，紧挨在一起

网页布局第一准则：先用标准流父元素排列上下位置，内部子元素采取浮动排列左右位置

网页布局第二准则：先设置盒子大小，再设置盒子位置

理想中的状态：不给父盒子高度，让子盒子撑开父元素

但是不给父盒子高度会出现问题，即子元素浮动了，不占位置了，导致父盒子高度为0，就会影响下面的标准流的盒子,所以要清除浮动

清除浮动

本质：清除浮动元素脱离标准流造成的影响

• 如果父盒子本身有高度，则不用清除浮动

• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

清除浮动的方法

清除浮动的方法
额外标签法，隔墙法	在浮动元素末尾添加 块级空元素 给空元素添加样式 style=“clear:both”
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素

.clearfix:after{
    content:"";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

定位

定位：将盒子定在某个位置

定位=定位模式+边偏移

定位模式

position : relative|absolute|fixed|static静态定位

边偏移 ：top|left|right|bottom

• 相对定位：相对自己原来的位置移动，原来在标准流的位置继续占有(不脱标)
• 绝对定位：相对祖先元素移动位置，不再占有原先的位置(脱标)。如果没有祖先元素或祖先元素没有定位，则以浏览器为准来定位
• 固定定位：元素固定于浏览器可视区位置，不再占有原先的位置(脱标)

子绝父相：父盒子需要占有位置，子盒子不需要占有位置

定位叠放次序z-index

使用定位布局时，可能出现盒子重叠的情况，可通过z-index来控制盒子的前后次序(z轴)

只有定位的盒子才有z-index属性,属性值越大，盒子越靠上

定位特殊特性

• 行内元素添加绝对或固定定位，可直接设置宽度和高度
• 块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是其内容大小

脱标的盒子(浮动元素，绝对定位，固定定位)不会触发外边距合并的问题

浮动元素只会压住它下面标准流的盒子，不会压住标准流盒子里的文字

绝对定位或固定定位会完全压住盒子，压住下面标准流所有的内容

元素的显示与隐藏

元素的显示与隐藏
display	none|block	display隐藏元素后，不在占有原来的位置
visibility	visibile|hidden	visibility隐藏元素后，继续占有原来的位置
overflow	hidden|visible|scroll|auto

---

精灵图

为了有效减少服务器接受和发送请求的次数，提高页面的加载速度，出现了css精灵技术

核心原理：将网页中一些小 背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

字体图标

iconfont,展示的是图标，本质属于字体

css三角

div{
    width:0;
    height:0;
    border:10px solid transparent;
    border-left-color:pink;
}

css用户界面样式

更改用户的鼠标样式	cursor:default|pointer|move|text|not-allowed
表单轮廓	outline:none去掉默认的蓝色边框
防止表单域拖拽	resize:none

vertical-align属性应用

用于设置图片或者表单和文字垂直对齐

用于设置一个元素的垂直对齐方式，只针对行内元素或者行内块元素有效

vertival-align:baseline|top|middle|bottom

溢出的文字省略号显示

1. 单行文本溢出显示省略号

   white-space:nowrap;不换行，强制一行内显示文本
   overflow:hidden;超出的部分隐藏
   text-overflow:ellipsis;用省略号代替超出的部分
   

2. 多行文本溢出显示省略号

   overflow: hidden;
   text-overflow: ellipsis;
   /* 弹性伸缩盒子模型显示 */
   display: -webkit-box;
   /* 限制在一个块元素显示的文本的行数 */
   -webkit-line-clamp: 2;
   /* 设置或检索伸缩盒对象的子元素的排列方式 */
   -webkit-box-orient: vertical;
   

CSS3 2D转换

转换transform可以实现元素的位移translate,旋转rotate,缩放scale等效果

位移translate

transform:translate(x,y)
transform:translateX(n)
transform:translateY(n)

• 不会影响到其他元素的位置
• 对行内标签没有效果
• 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的

旋转rotate

transform:rotate(度数deg)

设置旋转中心点transform-origin:x y

x y默认转换的中心点是元素的中心点50% 50%

x y可以是像素

x y可以是方位名词 top|bottom|left|right|center

缩放scale

transform:scale(x,y)

x y为放大的倍数

默认以中心点缩放，不影响其他盒子

2D转换综合写法

transform:translate() rotate() scale()

当同时有位移和其他属性的时候，记得要将位移放到最前

过渡

transition: 变化的属性 花费时间 运动曲线 何时开始
如果想要多个属性都变化，属性写all就可以了
谁做过渡，给谁加
transition: all 0.5s;

CSS3动画

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

动画是使元素从一种样式逐渐变化为另一种样式的效果

先定义动画，再调用动画

@keyframes 动画名称{
    0%{
        //动画开始
    }
    100%{
        //动画结束
    }
}

动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animate-play-state属性
animation-name	动画名称
animation-duration	持续时间。动画完成一个周期所花费的秒或毫秒，默认0
animation-timing-function	速度曲线，默认ease
animation-delay	何时开始，默认0
animation-iteration-count	播放次数，默认1，infinite
animation-direction	是否反方向。动画在下一周期是否逆向播放，默认normal不,alternate
animation-play-state	动画状态。动画是否正在运行，默认running,paused
animation-fill-mode	动画结束后的状态保持forwards回到起始backwards

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation-timing-function速度曲线
linear	匀速
ease	默认，低速开始-加快-结束前变慢
ease-in	低速开始
ease-out	低速结束
ease-in-out	低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）

CSS3 3D转换

x轴：水平向右

y轴：垂直向下

z轴：垂直屏幕

3D位移

transform:translateX();
transform:translateY();
transform:translateZ();
transform:translate3d(x,y,z);

3D旋转

transform:rotateX(度数deg)
transform:rotateY(度数deg)
transform:rotateZ(度数deg)
transform:rotate3d(x,y,x,deg)
transform:rotate3d(1,0,0,45deg)表示沿着x轴旋转45度

左手准则：

• 左手的拇指指向x轴正向，其余手指的弯曲方向就是该元素沿着x轴旋转的方向
• 左手的拇指指向y轴正向，其余手指的弯曲方向就是该元素沿着y轴旋转的方向

透视

perspective:200px

如果想要在网页上产生3D效果需要透视

透视的单位是像素

透视写在被观察元素的父盒子上

3D呈现

控制子元素是否开启三维立体环境

transform-style:flat(默认不开启)|preserve-3d

代码写给父元素，但影响的是子元素

浏览器私有前缀

-moz-：代表 firefox 浏览器私有属性

-ms-：代表 ie 浏览器私有属性

-webkit-：代表 safari、chrome 私有属性

-o-：代表 Opera 私有属性