CSS盒子模型(css盒子模型的理解)

短命女 2023-09-26 13:53 85阅读 0赞

## CSS+DIV写盒子模型图 ##

网页盒子模型存在两种：

1：标准W3C盒子模型； 2：IE盒子模型(IE浏览器默认的模型)。

在两种不同模型网页里，定义了相同CSS属性的元素显示效果是不一样的，下面就用公式来区分这两种不同的盒子模型。

1：标准W3C盒子模型

宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)

高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)

2： IE盒子模型

宽=width+(border-left)+(border-right)

高=height+(border-top)+(border-bottom)

该模型是IE浏览器默认的盒子模型，当然也可以对其进行更改，在页面最上方加如下代码：

1

\#div \{

background-color:\#CCCCCC;/\*这是div背景色！可以不要~这里仅便于你区别\*/

margin-top: 20px;/\*div离页面面顶部的距离为20像素\*/

margin-left: 50px;/\*div离页面面左端的距离为50像素\*/

/\*这里若设置了顶部和左部就不用设置右和下了~因为2个位置就能把div定位

margin-right: 30px;

margin-bottom: 40px;\*/

border:\#0099FF 10px solid;/\*div边框为10像素\*/

padding-top: 20px;/\*内容与div边框顶部的距离为20像素！这里“内容”的位置=20+10+20的像素\*/

padding-left: 90px;/\*内容与div边框左边的距离为90像素！这里“内容”的位置=50+10+90的像素\*/

padding-right: 30px;/\*同上\*/

padding-bottom: 50px;/\*同上\*/

此处显示 id "div" 的内容这些内容！其实是显示在div的center里！是个隐藏的框框~需要去理解

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "">

<html xmlns="">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

\#d1\{ width:200px; height:150px; border:10px \#fc0 solid ;\}

\#d2\{ width:200px; height:150px; margin:0px 0 0 0px; border-left:2px \#999 solid;border-top:2px \#999 solid;\}

</style>

</head>

<body>

<div id="d1"><div id="d2"></div></div>

</body>

</html>

你测试下吧

实现你那种效果的话 需要在css里设置的更准确些 毕竟线条的样式很多

\#box \{height:50px;width:50px;border:1px solid \#dedede;\}

这就是一个宽高50像素,1像素边框的盒子了..

![CSS盒子模型(css盒子模型的理解)\_CSS盒子模型(css盒子模型的理解)][CSS_css_CSS_css]

## css盒模型主要包括哪几个css样式 ##

它有：外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性；

其中：margin-right,maring-left,margin-top,margin-bottom

padding-right,padding-left,padding-top,padding-bottom围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。

也可以通过后加left right top bottom分别添加。

如果需要做居中择使用auto即可

[CSS_css_CSS_css]: https://img0.baidu.com/it/u=3510838637,2347358059&fm=26&fmt=auto

发表评论取消回复

表情：

评论列表（有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS盒子模型(css盒子模型的理解)

CSS+DIV写盒子模型图网页盒子模型存在两种： 1：标准W3C盒子模型； 2：IE盒子模型(IE浏览器默认的模型)。在两种不同模型网页里，定义了相同CSS属性的

短命女/ 2023年09月26日 13:53/ 0 赞/ 86 阅读

相关 css盒子模型

浏览器中的元素都是一个个的盒子，每一个盒子都有特定的结构。块级元素和行级元素块级元素（block element）块级元素会独占一行，默认其宽度自动填满其

绝地灬酷狼/ 2022年09月21日 11:56/ 0 赞/ 41 阅读

相关 css盒子模型

1.盒子模型所有的html元素都可以看做盒子。 ![这里写图片描述][20160615161131029] 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左

叁歲伎倆/ 2022年09月21日 04:57/ 0 赞/ 31 阅读

相关【CSS】——盒子模型

前提　　在跟着牛腩老师学习前台制作的时候，觉的和在C/S制作的时候有很大的不同，因为之前的界面都是可视化的，都是通过拖拽创建的，而进入B/S阶段所有的控件都是通过代码来

客官°小女子只卖身不卖艺/ 2022年07月28日 01:04/ 0 赞/ 288 阅读

相关 css盒子模型

一般称IE8及其以上为w3c盒子模型，W3C 盒子模型的范围包括 `margin、border、padding、content`，并且 `content` 部分不包含其他部分。

不念不忘少年蓝@/ 2022年07月15日 08:48/ 0 赞/ 244 阅读

相关 css盒子模型

CSS盒子模型 ![Center][] 一个区块元素所占的空间总大小： X轴：margin-left + border-left + padding-left + w

今天药忘吃喽~/ 2022年06月11日 00:51/ 0 赞/ 326 阅读

相关 css_盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了

「爱情、让人受尽委屈。」/ 2022年05月25日 05:05/ 0 赞/ 298 阅读

相关 04-css盒子模型-彻底理解css盒子模型

第6章盒子模型 (一) 盒子模型【盒子套盒子】 l CSS将网页中的所有元素都看成一个盒子。 l 盒子模型属性：有边框、内边距和外边距。（还包括“元素内容本身”） 1)

浅浅的花香味﹌/ 2022年05月23日 10:08/ 0 赞/ 346 阅读

相关【CSS】盒子模型

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，

以你之姓@/ 2022年04月01日 02:40/ 0 赞/ 394 阅读

相关 css 盒子模型

span标签(行内标签)：为了设置单独的样式 div标签(块级标签): 用来布局,会将其中的子元素内容作为一个独立的整体而存在

客官°小女子只卖身不卖艺/ 2021年07月24日 14:14/ 0 赞/ 577 阅读