用CSS+DIV时width的问题

  大概你没认真的看CSS盒子的解释

 CSS盒子占据面积的大小一共是边距(margin)+边框(border)+填白(padding)+宽度(width)。所以当你设置width:200px;border:1px xx xx;的时候,实际的这个DIV的width最大值还是200.只是DIV的实际占据页面的宽度是:1(左边框)+200(width)+1(右边框)=202所以这个DIV里面还有200的宽度可以容纳包含的DIV。当然如果里面的DIV宽度大于200,外面DIV定义的宽度就会失去效果。

 注意拉注意拉重点地方要回答你了如果设定padding:2px这个属性,按照正确的解释,DIV的宽度应该是:
1(左边框)+2(padding)+200(width)+2(padding)+1(右边框)=206

 上面当然算的是正确的解释,但是注意拉IE6.0不会按照CSS2的正确解释来算,IE的算法有时候会安正确解释算,大多时候IE会把padding算在width里面按照IE的算法上面的结果还会是202,因为IE大多时候认为padding是width的一部分。所以在IE下面这个div实际可以运用的width是200-2-2=196,但是其他浏览器DIV实际可以运用的width还是200

  这是IE6.0典型的hack(浏览器兼容性)。所以强留建议不到万不得已不要给DIV定义padding本人就在操作过程中见过IE最变态的解释,IE把我的第一个DIV按照正确解释运算DIV宽度把之后的另外一个DIV按照IE自己的方法(就是padding是width的一部分)。当时我2个DIV调用的同一个类。

附:如果又设置了margin:2px;则上述的宽度可计算为

CSS的规则: 2(margin-left)+1(border-left)+2(padding-left)+200(width)+2(padding-right)+1(border-right)+2(margin-right)=210

IE6.0以前的版本:  2(margin-left)+200(width)+2(margin-right)=204

IE6.0:  2(margin-left)+1(border-left)+200(width)+1(border-right)+2(margin-right)=206

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 首先,我们需要了解什么是CSSDIVCSS是层叠样式表,是一种样式语言,用于描述HTML或XML文档的呈现。DIV是HTML中的一个标签,用于定义文档中的一个区域或块。 下面是一个简单的网页示例,使用CSSDIV进行布局和样式设置。 ``` <!DOCTYPE html> <html> <head> <title>My Webpage</title> <style type="text/css"> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #008080; color: #fff; padding: 20px; text-align: center; } nav { background-color: #444; color: #fff; padding: 10px; text-align: center; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin: 0 10px; } nav ul li a { color: #fff; text-decoration: none; padding: 5px 10px; border-radius: 5px; background-color: #008080; } section { padding: 20px; margin: 10px; background-color: #fff; box-shadow: 0 0 5px #aaa; } footer { background-color: #444; color: #fff; padding: 10px; text-align: center; } </style> </head> <body> <header> <h1>My Webpage</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section> <h2>Welcome to my webpage!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod nisi eget neque fermentum, ac sagittis nunc aliquet. </p> </section> <footer> <p>Copyright © 2021 My Webpage</p> </footer> </body> </html> ``` 在这个示例中,我们使用了CSS来设置整个网页的样式,包括字体、背景色、边距、内边距等。利用DIV标签,我们将整个网页分为了头部(header)、导航栏(nav)、内容(section)和底部(footer)四个区域,并分别设置了它们的样式。 当然,这只是一个简单示例,实际网页的布局和样式设置可能更加复杂。但是,掌握了CSSDIV的基本用法,我们就可以通过不断练习和实践,来制作出更加漂亮、实用的网页。 ### 回答2: 使用CSSDIV来构建网页是一种常见和常用的方法。CSS(层叠样式表)用于控制网页的样式和布局,而DIV(‘division’的缩写,即‘区块’)则用于将网页分割成不同的块状区域。 首先,通过HTML创建网页的基本结构,然后使用DIV元素来划分不同的区域。例如,可以使用一个主DIV作为整个页面的容器,然后在主DIV内部再嵌套其他的DIV,分别来表示页眉、导航栏、内容区域和页脚等。通过设置DIV的样式属性,可以控制它们的大小、位置、边距、背景颜色和文本样式等。 接下来,使用CSS来定义这些DIV的样式。可以通过CSS选择器来选中具体的DIV元素,然后对它们应用样式。例如,可以使用类选择器(class selector)来为特定的DIV指定样式,也可以使用ID选择器来为唯一的DIV元素添加样式。 在CSS中,还可以使用盒模型来控制DIV的大小和边距。通过设置width(宽度)、height(高度)、margin(外边距)、padding(内边距)等属性,可以实现对DIV的精确控制。 此外,还可以使用CSS的浮动(float)属性来实现页面的多列布局。通过将DIV浮动到指定的方向(左或右),可以使其他DIV元素环绕在其周围。 最后,还可以使用CSS的伪类(pseudo-class)和伪元素(pseudo-element)来实现更多的效果,如悬停态、链接样式和内容插入等。 总之,使用CSSDIV制作网页可以实现丰富多样的页面布局和样式效果。通过调整和组合不同的CSS属性和选择器,可以轻松地实现个性化的网页设计。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值