专栏首页用户2442861的专栏CSS基础(四):盒模型

CSS基础(四):盒模型

CSS盒模型

HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。下图是W3C对于盒模型的描述图。

使用Firebug,可以轻松地查看到盒子的布局大小。

盒子本身的大小是这样计算的:

width: width + padding-left + padding-right + border-left + border-right

height: height + padding-top + padding-bottom + border-top + border-bottom

静态定位或相对定位的盒子

当放置一个块级元素于页面上时,并且不设置它的定位属性(relative,absolute,fixed),即position:static,或者设置了position:relative的情况下,块的宽度是延伸自动填充满它的父元素的宽度区域。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style type="text/css">
      .box1
        { 
            background:black;
            color:White;
            height:100px;
            padding:10px;
            border:20px solid Red;
            margin:30px;
        }
    </style>
  </head>
  <body>
    <h2>静态定位和相对定位的盒子</h2>
    <div class="box1">静态定位和相对定位的盒子</div>
  </body>
</html>

注意上面的盒子是没有声明宽度的,所以默认宽度为100%,padding 和 border 会向内推动,而不是向外扩展。

但是当声明宽度后,那么 padding 就会向外延展。

浮动和绝对定位的盒子

当设置浮动float元素和绝对定位元素,他们的结果却恰恰相反,他们会收缩以致包裹紧贴内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style type="text/css">
      .box1
        { 
            background:black;
            color:White;
            height:100px;
            padding:10px;
            border:20px solid Red;
            margin:30px;
            position:absolute;
        }
    </style>
  </head>
  <body>
    <h2>浮动和绝对定位的盒子</h2>
    <div class="box1">浮动和绝对定位的盒子</div>
  </body>
</html>

亲眼目睹一下

想看看组成页面的每个单独的“盒子”吗?试着把这行代码暂时放入样式表:

* { border: 1px solid red !important; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • NumPy简明教程(二、数组1)

    http://blog.csdn.net/sunny2038/article/details/9002531

    bear_fish
  • win7安装Qt4.8.5 For Windows 最详细的教程,附带所有安装文件-- 转自zgj_today的csdn空间

    http://m.blog.csdn.net/blog/yhc13429826359/37735865

    bear_fish
  • knn K近邻算法python实现

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/d...

    bear_fish
  • 14.如何为Cloudera Manager集成OpenLDAP认证

    Fayson在前面一系列文章中介绍了OpenLDAP的安装及与CDH集群中各个组件的集成,包括《1.如何在RedHat7上安装OpenLDA并配置客户端》、《2...

    Fayson
  • Golang捕获panic堆栈信息的优雅姿势 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    henrylee2cn
  • 海量之道之弱联网优化

    用户1263954
  • Android UsageStatsService(应用使用统计服务)的学习与调研

    一. 简介 UsageStatsService是一个系统服务,其主要通过AMS等,来监测并记录各个应用的使用数据,如上次调用com.android.settin...

    宋凯伦
  • Android UsageStatsService(应用使用统计服务)的学习与调研

    UsageStatsService是一个系统服务,其主要通过AMS等,来监测并记录各个应用的使用数据,如上次调用com.android.settings的时间等...

    宋凯伦
  • 如果你是前端工程师,把你的网站或者你知道的网站加进来吧

    https://segmentfault.com/a/1190000004847948

    前端博客 : alili.tech
  • Gatsby入门指南—支持Markdown(1)

    前端大彬哥

扫码关注云+社区

领取腾讯云代金券