CSS基础布局

CSS布局

确定页面的大致结构，页面分多少块，每块的位置。每个部分怎么把该部分撑起来。

* 早期以table为主(简单)
* 之后 以技巧性的布局为主(难)
* 现在有flexbox/grid(偏简单)
* 响应式布局 在移动端大行其道的时代 是必备的

* table表格布局
* float浮动 + margin
* inline-block布局 (用起来方便，但是小问题较多)
* flexbox布局

盒模型

如下图所示：
宽度和高度 指的是content的宽度和高度
margin指的是 距离上一个元素的距离 或者是 距离父元素的content的距离。
* 要注意content-box 和 border-box区别：
    content-box: 设置的width/height 是设置content的宽高
    border-box: 设置的width/height 是border+padding+content的宽高
* w3c盒模型
    外盒尺寸计算（元素空间尺寸）
        element空间高度＝内容高度＋内距＋边框＋外距
        element空间宽度＝内容宽度＋内距＋边框＋外距

    内盒尺寸计算（元素大小）
        element高度＝内容高度＋内距＋边框（height为内容高度）
        element宽度＝内容宽度＋内距＋边框（width为内容宽度）

* IE盒模型
    外盒尺寸计算（元素空间尺寸）
        element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
        element空间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）

    内盒尺寸计算（元素大小）
        element高度＝内容高度（height包含了元素内容宽度、边框、内距）
        element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

* display确定元素的显示类型
    block/inline/inline-block
    inline元素 默认是没有宽高的(设置width/height也不会起作用)

* position确定元素的位置
    static/relative/absolute/fixed
    * relative的偏移 是相对于 元素自身默认位置 进行偏移的。并且 偏移 不会改变元素自身在文档流中 占据的空间(也就是说，其后的元素的位置 仍是依照 元素进行偏移之前的位置 进行排布)。设置relative 不会使元素 脱离文档流。

    * 对元素设置absolute，会使元素 脱离文档流(也就是说 不会对其它元素的布局 造成影响)。absolute元素的参照位置 是参照 距离元素自身 最近的 父级absolute/relative元素 进行定位的.

    对元素设置fixed，会使元素 脱离文档流(也就是说 不会对其它元素的布局 造成影响)。fixed相对于浏览器窗口是 固定的。

    * 默认情况下，会按照元素出现的先后顺序 进行层叠。想要手动改变 层叠元素的层叠顺序，可以设置z-index.
    * 什么样的元素可以设置z-index? position为relative/absolute/fixed的元素 可以设置z-index，z-index数值大的 在上层. 
    * 写css时要注意z-index的设置，一般来说 会给不同的元素 设置不同的区间，以防元素之间相互覆盖。

Flexbox

* flexbox是有弹性的，可伸缩的
* flexbox本身就是 可以并列的
* 可以指定 宽度

使用float布局

* 元素设置float后，元素就脱离了文档流，但是不会脱离文本流。
* float对元素自身的影响：
    * 会形成 ’块‘(BFC - block formatting context): BFC会形成自己的布局(也就是 BFC块的宽高 都由自己决定，也可以给它设置宽高)
    * 位置 先会向上靠
    * 位置 再向左/右靠

* 对兄弟元素的影响
    * float元素 向上紧贴 非float的元素(当然 也可以是float元素)
    * float元素 向旁边 紧贴 float元素(或者是 父元素的边)
    * float元素不影响 其他块级元素的位置
    * float元素影响 其他块级元素 的内部文本

* (float元素)对父级元素的影响
    * float元素 会从父级元素的空间中 消失
    * 父级元素 可能会 高度坍陷
        解决思路：
            1. float元素 进行设置float时，float元素 会变成BFC，BFC会负责接管自己的宽高的设置。
            那么有 没有可能 让父元素 也成为BFC，让父元素 接管(父元素)自身的宽高呢？
            可以设置 父元素的overflow属性(除了 visible 以外的值（hidden，auto，scroll）). 


span默认是 inline元素，而inline元素 是不能设置宽高的，这里span为什么会有宽高？
    float使span成为了一个BFC块，使得span可以设置宽高。

* CSS中BFC详解
    https://www.cnblogs.com/chen-cong/p/7862832.html

clear: both;  的作用是：保证该元素左右两侧 没有浮动元素。
after伪元素 默认是inline的。设置after为block 另起一行。
高度height：0；visibility: none;
position: absolute元素，脱离文档流 ，无法继承父元素的高度，因此需要 显示的指定 高度。

float+margin 实现两列布局
1. div1 左浮动：给出左侧的空间
2. div2 的margin-left留出 div1 的宽度. + overflow: hidden;也变为BFC块，和 div1的BFC块 并列。

float+margin 实现三列布局
1. div1 左浮动：给出左侧的空间
2. div2 右浮动：给出右侧的空间
3. div3 的margin-left margin-right 分别留出 div1 div2的宽度
这里面需要注意：div3要出现在 div1 和 div2 之后。否则的话 会先 排布div3，此时浮动的div2 的顶部(由于float元素的特性) 会紧贴div3的底部。

inline-block 布局

布局所要做的事情是 把不同的块 横向并列起来。由于纵向是由 每一行堆叠起来的，重复的 布局一行的内容，就可以了。
所以 布局重点就是 把块 横向的 排布开来。

* 像文本一样 排列block元素
* 没有 清除浮动 等问题，简单易用
* 但是需要 处理间隙
    多个inline-block之间的间隙 相当于 文字与文字 之间的间隙。不管使用什么字体，两个字之间 始终是有间隙的。
    所以 间隙就出现在了 inline-block上面。
    解决办法：
        1. 把inline-block的父元素 字体大小(font-size) 设置为0。
        (因为 字体大小为0了 文字之间的间隙也就为0了)
        为了显示inline-block内的文字, 要重新设置inline-block的font-size.

        2. 把inline-block元素 之间的 空隙注释掉，就可以了。

        还是推荐使用 设置字体 的方式，来处理inline-block之间的间隙。
* 局限：使用inline-block去做 自适应的东西，会有一定的困难。
    所以 对于定宽的东西来说，比较适合 采用 inline-block 来进行布局。

响应式设计和布局

在移动端时代，响应式的设计和布局 是必需掌握的内容。响应式布局 能帮助网页 更好的适配pc端 和不同尺寸的移动端。

* 让页面 在不同的设备上 能正常的使用
* 主要处理的是 屏幕大小的问题(严格来讲 还涉及到 是否有鼠标 是否是读屏软件 是否支持一些样式)
* 在具体的方法上 涉及到 设计 和 实现 两方面。
    响应式页面的设计 如果没有 设计思路的支持，是很难进行的。
    (如果设计师直接给你固定宽度980的页面，位置都定死的话，那么到移动端 是没有办法 做适配的)所以 在设计的源头 就要想一些办法 去适配。

* 主要方法：
    * 隐藏 + 折行 + 自适应空间
        隐藏：确定好哪一部分的内容(比如导航 个人信息 可以通过点击菜单 从而弹出导航和个人信息 的方式，去隐藏起来) 在移动端是可以隐藏的。
        比如侧边栏 友情链接 和很大的footer 在移动端就不显示了。
        折行：在pc端横向排布的若干个东西，在移动端 可以 一行显示两个 分多行显示。
        留下自适应的空间：和两列布局类似，一列固定宽度 另一列随屏幕自适应。
        (类似的思路，在屏幕顶部 给logo固定宽度 logo右侧的纯色背景 可以自适应)。如果在设计的时候，多留一些自适应的空间 就可以很好的适配移动端。
    具体的方法：
        rem：通过html的字体大小 来确定元素大小的办法，我们可以使用rem的单位 进行布局。布局完成之后 针对不同大小的屏幕 给出不同大小的字号，那么其它元素就会跟着缩放。
        viewpoint：用js或者手工确定 要把整个界面放到多大
        media query：根据不同设备的特性 来匹配不同的样式。比如 为小屏幕 写一段样式 为大屏 写一段样式，然后 通过media query来进行。

    折行：把横向排布的inline-block元素, 
        用@media (max-width: 640px)适配屏幕，
        从而更改inline-block元素 为 block，margin: 0 auto
        (为了元素居中)。 

    自适应：1. 既然不同设备的屏幕尺寸不一样，那么网页中的文字 也应该是不一样的，此时 可以采用等比例的方式 来自适应屏幕。
        2. 固定设备的逻辑宽度为320，来适配(<meta name="viewport" content="width=320">)。
        3. rem: 使用html{font-size: 20px;}指定rem的单位，然后media根据查询到的设备宽度，给html{font-size: 20px;}字体大小设置不同的值。

        @media (max-width: 375px){
            html{
                font-size: 24px;
            }
        }
        @media (max-width: 320px){
            html{
                font-size: 20px;
            }
        }
        @media (max-width: 640px){
            .intro{
                margin: .3rem auto;
                display: block;
            }
        }

    问题：rem的单位不一定非常精确，有时候会碰到’带小数点的rem数值‘(比如font-size: 16px, 不好除尽 会算出来 带小数点的rem数值)。而小数 换算出来的 像素 是不精准的。所以 使用rem的时候 要考虑到不精准的情况 要预留一些余地 给不精准的情况。对于精确性非常高的地方 就不要使用rem来布局了。

CSS面试题

1. 实现两栏/三栏的布局 的方法
    1. 表格布局
    2. float+margin布局
    3. inline-block布局
    4. flexbox布局
2. position: absolute和fixed有什么区别？
    主要区别在于 参照物不同
    absolute相对于 最近的父级 absolute/relative元素 来进行定位。
    fixed相对于屏幕(viewport) 来进行定位
3. display: inline-block的间隙 如何处理？
    间隙原因：字符间距
    解决方案：1.消灭空白字符：注释掉 标签之间的空白字符
            2.消灭字符间距：把父级元素的字体大小设置为0，再设置元素自身的字体大小。
4. 如何清除浮动，为什么清除浮动
    这是因为 float元素 不会占据父元素的布局空间，有可能 float元素 就会超出 父元素，从而对其它的元素 造成影响。所以作为父元素 要清除浮动 来保证父元素内的元素 不会影响父元素的外部元素。
    清除方式：
        * 让盒子负责自己的布局(overflow:hidden(auto))
            设置超出时 要怎么办，那么就会管理 什么时候会超出
        * ::after{clear:both} display:block 
            content:""  height:0  visibility:none
            不让父元素管自己的布局，而是加一个伪元素 放到浮动元素的后面，从而让父元素 包含浮动元素。 

5. 如何视频移动端？
    * 适配页面的viewport(页面的宽度 要和 移动端的宽度 适配，否则页面 在移动端上 会缩小，也就是一定要加viewport)
    * rem/viewport/media query
    * 设计上：隐藏(不需要在移动端显示的，就不让 在移动端显示) 
        折行(在pc端 横排的东西，在移动端可以少排一些 或者 竖排) 
        自适应(留下自适应的空间)

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=30ypesnuf06cs