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嵌套制作网页块状部分案例

html文件 css文件 *{ margin:...
  • qq_24928451
  • qq_24928451
  • 2015年04月26日 22:12
  • 655

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

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

CSS学习笔记--Div+Css布局(div+span以及盒模型)

1.DIV与SPAN 1.1介绍 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 ...
  • Evan_Leung
  • Evan_Leung
  • 2016年07月31日 01:09
  • 1500

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

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

正常盒模型和怪异盒模型

首先大概说说正常盒模型和怪异盒模型的区别: 1.用途:正常盒模型主要用于PC端,怪异盒模型主要用于手机端。 2.原理:正常盒模型的大小是由内到外的,由内部决定外部的大小;而怪异盒模型是由外而内的。...
  • gggg5643
  • gggg5643
  • 2017年04月16日 20:36
  • 621

W3C盒模型和IE盒模型的区别

盒模型在初学css的时候就会接触到,其实很容易理解,这里也不多废话,但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成,也要更多的了解如何在不同情况下利...
  • u011366705
  • u011366705
  • 2015年06月29日 10:42
  • 7636

CSS中的盒模型分类

CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。 大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。 怪异模式是“部分浏览器在支持W3...
  • jingtian678
  • jingtian678
  • 2017年07月19日 22:32
  • 152

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

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

弹性盒模型的实际应用

现在是凌晨4.45分,刚才解决了一个棘手的问题,乘着这股余劲,我要把刚才查阅的、测试的以及平时不怎么关注的知识点再理一遍。今天收获真的大。 1、css清除浮动。父元素如果没有设置高度,将默认由子...
  • liuxuan12417
  • liuxuan12417
  • 2016年12月06日 07:04
  • 780

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

弹性盒布局模型是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种 更加高效的方式来对容器中的 条目 进行 布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局...
  • h15882065951
  • h15882065951
  • 2017年02月21日 21:47
  • 352
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div+css盒模型
举报原因:
原因补充:

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