css三大属性

• 层叠性：相同选择器给设置相同的样式，此时一个样式会覆盖另一个样式，就近原则，样式不冲突不重叠
• 继承性：
  1、子承父业 子标签继承父标签，（父元素的样式 text- font- line- 这些元素开头可以继承，以及color元素）;
  2、行高的继承，行高可以跟单位，也可以不跟单位。行高比如1.5==》当前文字大小font-size的1.5倍。
• 优先级：
  1、 选择器相同，则执行层叠性；
  2、选择器不同，则根据选择器权重执行；

3、权重叠加：如果是复合选择器，就会有权重叠加（需要计算）
注意：权重的计算 不是二进制的计算，
e.g. 0,0,0,1 + 0,0,0,1 =0,0,0,2 (十个相加= 0，0，0，10)
0,0,1,0+0,0,0,1 = 0,0,1,1

1、选择器

定义：选择器分为 "基础选择器" 和 "复合选择器" 两大类

1.1 基础选择器

定义：基础选择器是由 单个选择器组成；
基础选择器包括：标签选择器、类选择器（.）、id选择器(#)、通配符选择器(*)

注意：id属性只能在每个html文档中出现一次

类选择器在修改样式中用的最多;

id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

1.2 复合选择器

• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
• 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

1.2.1 链接伪类选择器

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

• a:link : 选择所有未被访问的链接

• a:visited : 选择所有已被访问的链接

• a:hover : ⿏标指针方于其链接上

• a:active : 选择活动链接(⿏标按下未弹起链接)

1.2.2 :focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

 input:focus {  background-color:yellow;  }

2、字体属性

定义：字体系列、大小、粗细、和文字样式（如斜体）

2.1 font-family 定义文本的字体系列

 div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

• 各种字体之间必须使用英文状态下的 逗号 隔开
• 一般情况下,如果 有空格隔开的多个单词组成的字体, 加引号.
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
• 最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
• 多个字体 前面的字体无效，就用后面的字体。

2.2 font-size 属性定义字体大小

2.3 font-weight 属性设置文本字体的粗细

 p {  font-weight: bold;  } 

2.4 font-style 属性设置文本的风格。

 p {  font-style: normal;  } 
nomarl 默认值    italic斜体
//开发中 一般都是将(em,i)斜体的文字改为正常

2.5 字体复合属性

 body {  font: font-style font-weight font-size/line-height font-family; } 

• 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
• 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

3、文本属性

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

3.1 color

 div {  color: red;  } 
开发中最常用的是十六进制. 

3.2 text-align 设置元素内 文本内容的水平对齐方式

 div {  text-align: center;  } 
left right center

3.3 text-decoration 属性规定 添加到文本的修饰

 div {  text-decoration：underline；  } 
none   默认常用
可以给文本添加下划线(underline)、上划线(overline)、删除线(line-throungh)等。 

3.4 text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

 div {  text-indent: 10px;  } 
缩进给一个长度，可以是一个负值

 p {  text-indent: 2em;  } 
em 是一个相对单位,就是当前元素（font-size) 1 个文字的大小,
如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

3.5 line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

image.png

 p {  line-height: 26px;  } 

行高给大了 文字偏下

行高的上空隙和下空隙把文字挤到中间了.
如果行高小于盒子高度 文字会偏上 如果行高大于盒子高度,则文字偏下

4、元素显示模式

HTML 元素一般分为块元素和行内元素两种类型。

4.1 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
块级元素的特点：
①比较霸道，自己独占一行。
②高度，宽度、外边距以及内边距都可以控制。
③宽度默认是容器（父级宽度）的100%。
④是一个容器及盒子，里面可以放行内或者块级元素。
注意：

• 文字类的元素内不能使用块级元素
• <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div> 同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

4.2 行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
行内元素的特点：
①相邻行内元素在一行上，一行可以显示多个。
②高、宽直接设置是无效的。
③默认宽度就是它本身内容的宽度。
④行内元素只能容纳文本或其他行内元素。
注意：

• 链接里面不能再放链接
• 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

4.3 行内块元素

<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
行内块元素的特点：
①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
②默认宽度就是它本身内容的宽度（行内元素特点）。
③高度，行高、外边距以及内边距都可以控制（块级元素特点）。

4.4 元素显示模式转换

• 转换为块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块：display: inline-block;

5、背景

5.1 background-color 属性定义了元素的背景颜色。

 background-color:颜色值; 
一般情况下元素背景颜色默认值是 transparent（透明），
我们也可以手动指定背景颜色为透明色。 
 background-color:transparent; 
background: rgba(0, 0, 0, 0.3); 
背景半透明是指：盒子背景半透明，盒子里面的内容不受影响

5.2 background-image 背景图像

运用：实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,
优点是非常便于控制位置. (精灵图也是一种运用场景)

background-image : none | url (url) 
注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。 

5.3 background-repeat 背景平铺

 background-repeat: repeat | no-repeat | repeat-x | repeat-y 
background-repeat: 纵向横向平铺| 不平铺| 横向上平铺 | 纵向上平铺

5.4 background-position 背景图片位置

 background-position: x y; 
 可以使用 方位名词 或者 精确单位 
方位名词 :top center bottom left right     
精确单位 : 百分数 ；有单位的长度，如10px

注意

1. 参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
• 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2. 参数是精确单位

• 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
• 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3. 参数是混合单位

• 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5.5 background-attachment 背景图像固定

设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment : scroll | fixed 
background-attachment : 背景图像随着对象内容滚动| 背景图像固定

5.6 背景复合写法

 background: transparent url(image.jpg) repeat-y fixed top ;
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; 

//例子：
  background-image: url("../../icon/loginBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;

6 页面布局

6.1 盒子模型

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

6.1.1 border

border : border-width || border-style || border-color 

border-style: 
1、none：没有边框即忽略所有边框的宽度（默认值） 
2、solid：边框为单实线(最为常用的) 
3、dashed：边框为虚线 
4、dotted：边框为点线 

边框样式有重叠性 就近原则

border-radius：length
1、圆角边框
2、可以是10px这样的数字
3、可以是 百分比， 50% ：表示宽高的50%；

表格的细线边框

border-collapse 它控制相邻单元格的边框。

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

注意： 边框会额外增加盒子的实际大小。 CSS3可以解决，也可以减去边框的宽度

6.1.2 padding 属性用于设置内边距，即边框与内容之间的距离。

注意： 会额外增加盒子的实际大小。 CSS3可以解决，也可以减去边框的宽度

6.1.3 margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

• 让块级盒子 水平居中 margin: 0 auto
  1、盒子必须指定宽度
  2、盒子左右的外边距都设置为auto
• 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

• 外边距合并
  1、相邻块元素垂直外边距的合并：取大的值

  
  
  image.png

2、嵌套块元素垂直外边距的塌陷

image.png

解决方案： ①可以为父元素定义上边框。 ②可以为父元素定义上内边距。 ③可以为父元素添加 overflow:hidden。

• 行内元素为了照顾 兼容性，尽量只设置左右的内外边距，不设置上下的内外边距。

6.1.4 box-shadow 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset; 

注意：

1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
   2.盒子阴影不占用空间，不会影响其他盒子排列。

6.1.5 text-shadow 文字阴影

text-shadow: h-shadow v-shadow blur color;

6.2 浮动 float

选择器 { float: 属性值; }
none left right

• 浮动元素 会 脱标
• 浮动的元素 会一行内显示并且 元素顶部对齐
• 浮动的元素会具有行内块元素的特性.
• 浮动的盒子不再保留原先的位置 ,也会浮与标准流盒子的上面
• 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。

6.2.1清除浮动:

当父盒子的高度不能写死的时候，需要根据子盒子来撑开高度。如果父盒子高度不给，子盒子全是浮动的（不占位置），这样父盒子的高度为0，会有问题。
所以需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

清除浮动：

 选择器{clear:属性值;} 
clear:both；同时清除左右两边浮动的影响
clear:left; 清除左侧浮动影响
clear:right；清除右侧浮动影响

6.2.1.1 清除浮动方法1：额外标签法也称为隔墙法

额外标签法 会在浮动元素末尾添加一个空的标签(块级元素)，添加 清除浮动样式.

6.2.1.2 清除浮动方法2：父级元素中加 overflow 元素

overflow:hidden | auto |scroll
缺点：无法显示溢出部分

6.2.1.3 清除浮动方法3：父级元素 :after 伪元素法

.clearfix:after {  
  content: ""; 
  display: block; 
  clear: both;  
}

清除浮动的策略是: 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

6.3 定位

定位 = 定位模式 + 边偏移

6.3.1 定位模式 position

6.3.1 边偏移

子绝父相

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。⽗盒⼦不能加绝对定位(因为不占位⼦,后⾯会乱）
③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

z-index 定位叠放次序

 选择器 { z-index: 1; } 

• 数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有 z-index 属性

定位特殊性

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3、脱标的盒子不会触发外边距塌陷
4、浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片） ；但是绝对定位（固定定位） 会压住下面标准流所有的内容。

8、精灵图（sprites）雪碧图

• 把多个小图整合到一个大图中
• 移动背景图片位置， 此时可以使用 background-position。
• 因为一般情况下都是往上往左移动，所以数值是负值。
• 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
  步骤：
  1、测量 图标在精灵图中的位置；
  2、给 网页中显示的窗口的大小

// 1、网页中，容器的大小和位置
width:100px;
height:100px;
margin:50px auto;
//2、图标在精灵图中的 位置 
background:url(../../精灵图位置) no-repeat -150px -20px;

image.png

9、css三角

image.png

width:0;
height:0;
border-top:10px solid red;
border-right:10px solid green;
border-bottom:10px solid blue;
border-left:10px solid black;

image.png

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

line-height:0;
font-size:0;
兼容问题，可不写；
虽然显示是三角形，实际是100px * 100px

image.png

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

10、用户界面样式

定义：更改一些用户操作样式，以便提高更好的用户体验。

• 10.1 更改用户的鼠标样式
• 10.2 表单轮廓
• 10.3 防止表单域拖拽

10.1 鼠标样式

 li {cursor: pointer; }

10.2 轮廓线 outline

input { outline:none ; }
input { outline:0 ; }
就可以去掉默认的蓝色边框

10.3 防止表单域拖拽

textarea{ resize: none;} 
不让 文本域右下角拖拽

11、vertical-align 属性应用

• 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
• 设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

 vertical-align : baseline | top | middle | bottom

image.png

11.1 运用： 图片、表单和文字对齐

图片、表单 属于行内块元素，默认的vertical-align 是基线对齐；
此时，可以给图片、表单这些行内块元素的vertica-align属性设置为middle就可以让文字和图片垂直居中对齐。

11.2 运用：解决图片底部默认空白缝隙问题

主要解决方法有两种：
1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2.把图片转换为块级元素 display: block;

12、溢出的文字省略显示

12.1 单行文字溢出显示省略号

 /*1. 先强制一行内显示文本*/ 
white-space: nowrap; （ 默认 normal 自动换行） 
 /*2. 超出的部分隐藏*/  
overflow: hidden; 
 /*3. 文字用省略号替代超出的部分*/ 
 text-overflow: ellipsis; 

12.2 多行文本溢出显示省略号

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。 

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

13、css3新特性

13.1 新增选择器

• 属性选择器 （权重0,0,1,0 ）
• 结构伪类选择器
• 伪元素选择器

13.1.1 属性选择器

13.1.2 结构伪类选择器

结构伪类选择器主要根据 文档结构来选择元素，常用于根据父级选择器里面的子元素

nth-child(n) 选择 某个父元素的一个或多个特定的子元素

• n 可以是：关键字和公式
• n如果是数字：选择第n个子元素，里面数字从1开始
• n可以是关键字：even 偶数，odd 基数
• n可以是公式：如下（如果n是公式，则从0开始计算）
  |公式|取值
  |:----- |:-----
  |2n | 偶数
  |2n+1 | 奇数
  |5n| 5 10 15 ……
  |n+5 | 从第五个开始（包括第五个）到最后
  |-n+5| 前五个（包括第五个）

13.1.3 伪元素选择器

• before 和 after 创建一个元素，但是属于 行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  语法： element::before {}
• before 和 after 必须有 content 属性
• before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为 1

14、盒子模型

1.box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
2.box-sizing: border-box 盒子大小为 width (padding, border 就不会撑大盒子)