CSS常用总结

css

基础选择器

1. 标签选择器

语法：
标签名： {
	属性值：属性名;
	...
}
例：
p {
	color: red;
}

2. 类选择器

语法：
.类名 {
	属性值：属性名;
	...
}
例：
.red {
	color: red
}

多类名
<div class="box red"></div>
.box {
   width:100px;
   height: 100px;
}
.red {
   color:red
}

3. id选择器（只能一个标签调用）

语法：
#id名 {
    属性值：属性名;
    ...
}
例：
<div id="red"></div>
#red {
	color: red
}

4. 通配符选择器

语法：
* {
    属性值：属性名;
    ...
}
例：
* {
	margin: 0;
    padding: 0;
}

基础选择器总结:

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p{color:red;}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.nav {color:red}
id选择器	一次只能选择一个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav{color:red}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color:red}

复合选择器

1. 后代选择器

   语法： 元素1 元素2 { 样式声明 }; //（元素2为后代元素,用空格隔开）
   

2. 子选择器

   语法：元素1>元素2 { 样式声明 }; //（用>隔开）
   

3. 并集选择器

   语法：元素1,元素2 { 样式声明 }; //（可以选择多组标签，同时为他们定义相同的样式，用逗号隔开） 
   

4. 链接伪类选择器

    a:link  /*选择所有未被访问的链接*/
    a:visited   /*选择所有已被访问的链接*/
    a:hover   /*选择鼠标hover的链接*/
    a:active   /*选择活动（鼠标按下未弹起的）链接*/
   
    :focus /*用于选取获得焦点的表单元素，焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。*/
   

字体系列Fonts（字体）

1. font-family 字体类型：

   body {
   	font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';
   }
   

2. font-size 字体大小：

   p {
   	font-size:20px; //px(像素)大小是我们网页最常用的单位 谷歌浏览器默认的文字大小为16px
   }
   

3. font-weight 字体粗细

   语法：font-weight: normal|bold|bolder|lighter|number;
   .bold {
   	font-weight: 700;
   }
   

4. font-style 文字样式

   语法：font-style: normal|italic;
   p {
   	font-style: normal;
   }
   

5. 字体复合属性

   语法：font: font-style font-weight font-size/line-height font-family; 
   //不能更换顺序，并且各个属性空格隔开；不需要设置的属性可以省略，但是必须保留font-size和font-family属性。
   例子：
   div {
       font-style: italic;
       font-weight: 700;
       font-size: 16px;
       font-family: 'Microsoft YaHei'
   }
   复合属性：
   div {
       font: italic 700 16px 'Microsoft YaHei';
   }
   

文本属性

定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

属性	表示	注意点
color	文本颜色	通常用16进制 如#fff
teat-align	文本对齐	可以设定文字水平的对齐方式 center|right|left（默认值）
text-indent	文本缩进	通常用于段落首行缩进2个字的距离 text-indet:2em （em：相对单位，1个文字的大小）
text-decoration	文本修饰	none|underline|overline|line-through
line-height	行高	控制行与行之间的距离

css的引入方式

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个页面

快捷键 — ctrl+0：浏览器恢复页面大小

Emmet语法

1. 生成标签 直接输入标签名按tab键即可
2. div*3 可以快速生成3个div
3. 如果有父子级关系的标签，可以用> 比如ul>li就可以了
4. 如果有兄弟关系的标签，用+就可以了
5. 如果生成带有类名或者id名字的，直接写.demo或者#demo tab键就可以了
6. 如果生成的div是有顺序的，可以用自增符号$
7. 如果想要在生成的标签内部写内容可以用{}

元素显示模式

网页的标签非常多，在不同的地方会用到不同类型的标签，HTML元素一般分为块元素和行内元素两种类型。

块元素：独占一行。宽、高、外边距、内边距迪欧可以控制，宽度默认是容器（父级宽度）的100%，是一个容器及盒子，里边可以放行内或者块级元素。

行内元素（内联元素）、行内块元素：本身没有宽度和高度

display属性转换为块元素或者行内块元素

背景

背景颜色、背景图片、背景平铺、背景图像固定、背景图片位置等

bacground: bacground-color、bacground-image、bacground-repeat、bacground-attachment、background-position
- bacground-color: transparent|color;
- bacground-image: none|url(url);
- bacground-repeat: repeat|no-repeat|repeat-x|repeat-y;
- bacground-attachment: scroll | fixed;
- background-position: x y | center top; //位置 | 方位名词 | 混合单位

- background: transparent url(url) repeat-y fixed top; //复合写法
- background: rgba(0,0,0,0.3); //最后一个参数是alpha透明色，取值范围在0-1之间

层叠性、继承性、优先级

1. 层叠性

   样式冲突：就近原则，样式不冲突：不会层叠 。

2. 继承性

   子标签会继承父标签的一些样式

3. 优先级（继承的权重是0）

   • 通配符选择器 < 标签选择器 < 类选择器，伪类选择器 < id选择器 < 行内样式 < important

   • 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

网页布局

盒子模型、浮动、定位

盒子模型

组成：边框（border）、外边距（margin）、内边距（padding）、实际内容（content）

border: border-width border-style border-color;
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
例：border:1px solid red;

border-collapse: collapse; //表示相邻边框合并在一起

padding: 用于设置内边距，即表框与内容之间的距离，会影响盒子实际大小

padding: 上下左右;
padding: 上下 左右;
padding: 上 左右 下;
padding: 上 右 下 左;
padding 不会影响盒子大小情况：不指定宽度width

margin: 外边距，控制盒子与盒子之间的距离，使用方法与padding一致

外边距典型应用：
让块级盒子水平居中（条件：盒子必须指定了宽度，盒子左右的外边距都设置为auto）margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或行内块元素水平居中给其父元素添加 text-align: center;即可。

border-radius：圆角边框 
border-radius: length;

box-shadow：盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必须，水平阴影的位置，允许负值；
v-shadow:必须，垂直阴影的位置，允许负值；
blur:可选，模糊距离；
spread:可选，阴影的尺寸；
color:可选，阴影的颜色；
inset:可选，将外部阴影（outset）改为内部阴影；

text-shadow: 文字阴影
text-shadow: h-shadow v-shadow blur color;

浮动

1. 标准流：就是标签按照规定好默认方式排列，标准流是最基本的布局方式
2. 块级元素会独占一行，从上向下顺序排列

常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table

3. 行内元素：行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

常用元素：span、a、i、em等

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

5. 语法：选择器 { float : 属性值 }

6. 浮动布局注意点

   浮动和标准流的父盒子搭配；

   一个元素浮动了，理论上其余的兄弟元素也要浮动（浮动的盒子智慧影响浮动盒子后面的标准流，不会影响前面的标准流）。

7. 清除浮动

   由于父盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下边的标准流盒子。

   (1) 额外标签法(必须是块级元素)：
   <div class="clear"><div/>
   .clear {
       clear:both
   }
   
   (2) 给父亲添加 overflow
   overflow: hidden | auto | scroll;
   
   (3) :after 伪元素法
   .clearfix:after {
       content: '';
       display: block;
       hegiht: 0;
       clear: both;
       visibility: hidden;
   }
   .clearfix {
       *zoom:1; /*IE6、7专有*/
   }
   
   (4) 双伪元素清除浮动
   .clearfix:before {
       content: '',
       display: table;
   }
   .clearfix:after {
       clear: both;
   }
   .clearfix {
       *zoom:1; /*IE6、7专有*/
   }
   

css 属性书写顺序

1. 布局定位属性

   display/position/float/clear/visibility/overflow

2. 自身属性

   width/height/margin/padding/border/background

3. 文本属性

   color/font/text-decoration/text-align/vertical-align/white-space/break-word

4. 其他属性

   content/cursor/border-radius/box-shadow/text-shadow/background

定位

定位 = 定位模式 + 边偏移
定位模式：static relative absolute fixed sticky
边偏移：top bottom left right
定位的叠放顺序：z-index，数值可以是正整数、负整数或0，默认auto，数值越大，越靠上。
绝对定位的盒子水平居中：left: 50%; margin-left: 盒子一半的距离;
绝对定位的盒子水平居中：top: 50%; margin-top: 盒子一半的距离;

display

display: none（隐藏）|block（转换为块级、显示元素）
display 隐藏元素后，不再占有原来的位置。

visibility

visibility: inherit|visible|hidden;
visibility隐藏元素后，继续占有原来的位置。

overflow

overflow: visible|auto|hidden|scroll;

css高级

精灵图

核心原理：

1. 将网页中的一些小背景整合到一张大图中，这样服务器只需要一次请求就可以了。
2. 借助背景位置background-position来实现 。
3. 一般情况下数值都是负值。

三角的做法：

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

三角强化：

div {
     width: 0;
     height: 0;
     border-color: transparent red transparent transparent;
     border-style: solid;
     border-width: 22px 8px 0 0;
}

鼠标样式 cursor: default|pointer|move|text|not-allowed;

表单轮廓 outline: none;

防止拖拽文本域 resize: none;

文字垂直对齐，只针对于行内元素或者行内块元素有效。

vertical-align: bottom|middle|top；

white-space: normal|nowrap；

单行文本省略号显示

1. 先强制文字一行显示

2. 超出的部分隐藏

3. 文字用省略号替代超出的部分

   white-space: nowrap；
   overflow: hidden;
   text-overflow: ellipsis;
   

css 初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
如：
*{
    margin: 0;
    padding: 0;
}
Unicode编码，有效避免浏览器解释CSS代码时出现乱码
黑体 \9ED1\4F53
宋体 \5BBB\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

css3提高导读

类选择器 属性选择器 伪类选择器 权重都是10

新增属性选择器

例如 :

//选择具有value属性的input元素
input[value] { color: pink} 
//重点，选择具有type属性且属性值等于val的input元素
input[type = 'button'] { color: pink}  
//选取div拥有class属性且以icon开头的元素
div[class^='icon'] { color: red } 
//选取div拥有class属性且以box结尾的元素
div[class$='box'] {color:red}
//匹配具有att属性且值中含有val的元素
E[att*='box'] {color:red}

新增结构伪类选择器

evenE:first-child  //匹配父元素中的第一个子元素E
E:last-child  //匹配父元素中的最后一个子元素E
E:nth-child(n)  //匹配父元素中的一个或多个特性的元素 n可以是数字，关键字和公式
E:first-of-type //指定类型E的第一个
E:last-of-type  //指定类型E的最后一个
E:nth-of-type(n)//指定类型E的第n个
例如：
ul li:nth-child(3){}
ul li:nth-child(even){} //even:偶数
ul li:nth-child(odd){} //odd:奇数
公式（n从0开始）：
n,2n,2n+1,5n,n+5,-n+5

新增伪元素选择器

利用css创建新标签元素，而不需要HTML标签，从而简化HTML结构。

语法：
element::before
element::after

before after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面创建元素，都是行内元素，不能直接设置宽高
例子:
div::before {
    content:'我'
    display： inline-block;
    width: 30px;
    height:40px;
    bacground-color: red;
}
div::after {
    content:'小猪佩佩'
}
<div>是</div>

box-sizing: 指定盒模型

box-sizing: content-box // 盒子大小为width + padding + border(默认)
box-sizing: border-box // 盒子大小为width

滤镜  filter: 函数();  //blur(),contrast()...
例如： filter: blur(5px); //blur模糊处理

计算  clac()
clac(100%-80px); //blur模糊处理

transition: 过渡。一个状态渐渐地过渡到另一个状态。

transition： 要过渡的属性 花费时间 运动曲线 何时开始；
例如： transition： width .5s ease 1s；

要过渡的属性：宽高 背景颜色 内外边距都可以，如果想要所有的属性都变化过渡，用all；

花费时间：单位是秒；

运动曲线：默认是ease，可以省略；

何时开始：可以设置延迟触发时间，默认是0s，可以省略。

注：如果想要写多个属性，用逗号分隔。