盒模型

盒模型
    划分区域中的css知识
    每一个元素都会在页面中生成一个矩形区域
    css称该矩形区域为盒子（box）
    盒子的相关知识
    *盒模型：单个盒子组成
    *视觉格式化模型：多个盒子的排列（盒子之间的相互作用和影响）
    *布局：实际应用中

盒子的组成
    Margin 外边距：是盒模型可见部分之外的透明空间，让我们可以控制页面中元素之间的距离，帮助将元素定位到页面上一个特定位置上，或者给元素提供呼吸的空间，让它与其他元素保持一个安全距离.
    border 边框 默认值（3px）：添加边框会在内边距区外加上一条线，这些线会以不同的风格出现，如实线，点线或虚线
    Padding 内边距 边框与内容之间的可选距离：内边距应用在内部区周围，如果给元素添加背景，它会应用到由内容和内边距组成的区域。因此，内边距经常被用于在内容周围创建一个隔离带，这样内容就会与背景混在一起
        背景颜色渲染区域默认从border开始
    content 内容 内容的高度和宽度

盒模型
    padding 内边距，填充区：类似于箱和内部空间之间的填充物
    padd是可以设置4个方面的值。
    取一个值：四个面
    取2个值：第一个代表上下，第二个代表左右。
    取三个值：上→左右→下
    取四个值：上→右→下→左右 顺时针

    Padding-top
            right
            bottom 
            left
        盒模型四个部分都可以运用
        默认值：0px，不可继承

    border 边框 类似于箱子壁，分上（top），右（right），下（bottom），左（left）
    边框粗细用width
    border-radius：；边框的圆角
        取一个值，是四个角的弧度半径
        取两个值，第一个值是左上角和右下角的弧度半径
                第二个值是右上角和左下角的弧度半径
    border-bottom-right-radius：30px 20px 下边框右角弧度半径
                                第一个是x轴半径
                                第二个是y轴半径
    border：2px solid red 缩写
    设置内容盒宽高为零，其他三个设为透明色。实现三角形
    outline（轮廓）用法和border一致用于布局，不占像素。只能设置四个边，不能单独设置
    Margin:类似于箱子与箱子之家的距离

    子盒子：
    1.边框盒（border-box）：由border，padding，content组成
    背景色默认渲染区：边框盒
    background-clip：border-box 从默认区边框开始渲染
    2.填充盒（padding-box）：由padding，content组成
    严格意义上，overfllow指代溢出，是指溢出填充盒（从padding开始切）
    3.内容盒（content-box）：由content组成
    默认情况下，width盒height属性是指内容盒的高度和宽度

    box-sizing：设置元素的渲染尺寸
    content-box（默认值）：表示元素的width和height设置的区域是内容盒
    border-box：表示元素的width盒height设置的区域是边框盒
        主要用于解决页面横向滚动条的问题
        （注：width：10%的基础加上margin
            设置box-sazing：border-box：像素）

 

转载于:https://www.cnblogs.com/wangqinbing/p/9221848.html