CSS盒子模型

一、居中

垂直居中：

1. 通过设置 vertical-align 属性实现垂直居中

vertical-align: baseline;  /* 默认值 */
    - baseline 基线对齐 子元素和父元素基线对齐  
    - top      顶部对齐 子元素和父元素顶部对齐 
    - bottom   底部对齐 子元素和父元素顶部底齐  
    - middle   居中对齐

2. 通过设置line-height 实现垂直居中

.box1{
    width: 100px;
    height: 200px;
    line-height: 200px;  /* 当行高和元素高度相等的时候亦可实现垂直居中效果 */
}

水平居中：

通过设置 text-align 实现

text-align: center;
    - left	    文本排列到左边。默认值：由浏览器决定。
    - right	    文本排列到右边。
    - center	把文本排列到中间。
    - justify	实现两端对齐文本效果。
    - inherit	规定应该从父元素继承 text-align 属性的值。

文本溢出：通过设置 text-overflow 属性选择不同的溢出效果。

text-overflow: clip;
    - clip	    修剪文本。
    - ellipsis	显示省略符号来代表被修剪的文本。
    - string	使用给定的字符串来代表被修剪的文本。

二、盒子模型

主要有四部分组成 外边距、边框、内边距、内容区组成。一个盒子的宽度由：边框宽度+内边距宽度+内容区大小共同组成。

外边距(margin)：用于控制元素与元素之间的距离。块元素设置margin-left / top 都会使元素自己移动，设置 margin-right / down 会使其他元素移动。内联元素设置margin不会影响布局 不会挤动其他元素。

.outer{
    margin: 1 2 3 4;  /* 上外边距是1，右外边距是2，下外边距是3，左外边距是4  */
    margin: 2 4 5;    /* 上外边距是2，左右外边距是4，下外边距是5     */
    margin: 0 auto;   /* 上下外边距是0，左右外边距自适应          */
    margin: 0;        /* 上下外边距是0      */
}

边框(border)：围绕在内边距和内容外的边框。

.outer{
    /* 设置边框的宽度、边框颜色、边框样式 三个参数没有顺序 如果没有设置边框的宽度会有浏览器默认的宽度*/
    border: 10px greenyellow solid;  
    border-right: none;  /* 也可以通过具体的指定不展示某条边的边框 */
    border-radius: 20px 30px 20px 30px;   /* 设置角的弧度 按照左上、右上、右下、左下的顺序*/
    border-image: 图片、图片剪裁位置、重复性;
        -重复性的参数
            repeat（重复、round（平铺）和stretch（拉伸）。其中，stretch是默认值。
}

同样效果的还可以设置outLine属性，和border属性的区别是 outLine不会影响可见框的大小，不会计算大小。

outline: 10px solid pink; /* 轮廓 用法和边框一样用法 */

内边距(padding)：内容与边框之间的距离。内联元素如果padding对其他元素产生遮罩也只会遮罩，不会挤动其他元素。

.outer{
    padding: 1 2 3 4;  /* 上外边距是1，右外边距是2，下外边距是3，左外边距是4 和margin一样 */
}

内容(content)：盒子的内容，显示文本和图像。

.outer{
    width: 200px; /* 设置宽度 */
    height: 200px; /* 设置高度 */
    box-shadow: 10px 10px 10px gray;  /* 设置盒子的阴影 前两个值是x y的偏移量 模糊度 颜色 */
    box-sizing: content-box; /* 盒子大小的计算方式  设置width和height的作用范围 */
        - content-box 宽和高设置内容区大小 默认选项
        - border-box 宽和高设置盒子整体的大小   
}

※：对于一些 border、padding、background、margin属性是不能被继承的。

子元素要在父元素中要想保持居中，就需要满足下面的条件：

margin-left + border-left + padding-left + width + margin-right + border-right + padding-right == father_width

也就是所有外边距、内边距、边框、内容区等于父级元素的宽度才能居中，如果没有满足上面的等式的情况就称为过度约束，浏览器会自动调整，如果任何一个属性都没有设置为auto，默认会修改 margin-right 的值来满足等式。如果外边距和内容宽度设置为 auto 则内容宽度会最大，如果将三个值都设置为 auto 则外边距都是0 内容宽度会最大。

三、边界重叠(margin collapse)：

块元素的边界重叠：

1. 父子关系的情况：子元素会将自己的外边距传递给父元素，如果父级div中没有 border，padding，overflow，子级div的margin会一直向上找，直到找到某个标签包含border，padding，overflow中的其中一个，然后按此div 进行margin。

2. 兄弟关系情况：兄弟元素直接取两者外边距较大值的那一个，特殊情况 如果一正一负，取两者相加的和，如果两个负数取绝对值较大的那个作为外边距。

内联元素的边界重叠：不会出现外边距重叠，外边距都是直接相加。

解决块元素的外边距重叠问题的CSS：思路是在父元素前添加一个块元素，margin的目标就变成了前面的块元素。

.outer::before{
    content: '';
    display: table;
}

浏览器默认样式：

浏览器会存在一些与生俱来的样式，其目的是为了在没有css情况下更好的展示，如果不清除浏览器的样式有可能会对布局造成影响，一般都是外边距和内边距并不是0 的情况，有两种情况应对。

1. 直接引入清楚所有样式的css或者重置样式的css
    <link rel="stylesheet" href="../css/reset.css">      清楚所有的样式
    <link rel="stylesheet" href="../css/normalize.css">  重置样式

2. 或者直接通过所有标签进行设置
*{
    magin: 0px;
    padding: 0px;
}

四、背景相关

background-color: dodgerblue;  /* 设置背景颜色 */

background-image: url("logo.gif");   /* 设置图片背景  */
    - url 图片文件地址
    - linear-gradient(to left, red 10px, yellow 10px)  渐变 (方向, [设置多个颜色和每个颜色的宽度])
    - linear-gradient  径向渐变  参数含义同上  

background-size: 10px 10px;   /* 设置图片尺寸  */
   - 10px 10px 长和宽  如果只写一个值 那么第二个默认是auto
   - cover   把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
   - contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，不会随着滚动条移动

background-repeat: repeat-x;  /* 背景重复设置 */
    - repeat-x  横向重复
    - repeat-y  纵向重复
    - repeat    重复
    - no-repeat 不重复  默认值

background-position: 10px 10px;  /* 背景图片位置 第一个参数控制x轴、第二个参数控制y轴*/
    - center 中间 bottom 下面 left 左边 right 右边
    - left bottom 左下角

background-clip: content-box;  /* 设置背景的可选范围 */
    - border-box   背景会出现在边框下、  内边距和内容区
    - padding-box  不会出现在边框, 只会出现在内边距和内容区
    - content-box  只会出现在内容区

background-origin: border-box;  /* 设置背景图片偏移计算的原点 */
    - padding-box  默认值 从内边距处开始计算  
    - content-box  就在内容区  
    - border-box   从边框处开始计算

background-attachment: fixed;  /* 是否跟随背景元素移动 */
    - scroll 跟随移动，默认值。
    - fixed 固定，当页面的其余部分滚动时，背景图像不会移动。

background: 背景元素的综合属性，属性顺序没有要求，需要注意两个方面。
    - background-size 必须在 background-position 后面 使用/ 隔开
    - 由于两个属性的值都是相同的，所以background-clip 必须在 background-origin 后面

background-position 还可以用来雪碧图的图片展示，雪碧图可以避免图片切换闪烁的问题。

五、溢出效果的处理

overflow：元素内容溢出的效果。

overflow: auto;
    hidden	内容会被修剪，并且其余内容是不可见的。
    scroll	内容会被修剪，但是浏览器会显示横纵两个滚动条。
    auto	如果内容被修剪，则浏览器会根据情况展示横纵滚动条。

text-overflow: 文本元素溢出的效果。

text-overflow: ellipsis;
    - clip: 剪切多余的文本
    - ellipsis: 多余的文本用 ... 展示
    - strings: 使用给定的字符串来代表被修剪的文本。

white-space：处理元素内的空白。

white-space: nowarp;
    - nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    - pre-wrap	保留空白符序列，但是正常地进行换行。
    - pre-line	合并空白符序列，但是保留换行符。

 实现文本溢出 显示省略号的效果

.test-01{
    width: 30px;  /* 必须设置宽度 */
    overflow: hidden;  /* 两种溢出缺一不可 */
    text-overflow: ;
}

六、一些标签和属性

display属性：改变元素的属性，从行内变成块元素；从块元素变成行内元素。block  可以将内联标签变成块级标签。inline  将块级标签变成内联标签。none：隐藏元素。inline-block：既是块级元素，又不会独占一行。浏览器默认会加上间距。

table标签相关的属性： 

border-spacing: 1px;         /* 指定边框之间的距离 */
border-collapse: collapse;   /* 指定边框的合并，再设置border-spacing就没用了 */

※ ：关于图片间的间隙小bug可以通过如下设置解决 letter-specing：字母之间的距离(字间隔)。word-specing：单词之间的距离(字符间距)。这两个属性解决

 word-spacing: -5px;  /* 通过word-specing可以调节父级元素的两个子元素的间距。 */

七、float 浮动

先了解一下什么是文档流：

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

只有绝对定位absolute和浮动float才会脱离文档流。

浮动定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止(也就是说只会在父元素的左侧或者右侧浮动)。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）。换句话说，浮动就是将某个元素飘起来（使其脱离文档流），后面的元素会补上这个位置。

浮动的特点：

1. 设置完浮动以后平布局的公式便不需要成立了 并且会脱离文档流，不再占据文档流的位置。
2. 不会从父元素中移除，如果容纳不下就会换行，浮动元素不会盖住文字
3. 元素的特点也会发生变化，块元素不在独占一行，元素的宽度和高度会被默认的东西撑开；行内元素脱离了以后会变成块元素。

八、BFC（块级格式化上下文）

BFC是CSS中一个隐藏的属性，可以为一个元素开启BFC，成为一个独立区域布局。

特点：

• 开启BFC的元素不会被浮动元素覆盖。
• BFC 子元素和父元素的外边距不会重叠
• 开启BFC 的元素可以包含浮动子元素

 为了解决高度塌陷的问题需要在合适的地方开启BFC，开启方式：

• 当子元素float以后，设置父元素的float，缺点会从文档流脱离。
• 置为行内块元素(例如  display: inline-block)，缺点是行内块不适合做外层的布局容器。
• 将元素的overFlow设置成为一个非visitable的值(例如  overFlow: hidden)。

清除浮动：

clear： left
    - left：清除左侧浮动影响
    - right：清除右侧浮动影响
    - both：清除两侧中最大影响那侧

※：但是需要注意的是：clear属性只会对自身起作用，清楚浮动元素对当前元素的影响。原理就是浏览器会自动添加一个上外边距 以使其不受其他元素影响。

清除浮动也能很好的解决高度塌陷的问题，思路是在外层元素的末尾添加一个元素，撑起来整个外层元素，这样就能避免高度塌陷。

.outer::after{  /* after 默认是一个行内元素 */
    display: block;
    content: "";
    clear: both  
}

一个既可以解决高度塌陷又可以解决外边距重叠的CSS：

.clearFix::before,.clearFix::after{  /* 既可以解决高度塌陷 也可以解决外边距重叠 */
    content: '';
    display: table;   /* 和block有点像  */
    clear: both;
}

九、响应式

必须要加上<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 。

宽度为设备宽度，初始缩放为1.0，最大缩放比例为1.0，用户不允许缩放。

响应式的样式要定义在@media all and (min-width: 600px) and (max-width: 1000px){} 意思是：all--->代表所有设备，当宽度在600px和1000px之间应用下面样式，所有的条件用and拼接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        #content{
            width: 1100px;
            height: 800px;
            margin: 0 auto;
            background-color: red;
        }
//      当宽度大于700px小于1000px应用此样式
        @media all and (min-width: 700px) and (max-width: 1000px){
            #content{
            width: 500px;
            height: 600px;
            margin: 0 auto;
//          清除浮动
            clear: both;
            background-color: green;}
        }
//      当宽度小于700px应用此样式
        @media all and (max-width: 700px){
            #content{
            width: 200px;
            height: 400px;
            margin: 0 auto;
            background-color: yellow;
        }
}

    </style>
</head>
<body>
<div id="content"></div>
</body>
</html>

也可以在Link中直接判断设备尺寸，引用不同css。

<link rel="stylesheet" type="text/css" herf="a.css" media = "screen and (min-width:400px)>

最后总结下响应式布局的实现原理

首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）