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 条评论
登录 后参与评论

相关文章

来自专栏Android机动车

歌词显示控件的实现(下)——自定义View

在上篇文章中呢,分享了关于lrc歌词文件的解析方法,根据歌词文件格式,解析出对应实体类。但是,怎样才能让让自己的音乐播放器的歌词像网易云音乐一样,随音乐(歌词时...

8810
来自专栏十月梦想

box-sizing

        在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.

9420
来自专栏达摩兵的技术空间

css选择器攻略

很多小伙伴对css选择器表示不屑,觉得很简单没必要学习,其实你究竟了解多少呢?当面试官问你的时候,你能分出哪些是css3新增的选择器,他们兼容如何?又该如何处理...

10530
来自专栏前端知识分享

第2天:HTML常用标签

一、超链接a href:www.baidu.com(跳转页面);id名(锚点跳到相应div位置);01.rar(压缩包) target:_blank(新窗口打...

29510
来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

2.3K90
来自专栏lhyt前端之路

一点点css的基础原理总结0.前言1.包含块(CB)2.宽和高3.BFC4.行内元素5. 垂直方向的margin6.盒子模型

CSS属性非常多,如果说死记的话,是不容易的,我们了解他的原理,其他不常见的属性都是手到擒来

8220
来自专栏lgp20151222

脱离文档流两操作,float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行;

10320
来自专栏Micro_awake web

谈谈CSS中一些比较"偏门"的小知识 前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获!

前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获! 1.常见的浏览器...

20960
来自专栏企鹅号快讯

Web前端,认识css,css规格,伪类和伪元素的用法,代码详解!

认识 CSS — Cascading Style Sheets CSS的世界是神奇的。随着浏览器WEB标准的日趋统一,CSS在WEB世界中的扮演的角色也越来越重...

21360
来自专栏企鹅号快讯

Web前端知识体系精简——CSS 篇

css是用来对html进行修饰的一门语言。 1、选择器 css的选择器有很多种,常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(b...

24080

扫码关注云+社区

领取腾讯云代金券