CSS2

无题

1. 由于字体设计的原因，并不一定与font-size的值一致，可能大，可能小。
2. 通常情况下，文字相对于字体设计框，并不是垂直居中的，通常靠下一点。

行高

属性名：line-height

可选值：

1. normal：由浏览器根据文字大小决定的一个默认值。
2. 像素（px）.
3. 数字：参考自身font-sized的倍数。
4. 百分比：参考自身font-size的百分比。

备注:由于字体设计原因，文字在一行中，并不是绝对垂直居中，若以行中都是文字，不会太影响观感。

举例：

div{
    line-height:60px;
    lint-height:1.5;
    line-height:150%;
}

行高注意事项：

1. line-height过小会怎么样？文字产生重叠。
2. line-height是可以继承的，且为了更好的呈现文字，最好写数值。
3. line-height和height是什么关系？设置了height，那么高度就是height的值。不设置height的时候，会根据line-height计算高度。

应用场景：

1. 对于多行文字：控制行与行之间的距离。
2. 对于单行文字：height等于line-height，可以实现文字居中。

文本对齐-垂直

1. 顶语：无需任何属性，在垂直方向上，默认就是顶部对齐。
2. 居中：对于单行文字，让height=line-height即可；
3. 底部：对于单行文字，目前一个临时解决方式

• 让line-height=（height*2）-font-size-x.
• 备注：x是根据字体族，动态决定的一个值。

vertical-align

属性名：vertical-align

作用：用于同一行元素之间，或表格单元格内文字得分垂直对齐方式。

常用值：

1. baseline：使元素的基线与父元素的基线对齐。
2. top:使元素的顶部与其所在行的顶部对齐。
3. middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐。
4. bottom：使元素的底部与其所在行的底部对齐。

vertical-align不能控制块元素。

CSS列表属性

作用在ul、ol、li元素上。

CSS属性名	功能	属性值
list-style-type	设置列表特殊符号	常用值如下： none:不显示前面的标识 square；实心方块。 disc:圆形 decimal：数字。 lower-roman:小写罗马数字 upper-roman:大写罗马字。 lower-alpha:小写数字。 upper-alpha:大写字母
list-style-position	设置列表符号的位置	inside:在li的里面。 outside:zai li外面。
list-style-image	自定义列表符号	url
list-style	复合属性	没有数量，顺序的要求

表格的独有属性（只有table标签才能使用）

CSS属性名	功能	属性值
table-layout	设置列宽度	auto：自动，列宽根据内容计算 fixed:固定列宽，平均分。
border-collapse	合并单元格边框	collapse：合并 seprate:不合并
empty-cells	隐藏没有内容的单元格	show:显示，默认。 hide：隐藏。 生效前提：单元格不能合并。
caption	设置表格标题位置	top:上面（默认值） bottom:在表格下面

以上五个属性，只有表格才能使用，即<table>标签。

CSS背景属性

CSS属性名	功能	属性值
background-color	设置背景颜色	符合CSS中颜色规范的值 默认背景颜色是transparent。
background-image	设置背景图片	url
background-repeat	设置背景重复方式	repeat：重复，铺满整个元素，默认值。 repeat-x:只在水平方向上重复。 repeat-y:只在垂直方向上重复。 no-repeat:不重复。

background-position：设置背景图位置：通过关键字设置位置：写两个值，用空格隔开，水平:left、center、right垂直:top、center、bottom如果只写一个值，另一个方向的值取 center

background：符合属性：没有数量和顺序的要求。

CSS鼠标属性

|CSS属性|功能|属性值|
|cursor|设置鼠标光标的样式|pointer：小手。
move：移动图标。
text：文字选择器。
crosshair：十字架。
wait:等待。
help：帮助。
|

CSS盒子模型

CSS长度单位

1. px:像素。
2. em：相对元素font-size的倍数。
3. rem:相对根字体大小，html标签就是根。
4. %：相对父元素计算。

设置长度必须要加单位。

总结各元素的显示模式

• 块元素

  1. 主体结构标签：<html>,<body>。
  2. 排版列表：<h1><hr><p><pre><div>
  3. 列表标签：<ul><ol><li><dl><dt><dd>
  4. 表格相关标签：<table><tbody><thead><tfoot><tr><caption>
  5. <form><option>

• 行内元素

  1. 文本标签：<br><em><strong><sup><sub><del><ins>
  2. <a><label>

• 行内块元素

  1. 图片：<img>
  2. 单元格:<td><th>
  3. 表单控件:<input><textarea><select><buttton>
  4. 框架标签:<iframe>

修改元素显示模式

通过CSS中的display属性可以修改元素的默认模式，常用值如下：

值	描述
none	元素会被隐藏
block	元素将作为块级元素显示
inline	元素将作为内联元素显示
inline-block	元素将作为行内块元素显示

盒子模型的组成

CSS会把所有的HTML元素都看成盒子，所有的样式也都是基于这个盒子。

1. margin：盒子与外界的距离。
2. border：盒子的边框。
3. padding：紧贴内容的补白区域。
4. content：元素中的文本或后代元素都是它的内容。

盒子的大小：content+左右padding+左右border

注意：外边距不会影响盒子的大小，但会影响盒子的位置。

盒子的内容区

CSS属性名	功能	属性值
width	设置内容区的宽度	长度
max-width	设置内容区的最大宽度	长度
min-width	设置内容区的最小宽度	长度
height	设置内容区的长度	长度
max-height	设置内容区的最大长度	长度
min-height	设置内容区的最小长度	长度

关于默认宽度

所谓的默认宽度，就是不设置width属性时，元素所呈现的宽度。

总宽度=父的content-自身左右的margin。

内容区的宽度=父的content-自身左右的margin-自身左右的border-自身左右的padding。

盒子的内边距

|CSS属性名|功能|属性值|
|padding-top|上内边距|长度|
|padding-right|右内边距|长度|
|padding-bottom|下内边距|长度|
|padding-left|左内边距|长度|
|padding|符合属性|长度，可以设四个值|

复合属性写两个值：上下的宽度，左右的宽度

复合属性写三个值：上，左右，下

符合属性写四个值：上，右，下，左。

注意：padding的值不能为负数。

盒子的边框

CSS	功能	属性值
border-style	边框线的风格，复合四个边框的风格	none:默认值。solid:实线。dashed：虚线。dotted：点线。double:双实线。
border-width	边框线的宽度，复合了四个方向的边框的宽度	长度，默认3px
border-color	边框颜色，复合四个方向的边框的颜色	值没有顺序和数量要求
border	复合属性	值没有顺序和数量的要求

盒子外边距

属性名	功能	属性值
margin-left	做外边距	CSS中的长度值
margin-right	右外边距	CSS中的长度值
margin-top	上外边距	CSS中的长度值
margin-bottom	下外边距	CSS中的长度值
margin	复合属性，可以写1~4个值，规律同padding	CSS中的长度值

注意事项：

1. 子元素的margin，参考父元素的content计算的。
2. 上margin，左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
3. 块级元素，行内块元素，均可以完美地设置四个方向margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
4. margin的值也可以是auto，如果给一个块级元素设置左右margin都为auto。块级元素就会在父元素中水平居中。
5. margin的值可以是负值。

塌陷问题

什么是margin塌陷？

第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。

如何解决margin塌陷？

• 方案一：给父元素设置不为0的padding。
• 方案二：给父元素设置宽度不为0的border。
• 方案三：给父元素设置CSS样式overflow：hidden。

margin合并问题

什么是margin合并？

上面兄弟元素的下外边距和下面兄弟的上外边距会合并，取一个最大的值，而不是相加

如何解决margin塌陷？

无需解决，布局时上下的兄弟元素，只给设置上下外边距就可以了。

处理内容溢出

CSS属性名	功能	属性值
overflow	溢出内容处理方式	visible：显示，默认值。hidden：隐藏。scroll：显示滚动条，不论内容是否溢出。auto：自动显示滚动条，内容不溢出不显示。
overflow-x	水平方向溢出内容的处理方式	同overflow
overflow-y	垂直方向溢出内容给的处理方式	同overflow

注意：

1. overflow-x，overflow-y不能一个是hidden，一个是visible，是实验性属性，不建议使用。
2. overflow常用值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

隐藏元素的方式

方式一：

visibility属性默认值是show，如果设置为hidden，元素会隐藏。元素看不见了，还占有原来的位置。

方式二：

设置display：none，就可以让元素隐藏。彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

样式地继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级地继承

会继承的CSS属性

字体属性、文本属性、字体颜色。

不会继承的CSS属性

边框、背景、内边距、外边距、宽高、溢出方式等

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子没关系的。

默认样式

元素一般都是些默认样式，例如：

1. <a>元素：下划线，字体颜色，鼠标小手。
2. <h1>~<h6>元素：文字加粗，文字大小，上下外边距。
3. <p>元素：上下外边距。
4. <ul>、<ol>左内边距
5. bod元素：8px外边距

优先级：元素的默认样式>继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择器到该元素。

布局小技巧

行内元素，行内块元素，可以被父元素当作文本处理。

• 即：可以像处理文本对齐一样，去处理：行内，行内块在父元素中的对齐。
• 例如：text-align、line-height、text-indent等。

如何让子元素，在父元素中水平居中：

• 若元素为块元素，给父元素加上：margin：0，auto。
• 若子元素为行内元素，行内块元素，给父元素加上：text-align：center.

如何让子元素，在父元素中垂直居中：

• 若子元素为块元素，给子元素加上：margin-top，值为：（父元素content-子元素盒子的总高）/2.
• 若子元素为行内元素、行内块元素：让父元素的height=line-height，每个子元素都加上：vertical-align：middle。补充：若想要绝对垂直，父元素font-size设置为0。

元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

1. 方案一：去掉换行和空格。
2. 方案二：给父元素设置font-size，再给需要显示的文字的元素，单独设置字体大小。

幽灵空白问题

产生原因：

行内块元素与文本基线对齐，而文本的基线与文本最底端之间有一定的距离的。

解决方案：

1. 方案一：给行内块元素设置vertical，值不为baseline即可，设置为middle，bottom，top均可。
2. 方案二：若父元素中只有一张图片，设置图片为display：block。
3. 方案三：给父元素设置为font-size：0；如果该行内块内部还有文本，则需单独设置font-size。

浮动

浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。

元素浮动后的特点

1. 脱离文档流
2. 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开，而且可以设置宽高。
3. 不会独占一行，可以与其他元素共用一行。
4. 不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding。
5. 不会像行内块一样被当做文本处理。

浮动后会有哪些影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。

对父元素的影响：不能撑起父元素的高度，导致父元素的高度塌陷；但父元素的宽度依然束缚浮动元的素。

解决浮动产生的影响

解决方案:

1. 方案一：给父元素指定高度。
2. 方案二：给父元素设置overflow：hidden。
3. 方案三：给父元素也设置浮动，带来其他影响。
4. 方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear：both。
5. 方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同

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

布局中的一个原则：设置浮动的时候，兄弟元素要么全部浮动，要么全都不浮动。

相对定位

如何设置相对定位

• 给元素设置position：relative即可实现相对定位。
• 可以使用left、right、top、bottom四个属性调整位置。

相对位置的参考点在哪里

• 相对自己原来的位置

相对定位的特点

1. 不会脱离文档流，元素位置发生变化，只是视觉效果上的变化，不会对其他元素产生任何影响。

2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

   默认规则：

   • 定位的元素会盖在普通元素之上。
   • 都发生定位的两个元素，后写的元素会盖在先写的元素之上。

3. left不能和right一起设置，top与bottom不能一起设置。

4. 相对定位的元素，也能继续浮动，但不推荐这样做。

5. 相对行为的元素 ，也能通过margin调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位一起使用。

绝对定位

如何设置绝对定位

• 给元素设置position：absolute即可实现绝对定位。
• 可以使用left、right、top、bottom四个属性调整位置

绝对定位的参考点在哪里

参考它的包含块

什么是包含块？

1. 对于没有脱离文档流的元素，包含块就是父元素；
2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果祖先元素都没有定位，那么包含块就是整个页面）。

绝对定位元素的特点“

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left不能和right一起设置，top和bottom不能一起设置。
3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4. 绝对定位的元素，也能通过margin调整位置，但不推荐这样做。
5. 无论什么元素，设置为绝对定位之后，都变成了定位元素。

何为定位元素？————默认宽，高都被内容所撑开，且能自由设置宽高。

固定定位

如何设置为固定定位

• 给元素设置position：fixed即可实现固定定位。
• 可以使用left、right、top、bottom四个属性调整位置

固定定位的参考点在哪里

• 参考它的视口

什么是视口？对于PC端浏览器来说，视口就是我们看网页的那扇”窗口“。

固定定位元素的特点

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left不能和right一起设置，top和bottom不能一起设置。
3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定为主。
4. 固定定位的元素，也能通过margin调整设置，但不推荐这样做。
5. 无论什么元素，设置为固定定位之后，都变成了固定元素。

粘性定位

如何设置粘性定位

• 给元素设置position：sticky即可实现粘性定位。
• 可以使用left和right、top、bottom四个属性调整位置，不过最常用的是top值。

粘性定位的参考点在哪里

离他最近的一个拥有”滚动机制“的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

粘性定位元素的特点

• 不会脱离文档流，它是专门用于窗口滚动时的新的定位方式。
• 最常用的是top值。
• 粘性定位和浮动不能同时设置，如果同时设置，浮动失效，以固定为主。
• 粘性定位的元素，也能通过margin调整设置，但不推荐这样做。

定位层级

1. 定位元素的显示层级比普通元素高，无论什么元素，显示层级都是一样的。
2. 如果位置发生变化，默认情况是：后面的元素，会显示在前面元素之上。
3. 可以通过CSS属性z-index调整元素的显示层级。
4. z-index的属性值是数字，没有单位，值越大显示层级越高。
5. 只有定位的元素设置z-index才有效。
6. 如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。

定位的特殊应用

注意：

1. 发生固定定位、绝对定位、元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
2. 发生相对定位后，元素依然是之前的显示模式。
3. 以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素。

让定位元素的宽度充满包含块

1. 块宽想与包含块一致，可以给定位元素同时设置left和right为0.
2. 高度与包含块一致，top和bottom设置为0.

版心

• 在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
• 版心的宽度一般是960~1200px像素之间。
• 版心可以是一个，也可以是多个。

常用布局名词

位置
顶部导航条	tobar
页头	header、page-header
导航	nav、navigator、navbar
搜索框	search、search-box
横幅，广告，宣传图	banner
主要内容	content、main
侧边栏	aside、sidebar
页脚	footer、page-footer