zoukankan      html  css  js  c++  java
  • 盒子边框、外边距、内边距、盒子模型的尺寸

    1.盒子模型由----网页内容content、边框boder、内边距padding、外边距margin----四部分组成

    2.边框boder:三个属性---颜色color、粗细width、样式style

        01.color:分开设置boder-top-color上边框颜色、boder-bottom-color下边框颜色、boder-left-color左边框颜色、boder-right-color右边框颜色

             同时设置,boder-color:上、右、下、左,必须按上、右、下、左顺序设置,中间用空格分开,没有找对边

      举例:boder-color:red blue black;上边框颜色为红色, 右边框颜色为蓝色,下边框颜色为黑色,没有设置左边框,找它的对边右边框,则左边框为蓝色

        02.width:分开设置boder-top-width上边框粗细、boder-bottom-width下边框粗细boder-left-width左边框粗细boder-right-width右边框粗细

             同时设置,boder-width:上、右、下、左,必须按上、右、下、左顺序设置,中间用空格分开,没有找对边

        03.style:样式有:none、hidden、dotted、dashed、solid、double、groove、ridge、outset等

            最常用的none无边框、dashed虚线边框、solid实线边框、dotted点线边框

      总结:boder的三个属性可以同时设置  ,三个属性不要求有序

          举例:boder-bottom:red 5px solid,设置的是下边框

                boder:red 5px solid表示四条边框一样,同时设置

    3.外边距:margin,是指与其他盒子之间的距离

          margin-top上外边框、margin-bottom下外边框、margin-left左外边框、margin-right右外边框

          同时设置margin,上、右、下、左,必须按上、右、下、左顺序设置,中间用空格分开,没有找对边

    4.内边距:padding,是控制内容与边框之间的距离

          padding-top上外边框、padding-bottom下外边框、padding-left左外边框、padding-right右外边框

          同时设置padding上、右、下、左,必须按上、右、下、左顺序设置,中间用空格分开,没有找对边

    5.盒子模型的尺寸

      内盒的总尺寸=boder+padding+内容宽/高

      外盒的总尺寸=margin+boder+padding+内容宽/高

    6.box-sizing拯救布局

      语法:box-sizing:centent-box 、border-box、 inherit

      centent-box默认值,盒子的总尺寸=boder+padding+内容宽/高

      

     

  • 相关阅读:
    springmvc中request的线程安全问题
    日志帮助类
    模态框的实现
    getopts的使用方法
    自动生成头文件的脚本
    shell脚本中出现图形化界面
    Linux Centos关机命令
    Linux下IP的存储位置
    tar只解压tar包中某个文件
    Swift 笔记1
  • 原文地址:https://www.cnblogs.com/weihaixiong/p/8352992.html
Copyright © 2011-2022 走看看