盒子模型

页面布局要学习三大核心，盒子模型、浮动和定位，通过盒子模型能很好的布局页面。 页面布局的核心本质：利用CSS摆盒子。

所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、内外边距、内边距和实际内容

  1. border:  ;            /* 边框 */
  2. content:  ;            /* 内容 */
  3. padding:  ;            /* 内边距 */
  4. margin:  ;            /* 外边距 */

CSS学习笔记（详细）- 布局与定位 - 图1

border边框

边框有三部分组成：边框宽度（粗细）边框样式 边框颜色 可分开写，也可以复合写（border：粗细、样式、颜色 ）。 可以单独设置某条边：border - 方位

边框会影响盒子的实际大小。
如果盒子大小需要包含边框：需要减去 width/height(注意双倍)

属性 作用
border-width 定义边框粗细，单位：px
border-color 边框颜色
border-style 边框的样式
  • border-style ： （solid、dotted和dashed比较常用）
    CSS学习笔记（详细）- 布局与定位 - 图2
  • border-collapse: collapse；合并相邻边框
    CSS学习笔记（详细）- 布局与定位 - 图3

padding内边距

padding属性用于设置内边距，即边框与内容之间的距离。（上下左右）

  • 复合简写：
    1个值：上下左右
    2个值：上下 / 左右
    3个值：上 / 左右 / 下
    3个值：上 / 右 / 下 / 左 （顺时针）

padding会影响盒子的实际大小。
如果盒子大小需要保持一致：让 width/height 减去 多出来的内边距大小(注意双倍)

  • padding盒子好处：当有多个不同的盒子，盒子字数不同。不用给每个盒子宽度，直接给 pidding 值
  • 盒子没有指定 width/height 属性，则padding不会撑开盒子大小。

margin外边距

margin属性用于设置外边距，即盒子与盒子之间的距离。（上下左右）

  • 复合简写：(同padding)
    1个值：上下左右
    2个值：上下 / 左右
    3个值：上 / 左右 / 下
    3个值：上 / 右 / 下 / 左 （顺时针）
  • 水平居中 (margin: 0 auto)
  1. 盒子必须指定高度
  2. 盒子左右的外边距都设置位auto
    注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中
    给其父元素添加 text-align: center 即可。
  • 嵌套块元素垂直外边距塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

  • 解决方案
  1. 可以位父元素定义上边框
  2. 可以位父元素定义上内边距
  3. 可以位父元素添加 overflow: hidden
  4. 还有其它方法，比如浮动、固定、绝对定位的盒子。

清楚内外边距

网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。

  • 行内元素尽量值设置左右的内外边距
  • 注意:
    行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。
    但是转换为块级和行内块元素就可以了。
  1. * {
  2.     padding: 0; /*清楚内边距*/
  3.     margin: 0; /*清楚外边距*/
  4. }

网页布局的方式

网页布局的本质——用 CSS 来摆放盒子。

  • CSS 提供了三种传统布局方式:：
  • 普通流（标准流）
  • 浮动
  • 定位
    纵向标准流，横向找浮动
    注意：实际开发中，一个页面基本都包含了这三种布局方式

标准流（普通流/文档流）

标准流是最基本的布局方式。

  • 所谓的标准流: 就是标签按的默认方式排列.。
  • 块级元素会独占一行，从上向下顺序排列
    常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
    常用元素：span、a、i、em 等

浮动

浮动可以改变元素标签的默认排列方式。

  • 开发一般先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置。
  • 使多个块级元素一行显示

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

属性 描述
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动

浮动特征性（重点）

浮动了的盒子不会为其所保留原先位置。

  • 1. 浮动元素会脱离标准流（脱标）
  • 2.一行内显示并元素顶部对齐（浮动的元素是紧贴在一起，当页面装不下会自动换行）
  • 3.具有行内块特性（所有元素都可以浮动，之后都会具有行内块元素的相识属性）
    注意：浮动只会影响后面的标准流

清除浮动

为什么要清除浮动？

父级盒子有时候不方便给高度，子盒子浮动不占位置，父级盒子如果高度为 0 ，会影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
如果父盒子有高度，则不用清除浮动。

  • 语法：选择器{ clear: 属性值; } | 属性值 | 描述 | | :—- | :—- | | left | 不允许左侧有浮动元素（去点左浮动的影响） | | right | 不允许右侧有浮动元素 （去点右浮动的影响） | | both | 同时清除左右两侧的浮动的影响 |
  • 一般开发中只用到：both。
  • 清楚浮动的策略：闭合浮动

清除浮动方法

  1. 额外标签法也称为隔墙法，是 W3C 推荐的做法。
  2. 父级添加 overflow 属性
  3. 父级添加after伪元素
  4. 父级添加双伪元素（建议使用） | 清除浮动方法 | 优点 | 缺点 | | :—- | —- | —- | | 额外标签法（隔墙法） | 比较简单，书写方便 | 添加无意义标签。 | | 父级：overflow: hidden; | 比较简单，书写方便 | 添加无意义标签。 | | 父级：after伪元素 | 结构语义正确 | 兼容性问题 | | 父级：双伪元素 | 结构语义正确 | 兼容性问题 |

注意： 要求这个新的空标签必须是块级元素。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.     /*************父级添加after伪元素*************
  9.                  优点：没有增加标签，结构更简单 
  10.                  缺点：照顾低版本浏览器
  11.     ********************************************/
  13.         /*.clearfix:after {
  14.             content: "";
  15.             display: block;
  16.             height: 0;
  17.             clear: both;
  18.             visibility: hidden;
  19.         }
  21.         .clearfix {
  23.             *zoom: 1;  IE6、7 专有 
  24.         }*/
  26.       /*************父级添加双伪元素*************
  27.                 优点：代码更简洁 
  28.                 缺点：照顾低版本浏览器 
  29.     ********************************************/
  30.           /*.clearfix:before,
  31.         .clearfix:after {
  32.             content: "";
  33.             display: table;
  34.         }
  36.         .clearfix:after {
  37.             clear: both;
  38.         }
  40.         .clearfix {
  41.             *zoom: 1;
  42.         }*/
  43.     /*******************************************/
  45.         .box {
  46.             /*父级添加 overflow 属性：
  47.                 给父级元素添加overflow属性，一般值都用hidden。用 auto 或 scroll 也是可以的 
  48.              优点：代码简洁 
  49.              缺点：无法显示溢出的部分 
  50.             */
  52.             /*overflow: hidden;*/
  53.             background-color: pink;
  54.             width: 900px;
  55.             margin: 0 auto;
  56.         }
  57.         .footer{
  58.             background-color: cyan;
  59.             width: 900px;
  60.             height: 80px;
  61.             margin: 0 auto;
  62.         }
  63.         .one {
  64.             float: left;
  65.             height: 100px;
  66.             width: 80px;
  67.             background-color: darkslategrey;
  68.         }
  69.         .two {
  70.             float: left;
  71.             height: 50px;
  72.             width: 80px;
  73.             background-color: dimgray;
  74.         }
  76.         .four{
  77.             clear: both;
  78.         }
  79.     </style>
  80. </head>
  81. <body>
  82.     <div class="box clearfix">        <!-- 引用clearfix类（伪元素） -->
  83.         <div class="one">one</div> 
  84.         <div class="two">two</div>
  85.          <!-- 额外标签法：必须是块级元素，添加新标签，调用clear:both属性 
  86.             优点： 通俗易懂，书写方便 
  87.             缺点： 添加许多无意义的标签，结构化较差 
  88.             -->
  89.         <!--<div style="clear: both;"></div> -->
  90.     </div>
  91.     <div class="footer"></div>
  92. </body>
  93. </html>

定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。 定位 = 定位模式 + 边偏移 让盒子自由的在一个盒子内移动位置或者固定屏幕中某个位置，并且压住其他盒子。

  • 定位模式
  • 子级使用绝对定位，父级需要相对定位。（子绝父相）非常重要
  • 定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：
    |值|语义 |
    |:—|—|
    | static | 静态定位 |
    | relative| 相对定位 |
    | absolute| 绝对定位 |
    | fixed| 固定定位 |
  • 边偏移：（只有在定位的时候才能使用这四个属性）
  • 边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 属性。 | 值 | 描述 | | :—- | —- | | top | 顶端偏移量，定义元素相对与父元素上边线的距离 | | bottom | 底部偏移量，定义元素相对与父元素下边线的距离 | | left | 左侧偏移量，定义元素相对与父元素左边线的距离 | | right | 右侧偏移量，定义元素相对与父元素右边线的距离 |

静态定位

静态定位是元素的默认定位方式，无定位的意思。

  • 了解即可，无需认真学习
  • 语法：选择器 { position: static; }
  • 静态定位按照标准流特性摆放位置，它没有边偏移。布局时很少使用

相对定位 relative（非常重要）

相对定位是元素在移动位置的时候，根据它原来的位置来定位。

  • 语法：选择器 { position: relative; }

相对定位的特点：（务必记住）

  • 它是相对于自己原来的位置来移动的。
  • 例：距离顶部100px 选择器 { position: relative; top: 100px; }下左右也是同样设置
  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（保留位置，标准流）
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset='utf-8'>
  5.     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  6.     <title>相对定位</title>
  7.     <style>
  8.         div{
  9.             width: 80px;
  10.             height: 80px;
  11.             background-color: pink;
  12.         }
  13.         .re{
  14.             position: relative;
  15.             top:30px;
  16.             left: 45px;
  17.             background-color: green; 
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. </body>
  23.     <div class="re"></div>
  24.     <div></div>
  25. </html>

绝对定位 absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来定位。

  • 语法：选择器 { position: absolute; }

绝对定位的特点：（务必记住

  1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
  2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
  3. 绝对定位不再占有原先的位置。（脱标）

固定定位 fixed （重要）

固定定位是元素固定于浏览器可视区的位置。 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

  • 语法：选择器 { position: fixed; }

固定定位的特点：（务必记住）

  • 以浏览器的可视窗口为参照点移动元素。
  • 跟父元素没有任何关系
  • 不随滚动条滚动，一直以显示页面的位置定位。
  • 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

粘性定位 sticky（了解）

粘性定位可以被认为是相对定位和固定定位的混合。

  • 语法： 选择器 { position: sticky; top: 10px; }