CSS 盒子模型

最新推荐文章于 2025-04-24 09:15:00 发布

原创最新推荐文章于 2025-04-24 09:15:00 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

前端之HTML CSS 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS盒子模型的概念及其组成部分，包括宽度、高度、边框、内边距和外边距的设置方法，并探讨了元素的显示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

- 盒子模型概念

- 高和宽设置

- 边框设置

- 内边距设置

- 外边距设置

- 盒子的计算

- 元素显示方式

（1）盒子模型概念

盒子模型用来“放”网页中的各种元素

内容，如文字、图片等，都可是盒子（DIV嵌套）

（2）宽度设置

width: 长度值 | 百分比 | auto

最大宽度：

max-width: 长度值 | 百分比 | auto

最小宽度：

min-width:长度值 | 百分比 | auto

max-width（height）与min-width（height）有兼容性问题，IE6 上不兼容这两种属性。

（3）高度设置

height：长度值 | 百分比 | auto

最大高度：

max-height: 长度值 | 百分比 | auto

最小高度：

min-height:长度值 | 百分比 | auto

（4）边框设置

- 边框宽度 border-width

- 边框颜色 border-color

- 边框样式 border-style

		.three{width: 150px;
			background-color: gray;
			border-width: medium;
			border-style: dotted;
			border-color: blue;
			}/* width: 10px/thin/medium/thick*/

可以给边框的上下左右分别设置：

border-[left | right | top | bottom]-color

border-[left | right | top | bottom]-width

border-[left | right | top | bottom]-style

边框缩写：

border: [宽度] | [样式] | [颜色]

不同方向：

border-top: [宽度] | [样式] | [颜色]

border-left: [宽度] | [样式] | [颜色]

border-right: [宽度] | [样式] | [颜色]

border-bottom: [宽度] | [样式] | [颜色]

（5）内边距设置

padding-top

padding-left

padding-right

padding-bottom

padding 缩写：

(5) 外边距设置

外边距设置元素与元素之间的距离，也有四个方向（上右下左）

- margin-top：长度值 | 百分比 | auto

- margin-right：长度值 | 百分比 | auto

- margin-bottom：长度值 | 百分比 | auto

- margin-left：长度值 | 百分比 | auto

说明：值可为负值。

margin值设为auto：实现水平居中显示效果。由浏览器计算外边距。

最后，display 属性

块级元素，占一行：

h1~h6, p, div, ul, li, ol, dl, dt, dd，等

行内元素，一行显示：

span, a, em 等

如何将块级元素像行内元素一样显示，或者相反？

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
            ul {width:200px;}
            /*补充样式*/
            li{display:none;}
            ul:hover li{display:inline;}
            
        </style>
    </head>
    <body>
        <ul>
            <h2>家电</h2>
            <li>冰箱</li>
            <li>空调</li>
            <li>洗衣机</li>
        </ul>
    </body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>box3</title>
	<meta charset="utf-8">
	<style type="text/css">
		body,p,div{margin:0px;padding: 0px;font-family: "微软雅黑"；}
		.course{width: 220px;background-color: #f2f4f6;border: 1px #ececec solid;margin: 0 auto;}
		.list1{background-color: #040a10;width: 100%;height: 90px;padding-top: 60px;}
		.content{font-size: 20px;color: #fff;font-weight: bold;text-align: center;}
		.list2{font-size: 14px;border-bottom: 1px #d9dde1 solid;margin: 0px 15px; padding: 10px 5px 5px 5px;line-height: 1.5em;}
		.special{border-bottom: none;}
		span{color:#93999f;font-size: 12px;}
	</style>
</head>
<body>

	<div class="course">
		<div class="list1">
			<p class="content">前端课程排列</p>
		</div>
		<div class="list2">
			<p>HTML+CSS基础课程</p>
			<span>1人在学</span>
		</div>

		<div class="list2">
			<p>HTML+CSS基础课程</p>
			<span>1人在学</span>
		</div>

		<div class="list2 special">
			<p>HTML+CSS基础课程</p>
			<span>1人在学</span>
		</div>
		
	</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style type="text/css">
      body,div,h3,ul,li{padding:0;margin:0;}
      ul{list-style:none;}
      .big{width:600px;margin:0 auto;margin-top:50px;}
      .div1,.div2,.div3{width:162px;}
      h3{width:162px;background-color:#eee;border:1px solid #ddd;font-size:26px;font-family:"Microsot Yahei";text-align:center;padding:5px 0px;}
      .elec,.wash,.clothes{font-size:20px;width:102px;border:1px solid #ddd;margin:0;border-top:none;padding-left:60px;display:none;}
      .elec li,.wash li,.clothes li{height:40px;line-height:40px;}
      .div1:hover ul,.div2:hover ul,.div3:hover ul{display:block;}
    </style>
</head>
<body>
    <div class="big">
        <div class="div1">
            <h3>家电</h3>
            <ul class="elec">
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul>
        </div>
        <div class="div2">
            <h3>洗护</h3>
            <ul class="wash">
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔顺剂</li>
            </ul>
        </div>
        <div class="div3">
            <h3>衣物</h3>
            <ul class="clothes">
                <li>衬衫</li>
                <li>裤子</li>
                <li>卫衣</li>
            </ul>
        </div>
    </div>
</body>
</html>