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端 横排的东西,在移动端可以少排一些 或者 竖排) 
        自适应(留下自适应的空间)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券