zoukankan      html  css  js  c++  java
  • box-sizing布局学习笔记

    首先学习box-sizing布局之前,来了解一下css盒子模型(Box Model)


    盒子模型(Box Model)


    一般来说,css盒子模型有两种模式:

    • W3C的标准模型 相当于 box-sizing:content-box

    我们对元素设置的宽度和高度就是内容(content)的宽度和高度,也就是内盒子的宽度;外盒子的宽度包括:content+padding+border的


    • IE的传统模型 相当于box-sizing:border-box

    这个模型下,我们设置的宽度和高度是包括:content+padding+border的,此时这个宽度和高度,相当于我们在W3C模型下面的宽度和高度。其内容的宽度比我们设置的宽度要小的。


    box-sizing:content-box


    默认值,标准的盒模型,width和height只包括内容(content)的宽度和高度,不包括border,padding,margin,这些都是盒子的外部。


    ps:当我们设置好了宽度和高度的时候,其外盒子的宽度和高度基本上就定了,当我们想在内容(content)外面设置padding和margin或者border时,非常容易破坏我们的布局,此时我们就需要想到box-sizing:border-box


    box-sizing:border-box


    这个模式下,当我们设置了盒子宽度和高度的时候,其包括:content+padding+border,但是不包括margin。


    ps如果计算的content的内容宽度为负值,其都会被计算为0,内容还在,故不能通过border-box来隐藏元素。元素的内容宽度和高度是在我们设置的宽度和高度的里面渲染的。当我们想给元素添加border或者padding时,这个模型不会破坏我们的布局,因为其会适当的调整我们内容content的宽度和高度来满足。故可以用来设置自适应布局


    案例:box-sizing三栏布局


    html代码:


    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>

    cssd代码:


    div{
                    height: 600px;
                    float: left;
                }
                .left{
                    width: 25%;
                    background: #000000;
                }
                .mid{
                    /*默认是box-sizing:content-box*/
                    box-sizing: content-box;
                    width: 50%;
                    background: #ff00ff;
                }
                .right{
                    width: 25%;
    
                    background: #ffff00;
                }

    效果:


    当我们试着给粉红色加上border的时候,你会发现,黄色掉下去了,因为此时的宽度正好是body的100%,其是标准的盒子模型。但是我们一定要给中间的加上padding,那咋办?此时我们可以给中间的添加:

    > box-sizingborder-box

    之后,再去给中间的加上padding就可以了,不管我们怎么设置padding的大小,其布局依然完好。


    box-sizing的另外一个作用是在表单元素上面调整布局,因为我们的表单元素还有一部分是IE的传统盒子模型,详情参考:W3Cplus
    欢迎访问我的github

  • 相关阅读:
    Python入门11 —— 基本数据类型的操作
    Win10安装7 —— 系统的优化
    Win10安装6 —— 系统的激活
    Win10安装5 —— 系统安装步骤
    Win10安装4 —— 通过BIOS进入PE
    Win10安装2 —— 版本的选择与下载
    Win10安装1 —— 引言与目录
    Win10安装3 —— U盘启动工具安装
    虚拟机 —— VMware Workstation15安装教程
    Python入门10 —— for循环
  • 原文地址:https://www.cnblogs.com/linewman/p/9918379.html
Copyright © 2011-2022 走看看