div+css盒模型

原创 2012年03月22日 22:24:05

盒模型可以说是div+css中的精髓了

我们平时设置的div{width:200px;height:200px} 属性时,设置的都是content的宽和高,当你做站时开始确定好了宽高,写了进去。

后期增大margin或padding的时候,你的宽高就会增大,这样可能挤破盒子,把别的地方内容挤走。

这里有另一种思想,即盒嵌套模型。外部一个div设置宽高,内部一个div写内容,内部div不用写宽高,因为是块级元素,他会自动填充满这个父盒子。然后设置宽高的时候仅需在内部盒中设置即可,这样你可以随便更改了。

<div id="outer_box">
	<div id="inner_box">
        <h4>An h4 heading</h4>
        <p>The heading and this paragraph sit in a column with a width of 170px. Because they are block level elements, their boxes expand horizontally to fill their containing element. Adding 10 pixels of padding to the container makes the container wider by 20px.</p>
	</div>
</div>

div#outer_box {width:170px; background:#FCC;}
div#inner_box {padding:10px;}



相关文章推荐

css布局之div + span 以及盒模型

本篇主要介绍div + span 以及盒模型的使用。 span:内联元素----包裹其内容。     div是块级元素----占用整行。  盒模型:相当于容器。 Div+C...

《CSS+DIV网页样式与布局从入门到精通》第九章学习笔记(一)盒模型

这是我自己总结的清华大学出版社《CSS+DIV网页样式与布局从入门到精通》第九章第一节盒模型的学习笔记,就是按照顺序写的,没有太多条理,如果要看的话建议对照着这本书看,都是一些小细节,也没什么特深奥的...
  • Jjwxyz
  • Jjwxyz
  • 2016年08月19日 14:15
  • 470

css盒模型div嵌套制作网页块状部分案例

html文件 css文件 *{ margin:...

DIV+CSS基础教程:盒模型、块状元素与内联元素、CSS选择器

课程关键词:盒模型、块状元素与内联元素、CSS选择器 引用: 【例子】 要求: 1)宽度、高度均是200像素; 2)颜色为红色#900; 自己做做,看看能不能作出来?先不要...

CSS+DIV-盒子模型示例.zip

  • 2013年11月03日 17:17
  • 183KB
  • 下载

DIV+CSS基础教程:盒子模型

盒子模型,是XHTML+CSS布局页面中的核心!要想学会用CSS布局页面,就首先要理解盒子模型! 什么是盒子模型?对于初学者来说,很难说出来,但是对于生活中的盒子大家熟悉吧,哈哈,这里提到的盒子...

DIV+CSS两种盒子模型

利用CSS来布局页面布局DIV有点逻辑性! 重点理解盒子模型, 标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考! 最后就是兼容问题了,在实践中自然就有经验了!这...

HTML基础学习-20- div css容器 盒子模型学习3

HTML基础学习-20- div css容器 盒子模型学习2

WEB前端学习 Day 1(DIV+盒子模型+CSS文本+实例)

关于html,用得最多的就是DIV。所以先把DIV学好,搞懂他的一些特性。其次,文字在一个网页里面也是很重要的,所以先学CSS文本。从html下手,那么,DIV是什么? DIV就是一个块,在DIV里...
  • sdanfy
  • sdanfy
  • 2015年10月22日 01:20
  • 1788

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

在辨析两种盒子模型之前,先简单说明一下什么叫盒子模型。 原理: 先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), C...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div+css盒模型
举报原因:
原因补充:

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