HTML盒子模型
发布网友
发布时间：2022-04-22 17:21
共3个回答
懂视网
时间：2022-04-20 14:51
1.1. 盒的内容区的尺寸— content width和content height —取决于几个因素：
--生成该盒的元素是否设置了'width'或'height'属性。
--该盒是否包含文本以及其它盒。
--该盒是不是表格等等。
1.2. 盒的背景色
--内边距和边框区域的背景样式由生成（该盒的）元素的'background'属性来指定。外边距背景总是透明的
2. 外边距属性： 'margin-top'，'margin-right'，'margin-bottom'，'margin-left'和'margin'
2.1. 外边距属性指定了盒的外边距区的宽度
--'margin'简写属性一次性设置四周的外边距，而其它外边距属性只设置它们各侧的。这些属性适用于所有元素，但非替换的行内元素上的垂直margin将不会产生任何效果
2.2. <margin-width>值类型，可以取下列值之一：
--<length> 指定一个固定宽度 --<percentage> 百分比根据生成盒的包含块的width来计算。注意，这一点对于'margin-top'和'margin-bottom'也适用。如果包含块的宽度取决于该元素，那么产生的布局在CSS 2.1是未定义的 --auto --margin属性允许负值，但可能存在具体实现限制
2.3. 'margin-top', 'margin-bottom'
'margin-top', 'margin-bottom' Value: <margin-width> | inherit Initial: 0 Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用） Inherited: no Percentages: 参照包含块的宽度 Media: visual Computed value: 指定的百分比或者绝对长度
这两个属性对非替换的行内元素无效
2.4. 'margin-right', 'margin-left'
'margin-right', 'margin-left' Value: <margin-width> | inherit Initial: 0 Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用） Inherited: no Percentages: 参照包含块的宽度 Media: visual Computed value: 指定的百分比或者绝对长度
2.5. 'margin'
'margin'
Value: <margin-width>{1,4} | inherit
Initial: 见单独的各个属性
Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited: no
Percentages: 参照包含块的宽度
Media: visual
Computed value: 见单独的各个属性3. 合并外边距
相邻的垂直外边距会合并，除了：
----根元素盒的margin不合并
----如果一个带有间隙（clearance 译注：是指clear属性导致元素位置移动形成的间隙）的元素的上外边距与下外边距相邻，它的外边距会和紧挨着的兄弟（元素）的相邻外边距合并，但合并后不会再和父级块的下外边距合并
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
sublime怎样快速的创建html头部代码
css里有哪些长度单位
CSS( Cascading Style Sheets )集合
热心网友
时间：2022-04-20 11:59
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head></head>
<style>
body{font-family: Microsoft YaHei;font-size:14px;background-color:#fff;}
*{padding: 0;margin: 0;}
ul,ol{list-style: none;}
.box{width: 230px;height: 150px;border: 1px solid #999;margin: 30px;}
.title{
height: 43px;line-height: 43px;font-size: 16px;padding-left: 10px;border-bottom:1px dotted #000;font-weight: normal;color: #666;
background: -webkit-linear-gradient(#ccf, #fff); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#ccf, #fff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#ccf, #fff); /* Firefox 3.6 - 15 */
background: linear-gradient(#ccf, #fff); /* 标准的语法（必须放在最后） */
}
.list{margin: 5px 0;}
.list li{height: 26px;font-size: 12px;color: #666;padding: 0 26px;cursor: pointer;}
.list li:hover{color: #f00;}
</style>
<body>
<div class="box">
<h4 class="title">京东快报</h4>
<ul class="list">
<li>海飞丝去屑又去油</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
</body>
</html>
看一下，符合你的要求不？还有什么疑问追问，没有请采纳
热心网友
时间：2022-04-20 13:17
追答帮你画页面？我只写原生js
