css盒模型的border

lunabird 2015-06-12 08:21:48

这是代码：



<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8" /> 

<title>Stylin' with CSS - Figure 3.4 Box Padding</title>

<style>

	p {font:16px helvetica, sans-serif; width:220px; border:2px solid red; background-color:#caebff;}

</style>

</head>



<body>

    <p>Here is a short paragraph of text. Without any padding, the text can touch the border on all four sides, which gives the layout a very crowded appearance. It's not something you really want to read.</p>

    

   

    

</body>

</html>

设置的 border:2px，但是在火狐浏览器中显示盒模型的时候是这样的？

为什么文本的width设置成220变成222了，还有border设置的2px变成1px了？

...全文

143 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

lunabird 2015-06-12

打赏
举报

回复

在chorme中是正确的，为什么火狐不对呢？

KK3K2005 2015-06-12

打赏
举报

回复

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 你大概是想要这个

不写的情况下，盒子的box-sizing属性值默认是: content-box; box-sizing: content-box; - - - 计算盒子大小 = 盒子的width + 内边距padding + 盒子边框border 所以普通盒子设置一定的宽度width后，再增加padding或border会使盒子变大，但我们经常不需要盒子被撑大，希望改变padding或border后，盒子大小不变。此时可以设置： box-sizing: border-box; - - - 盒子大小 = 盒子的width

在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与中的盒子又有点不同，这里的盒子是二维的。盒子的组成一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三

盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^，希望对初学者有用。一、css盒子模型概念CSS css盒子模型又称框模型 (Box Model) ，包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图：图中最内部的框是元素的实际内...

它包括边距，边框，填充和实际内容，所有的HTML元素都可以被看作一个盒子，并且盒子模型允许我们在其他元素和周围元素边框之间的空间放元素。例如border-top-style表示上边框的样式，可以是实线（solid），圆点（dotted）,虚线（dashed）等等。例如border-top-color表示上边框的颜色，也可调整其他几个方向的（bottom下，left左，right右）而padding和margin的用法相似，只不过padding是调整方块内的的边距，而margin调整整个布局的边距。...

在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与中的盒子又有点不同，这里的盒子是二维的。盒子的组成一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding...

61,115

社区成员

60,728

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章