• CSS基础(四):盒模型


    CSS盒模型

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

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

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

     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; }

    作者: ForEvErNoME
    出处: http://www.cnblogs.com/ForEvErNoME/
    欢迎转载或分享,但请务必声明文章出处。如果文章对您有帮助,希望你能 推荐关注
     
     
     
     
     
  • 相关阅读:
    收藏文章整理
    关于java里的SimpleDateFormat使用
    手写MQ框架(四)-使用netty改造梳理
    JDK8中的ConcurrentHashMap源码
    JDK8中的HashMap源码
    手写MQ框架(三)-客户端实现
    手写MQ框架(二)-服务端实现
    Vue.js入门
    Tomcat启动找不到项目依赖jar的解决方式
    java课堂 动手动脑2
  • 原文地址:https://www.cnblogs.com/ForEvErNoME/p/3333209.html
Copyright © 2020-2023  润新知