二、HTML和CSS - CSS 基础知识 - 《前端学习笔记》

一、布局

一、布局

1、盒子模型

1.1 盒子模型宽度计算

offsetWidth = （内容宽度 + 内边距 + 边框），无外边距
box-sizing：border-box（宽度包括内容宽度 + 内边距 + 边框）、content-box（宽度为内容宽度）

1.2 Margin 纵向重叠问题

相邻元素的 margin-top 和 margin-bottom 会发生重叠
空白内容，如
也会重叠

1.3 Margin 负值问题

margin-top 和 margin-left 负值，元素向上、向左移动
margin-right 负值，右侧元素左移，自身不受影响
margin-bottom 负值，下方元素上移，自身不受影响

2、BFC 理解与应用

Block format context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

body 根元素
浮动元素：float 不是 none
绝对定位元素：position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex、inline-block、table-cells 等

常见应用：清除浮动、解决 margin 纵向合并问题
参考：https://zhuanlan.zhihu.com/p/25321647

3、Float 布局

圣杯布局和双飞翼布局介绍

三栏布局，中间一栏最先加载和渲染
两侧内容固定，中间内容随着宽度自适应
一般用于 PC 网页

圣杯布局

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>圣杯布局</title>
 <style type="text/css">
     body {
         min-width: 550px;
     }
     #header {
         text-align: center;
         background-color: #f1f1f1;
     }
     #container {
         padding-left: 200px;
         padding-right: 150px;
     }
     #container .column {
         float: left;
     }
     #center {
         background-color: #ccc;
         width: 100%;
     }
     #left {
         position: relative;
         background-color: yellow;
         width: 200px;
         margin-left: -100%;
         right: 200px;
     }
     #right {
         background-color: red;
         width: 150px;
         margin-right: -150px;
     }
     #footer {
         text-align: center;
         background-color: #f1f1f1;
     }
     /* 手写 clearfix */
     .clearfix:after {
         content: '';
         display: table;
         clear: both;
     }
 </style>
</head>
<body>
 <div id="header">this is header</div>
 <div id="container" class="clearfix">
     <div id="center" class="column">this is center</div>
     <div id="left" class="column">this is left</div>
     <div id="right" class="column">this is right</div>
 </div>
 <div id="footer">this is footer</div>
</body>
</html>

实现方案一

使用 float 布局
两侧使用 margin 负值，以便和中间内容横行重叠；
防止中间内容被两侧覆盖，使用 padding 预留位置

其他方案

flex
中间内容宽度使用 calc 或 flex-grow: 1

双飞翼布局

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>双飞翼布局</title>
 <style type="text/css">
     body {
         min-width: 550px;
     }
     .col {
         float: left;
     }
     #main {
         width: 100%;
         height: 200px;
         background-color: #ccc;
     }
     #main-wrap {
         margin: 0 190px 0 190px;
     }
     #left {
         width: 190px;
         height: 200px;
         background-color: #0000FF;
         margin-left: -100%;
     }
     #right {
         width: 190px;
         height: 200px;
         background-color: #FF0000;
         margin-left: -190px;
     }
 </style>
</head>
<body>
 <div id="main" class="col">
     <div id="main-wrap">
         this is main
     </div>
 </div>
 <div id="left" class="col">
     this is left
 </div>
 <div id="right" class="col">
     this is right
 </div>
</body>
</html>

实现方案一同圣杯布局，使用 margin 预留位置，也可使用上述其他方案

清除浮动

clear: both
clearfix 伪类 ```css .clearfix:after { content: ‘’; display: table; clear: both; }

.clearfix { zoom: 1; / 兼容IE低版本 */ }


<a name="VpSRW"></a>
### 4、Flex 布局
文档：[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)<br />Flex 布局的基本结构是 Flex 容器（display: flex）中放置多个 Flex 项目（子元素）<br />Flex 容器属性如下：
- flex-direction：主轴方向
- flex-wrap：是否换行
- flex-flow：flex-direction、flex-wrap 的简写
- justify-content：主轴对齐方式
- align-item：交叉轴对齐方式
- align-self：子元素在交叉轴对齐方式（可与其他子元素不同）
Flex 项目属性如下：
- order：项目的排列顺序
- flex-grow：空间有多余时，项目的放大比例
- flex-shrink：空间不足时，项目的缩小比例
- flex-basis：定义分配多余空间之前，项目占据的主轴空间
- flex：flex-grow、flex-shrink、flex-basis 的简写
- align-content：项目单独设置对齐方式
<a name="PCglQ"></a>
## 二、定位 
<a name="HcZTs"></a>
### 1、absolute 和 relative 定位
- relative 依据自身定位
- absolute 依据最近一层的定位元素定位（absolute、relative、fixed），若没有则依据 body 定位
<a name="u2KqZ"></a>
### 2、居中对齐的实现方式
1. 水平居中
- inline 元素：text-align: center
- block 元素：margin: auto
- absolute 元素：left: 50% + margin-left 负值
2. 垂直居中
- inline 元素：line-height 的值等于 height 值
- flex 布局
- absolute 元素：top: 50% + margin-top 负值
3. 水平垂直居中
- top: 50%, left: 50%, transform: translate(-50%, -50%)
- top, left, bottom, right: 0  + margin: auto
<a name="9L4Fj"></a>
## 三、图文样式
<a name="FJF63"></a>
### 1、line-height 继承
- 写具体数值，如 30px，则继承该值
- 写比例，如 2 或 1.5，则继承该比例
- 写百分比，如 200%，则继承父元素根据百分比计算后出来的值
<a name="mxqqx"></a>
## 四、响应式
<a name="Apltm"></a>
### 1、rem
rem 是一个长度单位
- px：绝对长度单位，常用
- em：相对长度单位，相对于父元素，不常用
- rem：相对长度单位，相对于根元素 html，常用于响应式布局
<a name="8kUL4"></a>
### 2、媒体查询
- 媒体查询（media-query），根据不同的屏幕宽度设置根元素 font-size
- rem：基于根元素的相对单位
```css
@media only screen and (max-width: 374px) {
  html {
      font-size: 86px;
  }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
  html {
      font-size: 100px;
  }
}
@media only screen and (min-width: 414px) {
  html {
      font-size: 110px;
  }
}

3、vw/vh

媒体查询 + rem 存在 “阶梯” 性的弊端，面对不同分辨率不够丝滑

window.screen.height // 屏幕高度
window.innerHeight // 网页视口高度
document.body.clientHeight // body 高度

其中

vh 是网页视口高度的 1/100
vw 是网页视口宽度的 1/100
vmax 取二者最大值；vmin 取两者最小值