CSS&CSS3&布局相关

CSS&CSS3&布局相关

CSS盒模型（box-sizing)

1. 什么是盒子模型

   当对一个文档进行布局(laying out)时候，浏览器引擎会根据CSS-Box模型将所有元素描述为一个盒子，CSS会决定这些盒子的大小，位置，属性等

2. 盒子模型分类

   IE盒模型 和 标准盒模型

   IE盒模型：width / height = content + border + padding

   标准盒模型：width / height = content

   

   

3. 普通文档流块元素的CSS外边距合并问题

   只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框绝对定位之间的外边距不会合并

4. 改变盒子模型

   CSS3支持改变盒子模型

   • box-sizing：用来改变计算盒子高度/宽度的默认盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器行为

     // 关键字 值
     box-sizing: content-box;
     box-sizing: border-box;
     
     // 全局 值
     box-sizing: inherit;
     box-sizing: initial;
     box-sizing: unset;
     

   • content-box(默认值)：标准盒模型

     宽度 = 内容的宽度

     高度 = 内容的高度

     不会包含border, padding

   • border-box：怪异模式

     width = border + padding + 内容的width

     height = border + padding + 内容的height

   • padding-box：已经弃用

   • Inherit：规定从父元素继承box-sizing属性的值

5. 为什么要使用border-box

   • content-box 的缺点：

     当你想让两个子容器float: left，宽度各50%，然后再给一点padding，最后让子容器并排充满父容器。然后结果不是这样，因为子容器的盒子宽度已经超出了父盒子的一半，导致了折行，于是width就不能给50%

   • border-box 的优势：

     border-box的诞生，主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内，这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆

   • 因此border-box使用场景如下：

     子元素有padding和border，或者至少有其一，并且需要给子元素设定100%宽度(或者50%宽度)，这个时候需要border-box。设为border-box之后，padding和border的厚度就可以随意调，并且不会溢出父元素。如果是content-box，宽度必然会溢出。

position属性值

1. static定位

   HTML元素的默认值，即没有定位，遵循正常的文档流对象，静态定位的元素不会收到top，bottom，left，right的影响

2. fixed定位

   元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的他也不会移动，fixed定位使元素的位置与文档流无关，因此不占据空间，可与其他元素重叠

3. relative定位

   相对于定位元素的定位是相对其正常位置，移动相对定位元素，但他原本所占空间不会改变，经常被用来作为绝对定位元素的容器块

4. absolute定位

   绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么他的位置相对于，absolute定位使元素的位置与文档流无关，不占据空间，可以和其他元素重叠

5. sticky定位

   粘性定位，基于用户的滚动位置来定位，依赖于用户的滚动，在position: relative和position: fixed定位之间切换。他的行为像position: relative，但是当页面滚动超出了目标区域的时候，他的表现就像position: fixed，会固定在目标位置。元素定位表现在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同

6. 重叠的元素

   元素的定位与文档流无关，所以他们可以覆盖页面上的其他元素，z-index属性指定了一个元素的堆叠顺序

垂直（水平）居中方法&&水平垂直居中

1. 水平居中

   • 行内元素：text-align: center
   • 块级元素
     • 对于宽度确定的块级元素
       1. width和margin实现：margin: 0 auto
       2. 绝对定位和margin-left：-width/2,前提是父元素position: relative
     • 对于宽度未知的块级元素
       1. table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设置为display: table,再通过给该标签添加左右margin为auto
       2. Inline-block实现水平居中：display: inline-block和text-align: center
       3. 绝对定位 + transform，translateX可以移动本身元素的50%
       4. flex布局使用justify-content：center

2. 垂直居中

   • 利用line-height实现居中，这种方法适合纯文字类
   • 通过设置父容器相对定位，子级设置绝对定位，标签通过margin实现自适应居中
   • 弹性布局flex：父级设置display: flex，子级设置margin为auto实现自适应居中
   • 父级设置相对定位，子级设置绝对定位，并且通过位移transform实现
   • table布局，父级通过转换成表格形式，然后子级设置vertical-align实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）

3. 水平垂直居中

   • 居中元素定宽高适用
     • absolute + 负margin
     • absolute + margin auto
     • absolute + calc
   • 居中元素不定宽高
     • absolute + transform
     • line-height
     • writing-mode
     • table
     • css-table
     • flex
     • Grid

4. PC端有兼容性要求，宽高固定，推荐absolute + 负margin

   PC端有兼容要求，宽高不固定，推荐css-table

   PC端无兼容性要求，推荐flex

   移动端推荐使用flex

浮动及清除浮动

1. 浮动布局：当元素浮动以后可以想左或向右移动，知道他的外边缘碰到他的框或者另外一个浮动元素的边框为止。元素浮动以后会推理正常的文档流，所以文档的普通流中的框就变得好像浮动元素不存在一样

2. 优点

   在图文混排的时候可以很好的使用文字环绕在图片周围。另外当元素浮动了起来之后，他有着块级元素的性质可以设置宽高等，但他与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float 可以设置方向是固定的，还有一个就是inline-block在使用时候有时候会有空白间隙问题

3. 缺点

   浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷

4. 清除浮动的方式

   • 添加额外标签

     <div class="parent">
       // 添加额外标签并且添加clear属性
       <div style="clear: both"></div>
       // 也可以加一个br标签
     </div>
     

   • 父级添加overflow属性，或者设置高度

     <div class="parent" style="overflow: hidden">  // auto也可以
       // 将父元素的overflow设为hidden
       <div class="f"></div>
     </div>
     

   • 建立伪类选择器清除浮动（推荐）

     // 在CSS中添加:after伪元素
     .parent:after{
            
       /* 设置添加子元素的内容是空 */
       content: "";
       /* 设置添加子元素为块级元素 */
       display: block;
     	/* 设置添加子元素的高度为0 */
       height: 0;
       /* 设置添加子元素看不见 */
       visibility: hidden;
       /* 设置clear: both */
       clear: both;
     }
     <div class="parent">
     	<div class="f"></div>
     </div>
     

flex布局（常问居中布局以及space-between和space-around的区别）

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

1. 容器的属性

   1. flex-direction：决定主轴的方向

      row | row-reverse | column | column-reverse;
      row: 主轴为水平方向，起点在左端
      row-reverse：主轴为水平方向，起点在右端
      column：主轴为垂直方向，起点在上沿
      column：主轴为垂直方向，起点在下沿
      

   2. flex-wrap：是否换行

      nowrap | wrap | wrap-reverse;
      

   3. flex-flow：flex-direction和flex-wrap的简写

       flex-flow: <flex-direction> || <flex-wrap>;
      

   4. justify-content：在主轴上的对齐方式

      flex-start | flex-end | center | space-between | space-around;
      
      flex-start（默认值）：左对齐
      flex-end：右对齐
      center： 居中
      space-between：两端对齐，项目之间的间隔都相等。
      space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
      

   5. align-items：定义在交叉轴上如何对齐

      flex-start | flex-end | center | baseline | stretch;
      
      flex-start：交叉轴的起点对齐。
      flex-end：交叉轴的终点对齐。
      center：交叉轴的中点对齐。
      baseline: 项目的第一行文字的基线对齐。
      stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
      

   6. align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，则不起作用

      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
      
      flex-start：与交叉轴的起点对齐。
      flex-end：与交叉轴的终点对齐。
      center：与交叉轴的中点对齐。
      space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
      space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
      stretch（默认值）：轴线占满整个交叉轴。
      

2. 项目的属性

   1. order属性：定义项目的排列顺序，数值越小，排列越靠前，默认为0

      .item {
             
        order: <integer>;
      }
      

   2. flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

      .item {
             
        flex-grow: <number>; /* default 0 */
      }
      

   3. flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目缩小

   4. flex:是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto

   5. align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性,默认为auto，表示集成父元素的align-item，如果没有父元素，则等同于stretch

3. space-between和space-around的区别

   • space-between 最左、最右item贴合左侧或右侧边框，item与item之间间距相等
   • space-around 每个item 左右方向的margin相等。两个item中间的间距会比较大

三栏布局（左右定宽高度自使用，至少6种方式）

1. 利用左右浮动，脱离文档流，中间元素正常，设置左右margin。元素顺组：left、right、middle（middle要放在最后），如果窗口太小，右边元素会被挤到下一行
2. 2.圣杯布局 (注意：标签顺序：自适应的放前面，固定的放后面)
3. 双飞翼布局（与圣杯布局的区别：自适应部分content又被包裹了一次，样式也从最外层box中的padding变成content中的margin， 注意：中间的自适应会占左右位置）
4. 绝对定位
5. flex布局
6. 利用calc()动态计算中间的值

// html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./三栏布局.css">
</head>
<body>
    <!-- 1、利用左右浮动，脱离文档流，中间元素正常，设置左右margin。
            元素顺序:left 、 right 、middle(middle要放在最后)
            如果窗口太小，右边元素会被挤到下一行             -->
    <div class="box1">
        <div class="left1">左</div>
        <div class="right1">右</div>
        <div class="middle1">中间</div>
    </div>

    <!-- 2.圣杯布局 (注意：标签顺序：自适应的放前面，固定的放后面) -->
    <div class="box2">