美文网首页
CSS盒模型

CSS盒模型

作者: 盖被吹空调 | 来源:发表于2016-05-25 17:23 被阅读0次

盒模型包括哪些属性

  • content:width和height表示内容的宽高
  • padding:内边距
  • border:边框
  • margin:外边距
    具体参照图片:


    盒模型.JPG

另外早期IE6、IE7版本以及在怪异模式下,IE也使用“IE盒模型”:


IE盒模型.JPG

两者的区别是:
W3C标准盒模型中padding、border所占的空间不在width、height范围内而IE的盒模型width包括content尺寸+padding+border

padding和margin的主要写法:

padding-bottom: 50px;
/*下内边距为50px*/
padding: 20px;
/*上下左右内边距都为20px*/
margin: 5px 10px;
/*上下外边距为5px,左右外边距为10px*/
margin: 1px 2px 3px 4px;
/*外边距上1px右2px下3px左4px*/

知识点margin:0 auto;可以使盒子在浏览器中显示居中效果

相关文章

  • 6.3盒模式

    盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...

  • 盒模型

    什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可以设置宽...

  • CSS盒模型

    CSS盒模型的认识 标准模型 和 IE模型 CSS盒模型包括content,padding,border,marg...

  • Css盒模型以及Bfc的应用场景

    CSS盒模型: 一 基本概念: 分为标准模型+IE模型。 二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒...

  • CSS 盒模型总结

    概念 CSS盒模型 包含:content padding border margin 类型 CSS盒模型分为 标准...

  • HTML/CSS 04-css盒模型

    css盒模型的组成部分,css margin,css padding,css盒子的实际大小 目录: 一、盒模型的组...

  • html+css 12

    开篇十二章 1、css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型,...

  • 1.CSS盒模型

    css盒模型 css中,Box Model叫盒子模型;盒模型规定了 元素内容(content)、内边距(paddi...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

  • CSS盒模型作业

    前言:本章主要讲CSS盒模型,CSS盒模型是CSS中most import 的一个概念,如果我们想学好CSS,那么...

网友评论

      本文标题:CSS盒模型

      本文链接:https://www.haomeiwen.com/subject/hxytdttx.html