您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5

CSS盒模型的概念及组成 content padding border margin

胜于蓝2019-07-30【CSS3|Html5】人已围观

简介嗯...ps随便大概画了一个参考图,色彩有点...见谅CSS盒模型的概念及组成 css盒模型概念——css盒模型是css的基石,每个html元素都可以看作是一个盒模型。 css

共享博客 css盒模型0Df胜于蓝|优秀个人博客

嗯...ps随便大概画了一个参考图,色彩有点...见谅0Df胜于蓝|优秀个人博客

CSS盒模型的概念及组成0Df胜于蓝|优秀个人博客

    css盒模型概念——css盒模型是css的基石,每个html元素都可以看作是一个盒模型。0Df胜于蓝|优秀个人博客

    css盒模型的组成——内容(content)、补白或填充(padding)、边框(border)、外边距(margin)0Df胜于蓝|优秀个人博客

 0Df胜于蓝|优秀个人博客

1.内容(content)0Df胜于蓝|优秀个人博客

    语法:0Df胜于蓝|优秀个人博客

 0Df胜于蓝|优秀个人博客

width: 数值+单位;
height: 数值+单位;
    eg:

 0Df胜于蓝|优秀个人博客

.box{
    width: 300px;
    height: 300px;
}
2.补白或填充( content 和 border 之间的距离)

①设置一个值0Df胜于蓝|优秀个人博客

    padding: 20px; (上下左右均为20px)0Df胜于蓝|优秀个人博客

②设置两个值0Df胜于蓝|优秀个人博客

    padding: 15px 25px; (上下为15px、左右为25px)0Df胜于蓝|优秀个人博客

③设置三个值0Df胜于蓝|优秀个人博客

    padding: 10px 5px 20px; (上下为10px、左右为5px、下为20px)0Df胜于蓝|优秀个人博客

④设置四个值(顺时针方向0Df胜于蓝|优秀个人博客

    padding: 20px 10px 5px 0px; (上为20px、右为10px、下为5px、左为0px)0Df胜于蓝|优秀个人博客

⑤还可以单独设置某一个方向的padding值0Df胜于蓝|优秀个人博客

    padding-left: 20px; (left 还可以设置为 top、bottom、right)0Df胜于蓝|优秀个人博客

注:0Df胜于蓝|优秀个人博客

    当给元素设置了padding值后,要在原来的宽高上减去设置的padding值,保证总宽高不变;0Df胜于蓝|优秀个人博客

    当需要调整子元素在父元素中的位置关系时,给父元素设置padding属性;0Df胜于蓝|优秀个人博客

    padding不允许设置负值;0Df胜于蓝|优秀个人博客

    背景可以延伸到padding区域。0Df胜于蓝|优秀个人博客

 0Df胜于蓝|优秀个人博客

3.边框(设置 padding和margin 之间的部分)0Df胜于蓝|优秀个人博客

    语法:0Df胜于蓝|优秀个人博客

        ①边框类型0Df胜于蓝|优秀个人博客

 0Df胜于蓝|优秀个人博客

border-style: solid(实线) | dashed (虚线) | dotted (点线) | double (双线);
        ②边框颜色

 0Df胜于蓝|优秀个人博客

border-color: 颜色值;
        ③边框宽度

 0Df胜于蓝|优秀个人博客

border-width: 数值+单位;
        ④border简写方式

 0Df胜于蓝|优秀个人博客

border: 宽度 线型 颜色;
        eg:

 0Df胜于蓝|优秀个人博客

border: 5px solid black;
        ⑤还可以单独设置某一方向的边框

 0Df胜于蓝|优秀个人博客

border-top: 2px solid black;
/*注: top可更改为 bottom、right、left*/
        注:

            背景可以延伸到border区域,当边框为实线时会遮挡住背景色0Df胜于蓝|优秀个人博客

            ③当元素设置了border时,要在原来宽高的基础上减去设置的border值,保证总宽高不变0Df胜于蓝|优秀个人博客

 0Df胜于蓝|优秀个人博客

4.外边距0Df胜于蓝|优秀个人博客

    语法:0Df胜于蓝|优秀个人博客

 0Df胜于蓝|优秀个人博客

margin: 数值+单位;
    注:margin属性值的设置方法同padding

        背景不能延伸到margin区域0Df胜于蓝|优秀个人博客

        margin可以设置负值0Df胜于蓝|优秀个人博客

        当需要调整元素之间的位置关系或子元素在父元素中的位置关系时,给本元素添加margin属性0Df胜于蓝|优秀个人博客

 0Df胜于蓝|优秀个人博客

注:0Df胜于蓝|优秀个人博客

    标准盒模型的总宽高 = width + 左右padding + 左右border + 左右margin0Df胜于蓝|优秀个人博客

    标准盒模型的总高度 = height + 上下padding + 上下border + 上下margin0Df胜于蓝|优秀个人博客

    0Df胜于蓝|优秀个人博客

    标准盒模型 = content + padding + border + margin0Df胜于蓝|优秀个人博客

    怪异盒模型 = content + margin0Df胜于蓝|优秀个人博客

    注: 当网页没有添加文档声明时,就会触发某些浏览器的怪异模式0Df胜于蓝|优秀个人博客

Tags:

很赞哦! ()

文章评论

当前时间

合作加盟

  • 快钱POSS机
  • 费率:0.038%(刷1万=38元手续费)
  • 单笔最高刷卡金额:5万
  • 单月最高刷卡金额:600万

快钱代理公告

  • 凡事扫码代理必须实名认证
  • 实名认证后才可拉进代理微信群
  • 代理微信群有相关活动政策等

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计986篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们