CSS2 技巧总结

2023年04月08日 22:52 · 阅读(581) ·

CSS 选择器

后代选择器

● 作用：选中指定元素中，符合要求的后代元素。
● 语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代）

选择器之间，用空格隔开，空格可以理解为：” xxx 中的”，其实就是后代的意思。
选择器 1234….n ，可以是我们之前学的任何一种选择器。

● 举例：

  1. /* 选中ul中的所有li */
  2. ul li {
  3.     color: red;
  4. }
  5. /* 选中ul中所有li中的a */
  6. ul li a {
  7.     color: orange;
  8. }
  9. /* 选中类名为subject元素中的所有li */
  10. .subject li {
  11.     color: blue;
  12. }
  13. /* 选中类名为subject元素中的所有类名为front-end的li */
  14. .subject li.front-end {
  15.     color: blue;
  16. }

子代选择器

● 作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

子代选择器又称：子元素选择器、子选择器。

● 语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

选择器之间，用 > 隔开， > 可以理解为：” xxx 的子代”，其实就是儿子的意思。
选择器 1234….n ，可以是我们之前学的任何一种选择器。

● 举例：

  1. /* div中的子代a元素 */
  2. div>a {
  3.     color: red;
  4. }
  5. /* 类名为 persons 的元素中的子代 a 元素 */
  6. .persons>a{
  7.     color: red;
  8. }

● 注意：
1.子代选择器，最终选择的是子代，不是父级。
2.子、孙子、重孙子、重重孙子 …… 统称后代！，子就是指儿子。

兄弟选择器

相邻兄弟选择器

● 作用：选中指定元素后，符合条件的相邻兄弟元素。

所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。

● 语法： 选择器1+选择器2 {}。

● 示例：

  1. /* 选中div后相邻的兄弟p元素 */
  2. div+p {
  3.     color:red;
  4. }

通用兄弟选择器

● 作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）

● 语法： 选择器1~选择器2 {}。

● 实例：

  1. /* 选中div后的所有的兄弟p元素 */
  2. div~p {
  3.     color:red;
  4. }

● 注意：两种兄弟选择器，选择的是下面的兄弟。

属性选择器

● 作用：选中属性值符合一定要求的元素。

● 语法：

属性 描述
[属性名] 选中具有某个属性的元素
[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素
[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素
[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

● 举例

  1. /* 选中具有title属性的元素 */
  2. div[title]{color:red;}
  4. /* 选中title属性值为atguigu的元素 */
  5. div[title="atguigu"]{color:red;}
  7. /* 选中title属性值以a开头的元素 */
  8. div[title^="a"]{color:red;}
  10. /* 选中title属性值以u结尾的元素 */
  11. div[title$="u"]{color:red;}
  13. /* 选中title属性值包含g的元素 */
  14. div[title*="g"]{color:red;}

伪类选择器

● 作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。
如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

● 常用的伪类选择器

动态伪类

伪类 描述
:link 超链接未被访问的状态。
:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态。
:focus 获取焦点的元素。

什么是激活？—— 按下鼠标不松开。
注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

表单类元素才能使用 :focus 伪类。
当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获
得焦点。

结构伪类

伪类 描述
:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第 n 个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中第 n 个 。
:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第 n个 。
:only-child 选择没有兄弟的元素（独生子女）。
:only-of-type 选择没有同类型兄弟的元素。
:root 根元素。
:empty 内容为空元素（空格也算内容）。

关于 n 的值：

n 描述
0 或 不写 什么都选不中 —— 几乎不用。
n 选中所有子元素 —— 几乎不用。
1~正无穷的整数 选中对应序号的子元素。
2n 或 even 选中序号为偶数的子元素。
2n+1 或 odd 选中序号为奇数的子元素。
-n+3 选中的是前 3 个。

否定伪类

伪类 描述
:not(选择器) 排除满足括号中条件的元素。

UI 伪类

伪类 描述
:checked 被选中的复选框或单选按钮。
:enable 可用的表单元素（没有 disabled 属性）。
:disabled 不可用的表单元素（有 disabled 属性）。

目标伪类（了解）

伪类 描述
:target 选中锚点指向的元素。

语言伪类（了解）

伪类 描述
:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

伪元素选择器

来源：P84-伪元素选择器

作用：选中元素中的一些特殊位置

伪元素 描述
::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

文本属性

文本对齐-水平

来源：P102-文本对齐-水平

● 属性名： text-align 。
● 作用：控制文本的水平对齐方式。
● 常用值：
1.left ：左对齐（默认值）
2.right ：右对齐
3.center ：居中对齐

举例：

  1. div {
  2.   text-align: center; 
  3. }

文本对齐-垂直

来源：P106-文本对齐-垂直

1.顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。

2.居中：对于单行文字，让 height = line-height 即可。

问题：多行文字垂直居中怎么办？—— 后面我们用定位去做。

3.底部：对于单行文字，目前一个临时的方式：

让 line-height = ( height × 2 ) - font-size - x 。
备注： x 是根据字体族，动态决定的一个值。

问题：垂直方向上的底部对齐，更好的解决办法是什么？—— 后面我们用定位去做。

vertical-align

来源：P107-vertical-align

● 属性名： vertical-align 。

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

● 常用值：
1.baseline （默认值）：使元素的基线与父元素的基线对齐。

2.top ：使元素的顶部与其所在行的顶部对齐。

3.middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。

4.bottom ：使元素的底部与其所在行的底部对齐。

特别注意： vertical-align 不能控制块元素。

盒子模型

盒子模型的组成

来源：P117-盒子模型的组成

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

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

图示如下：

  1. 盒子的大小 = content  +   左右 padding  +   左右 border 。

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

关于默认宽度

来源：P119-关于默认宽度

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

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

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

盒子内边距（padding）

来源：P120-盒子内边距（padding）

CSS 属性名 功能 属性值
padding-top 上内边距 长度
padding-right 右内边距 长度
padding-bottom 下内边距 长度
padding-left 左内边距 长度
padding 复合属性 长度，可以设置 1 ~ 4 个值

padding 复合属性的使用规则：

1.padding: 10px; 四个方向内边距都是 10px 。
2.padding: 10px 20px; 上下 10px ，左右 20px 。（上下、左右）
3.padding: 10px 20px 30px; 上 10px ，左右 20px ，下 30px 。（上、左右、下）
4.padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、 下、左）

注意点：
1.padding 的值不能为负数。
2.行内元素 的左右内边距是没问题的，上下内边距不能完美的设置。
3.块级元素、行内块元素，四个方向内边距都可以完美设置。

盒子外边距_margin

P122-盒子外边距_margin

CSS 属性名 功能
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
margin 复合属性，可以写 1~4 个值，规律同 padding （顺时针）

margin 注意事项

来源：P123-margin注意事项

1. 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着子元素）

2. 上 margin 、左 margin ：影响自己的位置；
    下 margin 、右 margin ：影响后面兄弟元素 的位置。

3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；
    但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。

4. margin 的值也可以是 auto ，
    如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。

5. margin 的值可以是负值。

margin 塌陷问题

来源：P124-margin塌陷问题

什么是 margin 塌陷？
第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

如何解决 margin 塌陷？
● 方案一： 给父元素设置不为 0 的 padding 。
● 方案二： 给父元素设置宽度不为 0 的 border 。
● 方案三：给父元素设置 css 样式 overflow:hidden。

margin 合并问题

来源：P125-margin合并问题

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

如何解决 margin 塌陷？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

处理内容溢出

来源：P126-处理内容溢出

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

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

隐藏元素的方式

来源：P127-隐藏元素的方式

方式 描述
visibility 属性 visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。
display 属性 设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

布局小技巧

来源：P130-布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理。

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

2. 如何让子元素，在父亲中水平居中：
(1)若子元素为块元素，给父元素加上：margin:0 auto; 。
(2)若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。

3. 如何让子元素，在父亲中垂直居中：
(1)若子元素为块元素，给子元素加上： margin-top ，值为：

  1. (父元素 `content` －子元素盒子 总高) / 2。

(2)若子元素为行内元素、行内块元素：
让父元素的 height = line-height ，每个子元素都加上： verticalalign:middle; 。

补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

空白问题

元素之间的空白问题

来源：P131-元素之间的空白问题

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

解决方案：

方案 描述
方案一 去掉换行和空格（不推荐）
方案二 给父元素设置 font-size:0 ，
再给需要显示文字的元素，单独设置字体大小（推荐）

行内块的幽灵空白问题

来源：P132-行内块的幽灵空白问题

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

解决方案：

方案 描述
方案一 给行行内块设置 vertical ，值不为 baseline 即可
设置为 middel 、 bottom 、 top 均可。
方案二 若父元素中只有一张图片，设置图片为 display:block
方案三 给父元素设置 font-size: 0 。
如果该行内块内部还有文本，则需单独设置 fontsize

浮动

元素浮动后的特点

来源：P134-元素浮动后的特点

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

案例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>02_元素浮动后的特点</title>
  6.     <style>
  7.         .outer {
  8.             width: 800px;
  9.             height: 400px;
  10.             padding: 10px;
  11.             background-color: gray;
  12.             text-align: center;
  13.         }
  14.         .box {
  15.             font-size: 20px;
  16.             padding: 10px;
  17.         }
  18.         .box1 {
  19.             background-color: skyblue;
  20.         }
  21.         .box2 {
  22.             background-color: orange;
  23.             float: left;
  24.             /* width: 200px; */
  25.             /* height: 200px; */
  26.             /* margin-left: 20px; */
  27.             /* margin-right: 20px; */
  28.             /* margin-top: 20px; */
  29.             /* margin-bottom: 20px; */
  30.         }
  31.         .box3 {
  32.             background-color: green;
  33.             float: left;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <div class="outer">
  39.         <div class="box box1">盒子1</div>
  40.         <div class="box box2">盒子2</div>
  41.         <div class="box box3">盒子3</div>
  42.     </div>
  43. </body>
  44. </html>

浮动效果 3D 示意图

浮动后的影响

来源：P136-浮动后的影响

影响 描述
对兄弟元素的影响 ●后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；
●对前面的兄弟无影响。
对父元素的影响 ●不能撑起父元素的高度，导致父元素高度塌陷；
●但父元素的宽度依然束缚浮动的元素。

解决浮动后产生的影响

来源：P137-解决浮动后产生的影响

方案 描述
方案一 给父元素指定高度
方案二 给父元素也设置浮动，带来其他影响
方案三 给父元素设置 overflow:hidden
方案四 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both
方案五 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同 ===> 推荐使用
.parent::after {
    content: "";
    display: block;
    clear:both;
}		 
  1. 布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

浮动布局小练习

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>06_浮动布局小练习</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .leftfix {
  12.             float: left;
  13.         }
  14.         .rightfix {
  15.             float: right;
  16.         }
  17.         .clearfix::after {
  18.             content: '';
  19.             display: block;
  20.             clear: both;
  21.         }
  22.         .container {
  23.             width: 960px;
  24.             margin: 0 auto;
  25.             text-align: center;
  26.         }
  27.         .logo {
  28.             width: 200px;
  29.         }
  30.         .banner1 {
  31.             width: 540px;
  32.             margin: 0 10px;
  33.         }
  34.         .banner2 {
  35.             width: 200px;
  36.         }
  37.         .logo,.banner1,.banner2 {
  38.             height: 80px;
  39.             line-height: 80px;
  40.             background-color: #ccc;
  41.         }
  42.         .menu {
  43.             height: 30px;
  44.             background-color: #ccc;
  45.             margin-top: 10px;
  46.             line-height: 30px;
  47.         }
  48.         .item1,.item2 {
  49.             width: 368px;
  50.             height: 198px;
  51.             line-height: 198px;
  52.             border: 1px solid black;
  53.             margin-right: 10px;
  54.         }
  55.         .content {
  56.             margin-top: 10px;
  57.         }
  58.         .item3,.item4,.item5,.item6 {
  59.             width: 178px;
  60.             height: 198px;
  61.             line-height: 198px;
  62.             border: 1px solid black;
  63.             margin-right: 10px;
  64.         }
  65.         .bottom {
  66.             margin-top: 10px;
  67.         }
  68.         .item7,.item8,.item9 {
  69.             width: 198px;
  70.             height: 128px;
  71.             line-height: 128px;
  72.             border: 1px solid black;
  73.         }
  74.         .item8 {
  75.             margin: 10px 0;
  76.         }
  77.         .footer {
  78.             height: 60px;
  79.             background-color: #ccc;
  80.             margin-top: 10px;
  81.             line-height: 60px;
  82.         }
  83.     </style>
  84. </head>
  85. <body>
  86.     <div class="container">
  87.         <!-- 头部 -->
  88.         <div class="page-header clearfix">
  89.             <div class="logo leftfix">logo</div>
  90.             <div class="banner1 leftfix">banner1</div>
  91.             <div class="banner2 leftfix">banner2</div>
  92.         </div>
  93.         <!-- 菜单 -->
  94.         <div class="menu">菜单</div>
  95.         <!-- 内容区 -->
  96.         <div class="content clearfix">
  97.             <!-- 左侧 -->
  98.             <div class="left leftfix">
  99.                 <!-- 上 -->
  100.                 <div class="top clearfix">
  101.                     <div class="item1 leftfix">栏目一</div>
  102.                     <div class="item2 leftfix">栏目二</div>
  103.                 </div>
  104.                 <!-- 下 -->
  105.                 <div class="bottom clearfix">
  106.                     <div class="item3 leftfix">栏目三</div>
  107.                     <div class="item4 leftfix">栏目四</div>
  108.                     <div class="item5 leftfix">栏目五</div>
  109.                     <div class="item6 leftfix">栏目六</div>
  110.                 </div>
  111.             </div>
  112.             <!-- 右侧 -->
  113.             <div class="right rightfix">
  114.                 <div class="item7">栏目七</div>
  115.                 <div class="item8">栏目八</div>
  116.                 <div class="item9">栏目九</div>
  117.             </div>
  118.         </div>
  119.         <!-- 页脚 -->
  120.         <div class="footer">页脚</div>
  121.     </div>
  122. </body>
  123. </html>

定位

一.相对定位

来源：P139-相对定位

1.如何设置相对定位？

● 给元素设置 position:relative 即可实现相对定位。

● 可以使用 left 、right 、top 、bottom 四个属性调整位置。

2.相对定位的参考点在哪里？

● 相对自己原来的位置

3.相对定位的特点：

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

(2)定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
● 定位的元素会盖在普通元素之上。
● 都发生定位的两个元素，后写的元素会盖在先写的元素之上。

(3)left 不能和 right 一起设置，如果一起设置，left 生效，right 失效。

top 和 bottom 不能一起设置，如果一起设置，top 生效，bottom 失效。

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

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

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

二.绝对定位

来源：P140-绝对定位

1.如何设置绝对定位？
● 给元素设置 position: absolute 即可实现绝对定位。

● 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

2.绝对定位的参考点在哪里？
● 参考它的包含块。

什么是包含块？

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

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

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

案例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>02_绝对定位</title>
  6.     <style>
  7.         .outer {
  8.             width: 500px;
  9.             background-color: skyblue;
  10.             border: 1px solid black;
  11.             padding: 20px;
  12.             position: relative;
  13.         }
  14.         .box {
  15.             width: 200px;
  16.             height: 200px;
  17.             font-size: 20px;
  18.         }
  19.         .box1 {
  20.             background-color: #888;
  21.         }
  22.         .box2 {
  23.             background-color: orange;
  24.             position: absolute;
  25.             top: 220px;
  26.             left: 20px;
  27.         }
  28.         .box3 {
  29.             background-color: green;
  30.         }
  31.         .outer:hover .box2 {
  32.             left:220px;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="outer">
  38.         <div class="box box1">1</div>
  39.         <div class="box box2">2</div>
  40.         <div class="box box3">3</div>
  41.     </div>
  42. </body>
  43. </html>

绝对定位 3D 示意图

三.固定定位

来源：P141-固定定位

1.如何设置为固定定位？
● 给元素设置 position: fixed 即可实现固定定位。

● 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

2.固定定位的参考点在哪里？

● 参考它的视口

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

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

四.粘性定位

1.如何设置为粘性定位？

● 给元素设置 position:sticky 即可实现粘性定位。

● 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。

2.粘性定位的参考点在哪里？

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

3.粘性定位元素的特点

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

粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

4.粘性定位元素失效条件

● 父容器超出粘性定位元素所在的范围之后失效。

案例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>04_粘性定位</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body {
  12.             height: 2000px;
  13.         }
  14.         .page-header {
  15.             height: 100px;
  16.             text-align: center;
  17.             line-height: 100px;
  18.             background-color: orange;
  19.             font-size: 20px;
  20.         }
  21.         /* .content { */
  22.             /* height: 200px; */
  23.             /* overflow: auto; */
  24.             /* overflow: scroll; */
  25.         /* } */
  26.         .item {
  27.             background-color: gray;
  28.         }
  29.         .first {
  30.             background-color: skyblue;
  31.             font-size: 40px;
  32.             position: sticky;
  33.             top: 0px;
  34.             /* float: right; */
  35.             /* margin-right: 100px; */
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <!-- 头部 -->
  41.     <div class="page-header">头部</div>
  42.     <!-- 内容区 -->
  43.     <div class="content">
  44.         <!-- 每一项 -->
  45.         <div class="item">
  46.             <div class="first">A</div>
  47.             <h2>A1</h2>
  48.             <h2>A2</h2>
  49.             <h2>A3</h2>
  50.             <h2>A4</h2>
  51.             <h2>A5</h2>
  52.             <h2>A6</h2>
  53.             <h2>A7</h2>
  54.             <h2>A8</h2>
  55.         </div>
  56.         <div class="item">
  57.             <div class="first">B</div>
  58.             <h2>B1</h2>
  59.             <h2>B2</h2>
  60.             <h2>B3</h2>
  61.             <h2>B4</h2>
  62.             <h2>B5</h2>
  63.             <h2>B6</h2>
  64.             <h2>B7</h2>
  65.             <h2>B8</h2>
  66.         </div>
  67.         <div class="item">
  68.             <div class="first">C</div>
  69.             <h2>C1</h2>
  70.             <h2>C2</h2>
  71.             <h2>C3</h2>
  72.             <h2>C4</h2>
  73.             <h2>C5</h2>
  74.             <h2>C6</h2>
  75.             <h2>C7</h2>
  76.             <h2>C8</h2>
  77.         </div>
  78.     </div>
  79. </body>
  80. </html>

五. 定位层级

来源：P143-定位层级

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

六.定位的特殊应用

来源：P144-定位的特殊应用

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

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

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

案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test2</title>
  6.     <style>
  7.         .outer {
  8.             height: 400px;
  9.             background-color: #888;
  10.             position: relative;
  11.         }
  12.         .inner {
  13.             background-color: orange;
  14.             font-style: 20px;
  15.             padding: 20px;
  16.             border: 10px solid black;
  17.             position: absolute;
  18.             left: 0;
  19.             right: 0;
  20.             top: 0;
  21.             bottom: 0;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="outer">
  27.         <div class="inner">hello</div>
  28.     </div>
  29. </body>
  30. </html>

让定位元素在包含块中居中

● 方案一(推荐)：

  1. left:0;
  2. right:0;
  3. top:0;
  4. bottom:0;
  5. margin:auto;

● 方案二：

  1. left: 50%;
  2. top: 50%;
  3. margin-left: 负的宽度一半;
  4. margin-top: 负的高度一半;

注意：该定位的元素必须设置宽高！！！

案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test2</title>
  6.     <style>
  7.         .outer {
  8.             height: 400px;
  9.             width: 800px;
  10.             background-color: #888;
  11.             position: relative;
  12.         }
  13.         .inner {
  14.             width: 400px;
  15.             height: 100px;
  16.             background-color: orange;
  17.             font-size: 20px;
  18.             position: absolute;
  20.             /* 方案一： */
  21.             /* left: 0;
  22.             right: 0;
  23.             top: 0;
  24.             bottom: 0;
  25.             margin: auto; */
  27.             /* 方案二： */
  28.             left: 50%;
  29.             top: 50%;
  30.             margin-left: -200px;
  31.             margin-top: -50px;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="outer">
  37.         <div class="inner">hello</div>
  38.     </div>
  39. </body>
  40. </html>

布局

版心

来源：P145-布局-版心

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

常用布局名词

来源：P146-常用布局名词

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

重置默认样式

来源：P147-重置默认样式

很多元素都有默认样式，比如：
1.p 元素有默认的上下 margin 。
2.h1~h6 标题也有上下 margin ，且字体加粗。
3.body 元素有默认的 8px 外边距。
4.超链接有默认的文字颜色和下划线。
5.ul 元素有默认的左 pading 。
6……..

在早期，元素默认样式，能够让我们快速的绘制网页，但如今网页的设计越来越复杂，内容越来越
多，而且很精细，这些默认样式会给我们绘制页面带来麻烦；而且这些默认样式，在不同的浏览器
上呈现出来的效果也不一样，所以我们需要重置这些默认样式。

方案一：使用全局选择器

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     ......
  5. }

此种方法，在简单案例中可以用一下，但实际开发中不会使用，
因为 * 选择的是所有元素，而并不是所有的元素都有默认样式；
而且我们重置时，有时候是需要做特定处理的，
比如：想让 a 元素的文字是灰色，其他元素文字是蓝色。

方案二：reset.css

reset.css 选择到具有默认样式的元素，清空其默认的样式。

经过 reset 后的网页，好似“一张白纸”，开发人员可根据设计稿，精细的去添加具体的样式。

方案三：Normalize.css

Normalize.css 是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。

● 官网地址：http://necolas.github.io/normalize.css/

相对于 reset.css ， Normalize.css 有如下优点：
1.保护了有价值的默认样式，而不是完全去掉它们。
2.为大部分 HTML 元素提供一般化的样式。
3.新增对 HTML5 元素的设置。
4.对并集选择器的使用比较谨慎，有效避免调试工具杂乱。

备注： Normalize.css 的重置，和 reset.css 相比，更加的温和，开发时可根据实际情况进行选择