CSS盒模型

转载 2016年05月31日 00:15:58

http://my.oschina.net/sheila/blog/384806

http://wenku.baidu.com/link?url=WjgV8wCAOy4wSAkIc0mD3mVAHnKE8-P0ez23ls8ISMsJP75ZMFIHJN_Y9sG4TB3cTC5Y9vPppw_JjsAQcQJ6XPH6GmQdx0MKQVSnzNmLaM3


当我们在css中设计一个块级元素的width和height属性时比如.box{width :100px; height:100px}时,其中的width 和height仅仅是对content部分设置的

在 CSS 中,width 和 height 指的是内容区域(content)的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

背景区域为 Content+Padding

一个div中background-color 和background-image 的区域为width+padding



<style type="text/css">
.testdiv1 {
    background-color:#F00;
    width:200px;
    height:100px;
    
    padding:100px;
    margin:0px;
    
    border-style:solid;
    border-color:#0F0;
    border-width:40px;
}
.testdiv2 {
    background-color:#F00;
    width:200px;
    height:100px;
    
    padding:200px;
    margin:0px;
    
    border-style:solid;
    border-color:#0F0;
    border-width:40px;
}
.background{
    background-image: url(pic/bird.jpg);
    background-size:100% 100%;
}
.floatleft{
    float:left;
}
</style>
</head>
<!--背景红色-->
<!--边框绿色-->
<body >

    <div class="testdiv1 floatleft">中文会自动换行中文会自动换行中文会自动换行中文会自动换行</div>
   <div style="width:200px; height:100px; float:left"></div>
    <div class="testdiv1 background floatleft">中文会自动换行中文会自动换行中文会自动换行中文会自动换行</div>
    
    <div style="clear:both"></div>
    
<div class="testdiv2 floatleft">中文会自动换行中文会自动换行中文会自动换行中文会自动换行</div>
   <div style="width:200px; height:100px; float:left"></div>
<div class="testdiv2 background floatleft">中文会自动换行中文会自动换行中文会自动换行中文会自动换行</div>
    
</body>

CSS-标准盒模型 & 怪异盒模型

CSS-标准盒模型 & 怪异盒模型
  • Dong_PT
  • Dong_PT
  • 2016年04月29日 14:01
  • 15439

前端面试题之CSS盒模型

前端面试对于CSS这块不可或缺的一个考察点就是盒模型(BOX),通过对BOX的提问就可以了解你在CSS知识方面的掌握程度。本文主要介绍CSS中的盒模型在面试中可能会问到的相关问题和知识点,不足指出请指...
  • m0_37585915
  • m0_37585915
  • 2017年11月10日 17:17
  • 234

DIV+CSS两种盒子模型(W3C盒子与IE盒子)

在辨析两种盒子模型之前,先简单说明一下什么叫盒子模型。 原理: 先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), C...
  • u012745215
  • u012745215
  • 2014年07月25日 11:18
  • 9802

CSS属性之弹性盒模型(新)

弹性盒布局模型是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种 更加高效的方式来对容器中的 条目 进行 布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局...
  • h15882065951
  • h15882065951
  • 2017年02月21日 21:47
  • 308

css3之几种盒模型

昨晚回去花了点时间,系统的学习了一下盒模型,现总结如下。 1、盒的基本类型: 在css3中使用display属性来定义盒的类型,总体来说盒分为block类型和inline类型。 我们之前所学的d...
  • u012859748
  • u012859748
  • 2016年09月23日 10:43
  • 2152

CSS--两种盒子模型以及border属性

盒模型(box model) 概述: margin(-TopRightBottomLeft), padding(-TRBL),border(TRBL+style|color|width), box...
  • cat_foursi
  • cat_foursi
  • 2017年05月04日 22:05
  • 1624

CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性

今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理。 先不考虑css3的情况,盒模型一共有两种模式,一种是标准模式,另一种就是...
  • quguang65265
  • quguang65265
  • 2016年03月24日 12:04
  • 994

深入理解盒子模型——CSS 盒模型Block box与Line box

在上一篇想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用,接下来就详细的介绍两种盒子的具体细节。   Block Box   display :...
  • ziminghuohua
  • ziminghuohua
  • 2017年05月28日 21:29
  • 432

css盒模型和块级、行内元素深入理解

内联元素(行内元素) 内联元素(inline element) * a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi over...
  • pql925
  • pql925
  • 2016年07月26日 15:30
  • 1878

CSS中的盒模型分类

CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。 大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。 怪异模式是“部分浏览器在支持W3...
  • jingtian678
  • jingtian678
  • 2017年07月19日 22:32
  • 104
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS盒模型
举报原因:
原因补充:

(最多只允许输入30个字)