• 盒模型


    盒模型

    一、盒模型概念

    • 广义盒模型:文档中所有功能性及内容性标签,及文档中所有显示性标签
    • 侠义盒模型:文档中以块级形式存在的标签(块级标签拥有盒模型100%特性且最常用)
    • 盒模型组成:margin + border + padding + content
    v_hint:content = width x height

    二、盒模型成员介绍

    1、content

    • 通过设置width与height来规定content
    • 块级标签可以设置自身宽高,默认宽为父级宽(width=auto)、高为0,高度可以由内容决定
    • 内联标签不可以设置自身宽高,默认宽高均为0,宽高一定由内容决定

    2、border

    • border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
    • border成员:border-left、border-right、border-top、border-bottom
    • border-width成员:border-left-width、border-right-width、border-top-width、border-bottom-width
    • border-color成员:border-left-color、border-right-color、border-top-color、border-bottom-color
    • border-style成员:border-left-style、border-right-style、border-top-style、border-bottom-style
    风格 解释
    solid 实线
    dashed 虚线
    dotted 点状线
    double 双实线
    groove 槽状线
    ridge 脊线
    inset 内嵌效果线
    outset 外凸效果线
    v_hint:border满足整体设置语法,eg:border: 1px solid red;

    3、padding

    • padding成员:padding-left、padding-right、padding-top、padding-bottom
    • padding整体设置
    值得个数 方位
    1 上下左右
    2 上下 | 左右
    3 上 | 左右 | 下
    4 上 | 右 | 下 | 左

    4、margin

    • margin成员:margin-left、margin-right、margin-top、margin-bottom
    • margin整体设置
    赋值个数 方位
    1 上下左右
    2 上下 | 左右
    3 上 | 左右 | 下
    4 上 | 右 | 下 | 左

    三、边界圆角

    border-radius

    • border-radius成员
    成员 解释
    border-top-left-radius 左上 方位
    border-top-right-radius 右上 方位
    border-bottom-left-radius 左下 方位
    border-bottom-right-radius 右下 方位
    • 单方位设置
    赋值个数(值类型:长度 | 百分比) 解释
    1 横纵
    2 横 | 纵
    • 按角整体设置
    赋值个数(值类型:长度 | 百分比) 解释
    1 左上 右上 左下 右下
    2 左上 右下 | 右上 左下
    3 左上 | 右上 左下 | 右下
    4 左上 | 右上 | 右下 | 左下
    • 分向整体设置
    格式 解释
    1 / 1 横向 | 纵向

    四、其他相关属性

    • max|min-width|height
    • overflow
    描述
    visible 默认值。内容不会被修剪,会呈现在元素框之外。
    hidden 内容会被修剪,并且其余内容是不可见的。
    scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    inherit 规定应该从父元素继承 overflow 属性的值。
    • display
    描述
    inline 内联
    block 块级
    inline-block 内联块

    盒模型代码示例

    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="UTF-8" />
        <title>盒模型</title>
        <style type="text/css">
            .box{
                margin:10px;
                border:solid;
                padding:10px;
                100px;
                height:100px;
                background:red;
    
            }
            /* 组成:margin + border + padding + content */
            /* content=width * height */
            /* 1.四个成员均具有自身独立显示区域 不相互影响(视觉会相互影响)*/
            /* 2.margin/padding 外边距/内边距 控制布局 */
            /* 3.border 控制边框 */
            /* 4.content控制内容 */
    
            /* padding */
            /* 与content共用背景颜色 */
    
            /* content */
            /* 内容显示区域 */
            /* 红色区域 120 * 120  */
            /* content区域 100 * 100 =》 内容显示区域 */
    
            /* 值设置 */
            .box{
                /* 控制四个方位 */
                /* margin:20px;
                padding:30px; */
    
                /* 第一个值控制上下 第二个值控制左右 */
                /* margin:10px 20px;
                padding:30px 40px; */
                
                /* 第一个值控制上  第二个值控制左右 第三个值控制下 */
                /* margin: 10px 15px 20px ;
                padding:30px 40px 50px; */
                
                /* 上 右 下 左 */
                margin:10px 20px 30px 40px;
                padding:15px 25px 35px 45px;
                /* 总结 */
                /* 1.规定起始 2.顺时针 3. 不足找对面 */
            }
            /* 边框 */
            .box{
                border- 10px;
                /* transparent 透明 会透出背景颜色 */
                border-color:transparent;
                /* solid 实线 dotted点状线 dotted虚线*/
                border-style:solid;
                /* 整体设置 顺序可以任意调换*/
                border:5px solid orange;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>
    

    边界圆角代码示例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>边界圆角</title>
        <style type="text/css">
            .box{
                 200px;
                height:200px;
                background-color:orange;
            }
            /* 单角设置 */
            .box{
                /* 一个固定值:横纵 */
                border-top-left-radius:100px;
                /* border-bottom-left-radius:100px;
                border-top-right-radius:100px;
                border-bottom-right-radius:100px; */
                /* 两个固定值:横  纵*/
                border-top-left-radius:100px 50px;
                /* 百分比赋值 */
                border-top-left-radius:50%;
            }
            /* 整体赋值 */
            .box{
                /* 不分方位(不分横纵) */
                /* 左上为第一个角,顺时针,不足找对角 */
                /* 和刚才的margin padding 一样 */
                /* border-radius:30px; */
    
                /* 区分横纵 */
                /* 1.前控制横向,后控制纵向 */
                /* 2.横向又可以分为1,2,3,4个值,纵向一样 */
                border-radius:10px 100px 50px/50px;
                /* 左上横10 右上横100 右下横50 左下横100px 纵全部为50 */
                /* 最多可以赋值8个值 */
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>
    
  • 相关阅读:
    什么是Code Review
    支撑5亿用户、1.5亿活跃用户的Twitter最新架构详解及相关实现
    shell的数组操作
    CDN(内容分发网络)技术原理
    云计算服务模型,第 3 部分: 软件即服务(PaaS)
    Mongodb
    360的开源项目
    用linux mail命令发送邮件[Linux]
    BZOJ2761:[JLOI2011]不重复数字(map)
    BZOJ1821:[JSOI2010]部落划分(并查集,二分)
  • 原文地址:https://www.cnblogs.com/layerluo/p/9688344.html
Copyright © 2020-2023  润新知