网页制作盒子模型代码（网页制作盒子模型代码大全）
今天给各位分享网页制作盒子模型代码的知识，其中也会对网页制作盒子模型代码大全进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
CSSDIV写盒子模型图
网页盒子模型存在两种：
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
盒子模型示例代码
--定义样式 border-style:
!DOCTYPE html
html
head
meta charset="utf-8"
title菜鸟教程(runoob.com)/title
style type="text/css"
.block {
width: 200px;
height：200px;
padding: 30px;
background-color: red;
border-style:solid;
border-width:10px;
border-color:green;
//border:10px solid yellow;
//border-radius: 20px;
//margin:auto;
}
/style
/head
body
div class="block"border/div
/body
/html
--兄弟元素margin合并
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
style type="text/css"
body {
background: pink;
}
.div {
//overflow: hidden;
//margin: 0 auto;
width: 300px;
height: 600px;
background: #aaa;
}
.div1 {
width: 200px;
height: 200px;
background: red;
//margin: 50px 0px;
//float: left;
}
.div2 {
width: 200px;
background: green;
//margin: 50px 0px;
height: 200px;
//float: left;
}
/style
/head
body
div class="div"
div class="div1"/div
div class="div2"/div
/div
/body
/html
----父子元素margin合并
!DOCTYPE html
html
head
meta charset="utf-8"
title菜鸟教程(runoob.com)/title
style type="text/css"
body {
background: pink;
}
.div1 {
//margin-top: 20px;
width: 450px;
height: 450px;
background: #aaa;
//overflow:hidden;
//border:1px solid red;
}
.div2 {
width: 200px;
height: 200px;
background: red;
//margin-top: 50px;
}
/style
/head
body
div class="div1"
div class="div2"/div
/div
/body
/html
--box-sizing
!DOCTYPE html
html
head
meta charset="utf-8"
title菜鸟教程(runoob.com)/title
style type="text/css"
.group {
/* background-color: blue; */
overflow: hidden;
}
.block {
width: 33.33%;
padding: 20px;
float: left;
//box-sizing: border-box ;
}
.red {
background-color: red;
//box-sizing: conten-box ;
//overflow: hidden;
//outline:#00FF00 dotted thick;
}
.green {
background-color: green;
}
.gray {
background-color: gray;
//box-sizing: border-box ;
}
/style
/head
body
div class="group"
div class="block red"1/div
div class="block green"2/div
div class="block gray"3/div
/div
/body
/html
--盒子显示（display）类型
!DOCTYPE html
html
head
meta charset="utf-8"
title菜鸟教程(runoob.com)/title
style
.background{
background-color:#F60;
margin-bottom:5px;
margin-left:5px;
height:50Px;
}
.display1{
display:block;
}
.display2{
display:inline ;
//display:inline-block;
}
/style
div class="background "Div默认为 block/div
div class="background "Div默认为 block/div
div class="background "Div默认为 block/div
div class="background display2"修改为 inline/div
div class="background display2"修改为 inline/div
div class="background display2"修改为 inline/div
span class="background display1"加了block属性/span
span class="background display1"加了block属性/span
span class="background display1"加了block属性/span
span class="background"没加block属性/span
span class="background"没加block属性/span
span class="background"没加block属性/span
/body
/html
网页中DIV+CSS盒模型是怎么组成的？
css盒模型是重点。如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学 习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS 排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。
那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。
我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。
所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方
这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。
关于网页制作盒子模型代码和网页制作盒子模型代码大全的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
陕ICP备2021009819号