zoukankan      html  css  js  c++  java
  • 盒子模型

    1.常见的块级元素均具有盒子模型的特征;

    2.

    div{
        border:2px  solid  red;
    }

    等价于:

    div{
        border-2px;
        border-style:solid;
        border-color:red;
    }

    其中:

    1)、border-style(边框样式)常见样式有:

    dashed(虚线)| dotted(点线)| solid(实线)。


    2)、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

    border-color:#888;//前面的井号不要忘掉。


    3)、border-width(边框宽度)中的宽度也可以设置为:

    thin | medium | thick(但不是很常用),最常还是用象素(px)。

    9.27日更新-----------------------------------------------------------------------------------------------

    div{
        500px;
        padding:20px;   
        border: 1px solid #ccc;
        ...     
    }

    下方为浏览器中的具体渲染:

    注意:设置整个 <div></div>元素的 width 为 500px ;

       浏览器渲染时,将 content 的 width 设置为500px。

    19.02.14  -----------------------------------------------------------------------------------------------

    在 css 3 中,新增了一个 box-sizing 属性,这个属性定义了 width 和 border、padding 之间的计算规则,有 3 个值:

    content-box,默认值,border 和 padding 不计算在 width 中;

    padding-box, 将 padding 计算至 width 中;

    border-box, 将 border 和 padding 都计算在 width 中。

  • 相关阅读:
    第四季-专题8-Linux系统调用
    第四季-专题7-Linux内核链表
    Python3 运算符
    Python2和Python3有什么区别?
    python常见的PEP8规范
    机器码和字节码
    域名是什么?为什么域名是www开头?
    selenium自动化登录qq邮箱
    xpath+selenium工具爬取腾讯招聘全球岗位需求
    ArrayList
  • 原文地址:https://www.cnblogs.com/cc-freiheit/p/7498124.html
Copyright © 2011-2022 走看看