前端-CSS-基础~

CSS

1 CSS简介

层叠样式表（Cascading Style Sheets）是一种用来表现html或xml文件样式的语言。CSS可静态修饰网页，也可以配合脚本语言对网页元素进行格式化。

CSS由哈坤.利于 1994年进行设计，1997年W3C完成第一份标准。

2 CSS基本长度单位

• em 倍数 默认字体大小的倍数
• px：pixel，像素，屏幕上显示的最小单位
• % ：百分比

3 CSS基本颜色单位

• colorName 颜色名方式
• RGB 十进制
• RGB 十六进制

4 CSS基本选择器

4.1 基本选择器

1 标签名选择器

标签名{
	CSS样式
}

2 类名选择器

.类名{
	CSS样式
}

1.多个元素可以设置相同类名。
2.一个元素可以设置多个类名。

3 id选择器

# ID名{
	CSS样式；
}

元素对应唯一id

4 全局（通配）选择器

*{
	CSS样式；
}

4.2 基本选择器之间的优先级

ID选择器>类名选择器>标签选择器>全局选择器

5 盒子模型

5.1 盒子显示模式

1 块级元素block

独占一行，可设置宽高

2 行内元素inline

并排显示，无法可设置宽高

3 行内块元素 inline-block

不会独占一行，可设置宽高

注意：

官方文档中，显示模式职业行内和块级，区分标准为是否可以独占一行。行内块元素算行内元素。

5.2 HTML元素的默认显示模式

1 默认显示模式是block

h1~h6,p,hr,br,pre,div,ul,ol,li,dl,dt,dd,table,caption,thead,tbody,tfoot,form,option

2 默认显示模式是inline

em,strong,del,ins,sub,sup,a,span,label

3 默认显示是inline-block

img,td,th,input,textarea,select,button,iframe

5.3 修改元素的显示模式

display : inline/block/inline-block/none

6 常用CSS属性

6.1 字体属性

属性名	作用	属性值
font-family	设置字体族科	设置一个或多个字体族科
font-size	设置字体大小	长度
font-weight	设置字体粗细	normal:正常，默认值。 lighter:细体字。 bold:粗体字。 100~300 细体字，400，500正常，600以及以上粗体字
font-style	设置斜体字	normal：正常，默认值。 italic:斜体字。
font	复合属性	同时设置字体族科，字体大小，字体粗细，斜体字

衬线字体：serif，笔画粗细不一致的字体。
非衬线字体：sans-serif，笔画粗细一致的字体。

1.子属性在前，复合属性在后，子属性的样式会被覆盖。
2.复合属性在前，子属性覆盖复合属性中对应的样式，其他不受影响。

6.2 文字颜色

属性名	作用	属性值
color	设置文字的颜色	颜色

6.3 文本属性

属性名	作用	属性值
letter-spacing	字母间距	长度（不能使用百分比）
word-spacing	词间距	长度（不能使用百分比）
text-decoration	文本修饰线	none:没有修饰。 underline:下划线。 overline:上划线。 line-through:删除线。
text-indent	首行缩进	长度
text-align	文本水平对齐方式	left：靠左对齐，默认值。 center:居中对齐。 right:靠右对齐。
vertical-align	设置行内或行内块元素与文本如何对齐	baseline:基线对齐，默认值。 top:顶线对齐。 bottom:底线对齐。 middle:中线对齐。 sup:上标字。 sub:下标字。 长度：与基线的距离，可以是负值。
line-height	设置行高	长度

行高：

1.上一行文字的中线与下一行文字的中间之间的距离。

2.行高变大，行距也变大。

3.元素中只有一行文字，行高与高度一致，文字会居中垂直。

4.line-height 是 font 的子属性

6.4 背景属性

属性名	作用	属性值
background-color	设置背景颜色	颜色 元素默认背景颜色是transparent(透明)
background-image	设置背景图像	url(图片地址)
background-repeat	设置背景图像重复方式	repeat:重复，默认值 repeat-x:只在水平方向重复。 repeat-y:只在垂直方向重复。 no-repeat:不重复。
background-position	设置背景图像位置	关键字方式:left,right,center/top,bottom, center 使用长度设置坐标：两个长度
background-attchment	设置背景图像固定	scroll:随元素滚动，默认值。 fixed:固定
background	背景复合属性	多个子属性的值。

6.5 鼠标光标属性

属性名	作用	属性
cursor	设置鼠标光标样式	default:默认值 pointer:小手 move:移动图标

自定义鼠标光标图片：设置图片

cursor:url(../xxx),pointer

6.6 列表属性

属性名	作用	属性值
list-style-type	设置列表项图标	none:没有图标。 disc:实心圆。 …
list-style-image	自定义列表项图标	url(图像地址)
list-style-position	设置列表项图标位置	outside:图标在li的外面，默认值。 inside:图标在li的里面
list-style	复合属性	多个子属性的值，使用空格隔开

6.7 表格属性

属性名	作用	属性值
table-layout	设置列宽是否固定	auto:列宽不固定，默认值。 fixed:列宽固定。
border-collapse	设置单元格边框合并	separate:不合并，默认值 collapse:合并。
border-spacing	设置单元格直间的距离	长度
caption-side	设置表格标题的位置	top:在表格上面，默认值。 bottom:在表格下面
empty-cells	设置没有内容的单元格是否显示	show:显示，默认值。 hide:隐藏。

总结：

1.以上5个CSS属性都需要设置到table元素。
2.border-spacing 设置单元格之间的距离，生效的前提是单元格变框不合并。
3.empty-cells 设置没有内容的单元格是否显示，生效的前提是单元格边框不合并。

7 CSS选择器

7.1 组合选择器

1 后代选择器

选择器1 选择器2{

}

2 子元素选择器

选择器1>选择器2{

}

3 交集选择器

选择器1选择器2{

}
/*标签名必须在前*/
p.item{
    
}

4 并集选择器

选择器1，选择器2{

}

7.2 伪类选择器

:link			未访问过的超链接 
:visited		访问过的超链接
:hover			鼠标悬停在上面的元素
:active			鼠标悬停在上面且按键按下的元素

1.:link和:visited只适用用超链接，:hover和:active适合于所有元素
2.通常伪类选择器需要与其他选择器进行交集组合
3.多个伪类选择器一起使用，按照'lvha'顺序

7.3 选择器权重

1 基本选择器之间的权重

id选择器>类名选择器、伪类选择器>标签名选择器>全局选择器

2 组合选择器优先级比较原则

1. 对比两组选择器中ID选择器的数量，数量多者取胜，结束比较。
2. 如果ID数量无法区分胜负，对比两组选择器中类名和伪类的数量，，数量多者取胜，结束比较。
3. 如果类名和伪类数量无法区分胜负，对比两组选择器中标签名选择器的数量，，数量多者取胜。
4. 如果仍然无法区分胜负，两组选择器优先级相同，后面选择器设置的的样式覆盖前面的

**注意：**并集选择器的优先级各自计算各自的。

8 盒子模型

8.1 盒子模型组成

1 盒子模型

1.一个元素就是一个盒子，页面布局就是盒子的排列和堆砌。
2.盒子模型包括：内容，内边距，边框，外边框

2 影响盒子大小的因素

1.元素总的宽高=元素内容宽高+内边距宽度+边框宽度
2.外边距不影响元素大小，影响元素位置。

8.2 盒子中内容区域

1 设置内容宽高属性

css属性名	功能	属性值
width	设置内容区域宽度	长度
max-width	设置元素内容区域的最大宽度	长度
min-width	设置元素内容区域的最小宽度	长度
height	设置元素内容区域的高度	长度
max-height	设置元素内容区域的最大高度	长度
min-height	设置元素内容区域的最小高度	长度

2 设置内容宽高的值规则

1.最大宽高和最小宽高的设置一般不与固定宽高一起用，主要对默认计算的宽高做出限制。
2.使用百分比设置宽高以父元素宽高为基准。

3 跨级元素的默认宽度

1.行内元素，行内块元素默认宽度和高度被内容撑开
2.块级元素默认的高度被内容撑开
3.块级元素默认宽度：
默认的总宽度=父元素内容宽度-元素的左右外边距
默认内容宽度=父元素内容宽度-元素的左右外边距-元素左右边框宽度-元素左右内边距

8.3 盒子的内边距padding

① 相关 CSS 属性

CSS 属性名	功能	属性值
padding-left	设置左内边距	长度
padding-right	设置右内边距	长度
padding-top	设置上内边距	长度
padding-bottom	设置下内边距	长度
padding	设置多个方向内边距，复合属性（上右下左）	多个长度

padding值设置规则：

1.使用百分比设置内边距，不论哪个方向，都参照父元素内容的宽度。
2.边距不允许设置负值

不同显示模式的元素设置内边距

1.块级元素和行内块元素可以完美设置4个方向的内边距
2.行内元素可以完美设置左右内边距；上下内边距设置不完美，不建议设置。

8.4 边框border

css属性名	功能	属性值
border	设置边框	设置风格，宽度，颜色
border-style	设置边框风格	none:无，默认值。 solid:实线。 dashed:虚线。 dotted:点线。 double:双实线
border-width	设置边框宽度	长度
border-color	设置边框颜色	颜色
…

8.5 外边框margin

1 css属性

css属性名	功能	属性值
margin-left	设置左外边距	长度
margin-right	设置右外边距	长度
margin-top	设置上外边距	长度
margin-bottom	设置下外边距	长度
margin	设置多个反向外边距（上右下左）	长度

margin值设置规则：

1.使用百分比设置外边距，不论哪个方向，都参照父元素内容宽度。
2.外边距允许设置为负值

---

不同显示模式的元素设置外边距：

1.块级元素，行内块元素可以完美设置4个方向的外边距
2.行内元素，只能设置左右的外边距，上下外边距设置不生效。

margin塌陷

1.第一个子元素的上外边距和最后一个子元素的下外边距会塌陷到父元素上。
2.外边距塌陷只会发生在块级元素上；只会发生在上下外边距上。

---

解决margin塌陷：

1.给父元素设置边框
2.给父元素设置内边框
3.给父元素设置overflow:hidden;

margin合并

1.发生在紧邻的兄弟元素之间，上面兄弟元素的下外边距会与下面兄弟元素的上外边距合并，取两者之间大的作为实际间距
2.外边距合并只会发生在块级元素上，只会发生上下外边距

8.6 内容溢出

css属性	功能	属性值
overflow	设置溢出内容如何显示	visible:显示，默认值 hidden:隐藏 scroll:滚动条（不论内容是否溢出） auto:内容溢出自动添加滚动条
overflow-x	设置水平方向溢出内容如何显示	同上
overflow-y	设置垂直方向溢出内容如何显示	同上

8.7 隐藏元素

使用display隐藏元素：

display:none

使用visibility隐藏元素：

visibility:hidden

9 样式继承和默认样式

9.1 样式继承

1.设置给祖先元素的样式可以被后代元素继承
2.不是所有的样式都可以被继承，能被继承的样式包括：
  字体属性，文字颜色，文本属性（除vertical-align）

直接设置的样式>自带的默认样式>继承的样式

10 浮动

10.1 浮动定义

1.浮动最初用于实现文字环绕效果
2.浮动是主流页面布局排版方式，实现跨级元素水平排列

10.2 元素浮动后特点

1.浮动元素脱离文档流
2.浮动元素水平排列，一行放不下会自动换行
3.不论任何显示模式的元素，设置浮动后，就按照浮动元素特点显示
4.浮动元素默认宽度被内容撑开，可以设置宽高，完美设置4个方向的内外边距，不会外边距塌陷和合并，左右外边距auto不会居中

10.3 浮动元素产生的影响

1 元素浮动之后产生影响

对后面不浮动的兄弟元素的影响：

浮动元素脱离文档流
后面不浮动的元素，会显示在浮动元素下面，且文字会被挤出来来，环绕浮动的元素

对浮动元素的影响:

浮动的元素脱离文档流，无法撑开父元素的高度，造成父元素高度塌陷，进而影响到后面其他元素

2 解决浮动的影响（清楚浮动）

解决对后面不浮动的兄弟元素的影响：

给紧邻在浮动元素后面的元素（不浮动）设置clear：both

解决浮动元素对父元素的影响:

方案一：给父元素设置固定高度
方案二：父元素浮动
方案三：给父元素设置css属性overflow，值不为visible
方案四：在所有浮动元素后面添加一个跨级兄弟元素，设置clear：both
方案五：给父元素设置伪类选择器

11 行内元素或行内块元素在布局中的特点

11.1 文本属性作用于行内元素和行内块元素

1 让行内块元素或行内元素水平居中（在父元素中设置样式）

在父元素中设置：

text-align:center;

2 让行内元素或行内块元素垂直居中（在父元素中设置样式）

在父元素中设置：

line-height:高度

如果是行内块元素，还需自身设置：

vertical-align:middle;

11.2 行内元素或行内块元素之间的空白问题

1 元素之间的空白（左右）

产生原因：

代码中的换行或空格，标签和换行之间右换行

解决方案：

方案一：去掉代码中标签之间的换行或者空格，不推荐
方案二：父元素设置font-size：0；再单独设置行内块元素的字体大小

2 底部的空白（图片的幽灵空白）

产生的原因：

行内块或行内元素与文字的基线对齐，底部空白是基线与底线的距离

解决方案：

方案一：设置行内块元素vertical-align：bottom（只要值不是baseline都可以）
方案二:设置父元素font-size：0
方案三：如果是图片，可以设置图片为块级元素

3 文字内容个数不同的行内块元素水平排列对不齐

产生原因：

行内块元素之间基线对齐，有文字内容的行内块元素使用里面文字的基线，多行文字使用最后一行，没有文字使用元素的底部

解决方案：

设置行内块元素不以基线对齐，设置vertical-align值只要不是baseline

12 定位

12.1 相对定位

position:relative

1.不会脱离文档流
2.不会影响元素原来的显示模式
3.可以用left，right，top，bottom调整元素的位置
4.即使相对定位元素调整了位置，其他相邻元素仍然按照它原来的位置排列

left和right不要同时设置，top和botom不要同时设置

12.2 绝对定位

position:absolute

绝对定位元素定位参考点：
1.参考包含块进行定位
2.普通元素包含块是父元素
	绝对定位元素的包含块是第一个定位的祖先元素，如果祖先元素没有定位，包含块是整个页面

绝对定位元素特点：
1.脱离文档流
2.不论元素原来的显示模式是什么，设置绝对定位后，拥有绝对定位元素的特点
3.绝对定位元素默认宽高被内容撑开，可以完美设置宽高以及内外边距，没有外边距塌陷合并，左右外边距auto不会居中
4.可以使用left，right，top，bottom调整元素的位置

如果绝对定位元素宽度固定，同时设置left和right，只有left生效；如果绝对定位元素没有固定宽度，同时设置left和right都会生效

如果绝对定位元素高度固定，同时设置top和bottom，只有top生效；如果绝对定位元素没有固定高度，同时设置top和bottom都会生效

12.3 固定定位

position:fixed

固定定位的元素定位参考点：
1.参考包含块进行定位
2.固定定位元素包含块是视口

固定定位元素的特点（同绝对定位）：
1. 脱离文档流
2. 不论元素原来的显示模式是什么，设置固定定位之后，拥有固定定位元素的特点
3. 固定定位元素默认宽高被内容撑开，可以完美设置宽高以及内外边距，没有外边距塌陷合并，左右外边距auto不会居中
4. 可以使用 left、right、top、bottom 调整元素的位置

12.4 定位层级 z-index

1.三种定位元素显示层级是相同的，默认显示在不定位元素上面
2.多个定位的元素，默认后面的元素显示在上面
3.定位元素可以设置z-index调整显示层级，值越大显示层级越高，可以是负值；不定位的元素设置z-index无效

12.5 定位的特殊应用

1 定位元素（绝对和固定）的默认宽高计算

1.同时设置left和right，根据包含块宽度自动计算
2.同时设置top和bottom，根据包含块高度自动计算
3.left和right只设置一个，宽度默认被内容撑开
4.top和bottom只设置一个，高度默认被内容撑开

2 设置定位元素（绝对和固定）在包含块中水平垂直居中

方案一

position:fixed/absolute;
left:50%;
top:50%;
margin-left:-自身宽度/2；
margin-top:-自身高度/2;

方案二：

positoon:fixed/absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;