欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端基础夯实--（CSS系列）CSS盒子模型

程序员文章站 2024-01-28 08:39:52
...

1、盒子模型的概念

前端基础夯实--（CSS系列）CSS盒子模型前端基础夯实--（CSS系列）CSS盒子模型

2、宽度属性

1、宽度属性的设置的值可以是下面几种：

width：长度值 | 百分比 | auto
max-width：长度值 | 百分比 | auto
min-width：长度值 | 百分比 | auto

2、通过代码理解一下max-width和min-width设置长度值。

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		p{ background-color:#ececec; width:400px;}
		.one{max-width:500px;}
		.two{min-width:500px;}
	</style>
</head>
<body>
		<p>盒子模型的宽度width：400px</p>
		<p class="one">盒子模型最大宽度max-width：300px</p>
		<p class="two">盒子模型最小宽度min-width：250px</p>
</body>
</html>

首先要注意的是，p是块级元素，块级元素单独占一整行，所以设置了背景颜色，默认情况下是贯穿于整个浏览器的，然后看一下在浏览器中的效果：max-width为500px是只能比500px小，那么400px符合要求，就是400px的长度，min-width是只能比500px大，所以400px不符合要求，就为500px。

前端基础夯实--（CSS系列）CSS盒子模型

3、长度百分比：给长度设置百分比，百分比是相对于父级元素来说的。

3、高度属性

1、高度的值的设置和宽度的设置差不多是一样的：

height：长度值 | 百分比 | auto
max-height：长度值 | 百分比 | auto
min-height：长度值 | 百分比 | auto

2、代码来看结果：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		p{ background-color:#ececec; height:200px;}
		.one{max-height:100px;}
		.two{min-height:100px;}
	</style>
</head>
<body>
		<p>盒子模型的宽度width：400px</p>
		<p class="one">盒子模型最大宽度max-width：300px</p>
		<p class="two">盒子模型最小宽度min-width：250px</p>
</body>
</html>

下面来看看效果：因为max-height为100px，高度200px超过了100px，不符合要求，所以就是100px，而min-height为100px，200px超过了100px，符合要求，所以第三段内容就是200px。

前端基础夯实--（CSS系列）CSS盒子模型

4、哪些元素可以设置height和width属性

1、首先要注意的是：当我们不设置height和width属性的时候，他们的值都是auto，width默认就是贯穿父级元素的宽度，height就是内容的高度。

2、能设置高和宽属性的有块级元素和替换元素：<p> <div> <h1>~<h6> <ul> <ol> <li> <dl> <dt> <dd>等块级元素，<img> <input> <textarea> 等替换元素。

3、<img>如果同时设置了行内的宽和高，又设置了CSS的宽和高，那么图片是采用的CSS的样式，如果只设置了height和width两者中的一种，那么另外一种属性也会随之等比例变化缩放。

5、边框属性

1、边框的属性有边框宽度（border-width） 、边框颜色（border-color ） 、边框样式（border-style） 

2、设置边框的宽度属性：

border-width:thin | medium | thick | 长度值

3、设置边框的样式属性：注意我们一定要去设置border-style这个属性，不然只设置border-width和border-color是没有效果的。同时边框是可以分别去定义的：

前端基础夯实--（CSS系列）CSS盒子模型前端基础夯实--（CSS系列）CSS盒子模型

下面示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		p{line-height:100px;height:100px;background-color:#ececec;width:300px;text-align:center;border-width:10px;border-color:red;border-style:solid;}
	</style>
</head>
<body>

		<p>盒子模型的宽度width：400px</p>

</body>
</html>

4、边框属性简写：

border:  [宽度] [样式] [颜色]
border-top：[宽度] [样式] [颜色]
border-bottom：[宽度] [样式] [颜色]
border-left：[宽度] [样式] [颜色]
borderright：[宽度] [样式] [颜色]

5、padding属性

1、设置了padding，盒子在网页中占的空间，就不单单和width和height有关系了，与padding也有关系。

前端基础夯实--（CSS系列）CSS盒子模型前端基础夯实--（CSS系列）CSS盒子模型

6、margin属性

前端基础夯实--（CSS系列）CSS盒子模型前端基础夯实--（CSS系列）CSS盒子模型

1、首先要注意的就是margin可以为负值，这个和padding是不一样的地方

2、另外margin为auto的时候，会自动有个水平居中显示的效果，系统会自动帮你计算外边距：这个是相对父级元素居中显示的。

3、外边距和并，同时设置了外边距，合并的外边距将是外边距最大的那个值：

前端基础夯实--（CSS系列）CSS盒子模型

7、盒子模型计算

前端基础夯实--（CSS系列）CSS盒子模型前端基础夯实--（CSS系列）CSS盒子模型

8、盒子模型的应用

1、html标签分为块级元素和行内元素：p> <div> <h1>~<h6> <ul> <ol> <li> <dl> <dt> <dd>等块级元素，还有<span> <a> <em> 等行内元素，其中块级元素是独占一行的。行内元素是在同一行连续展示的。

2、能不能将块级元素和行内元素做一下转化呢？通过display属性可以实现两者相互之间的转换：

display :inline(成为行内元素) | block（成为块级元素） | inline-block（行内元素，有块级元素的特征） | none（子元素不被显示）

3、怎么解决行内元素之间有缝隙的问题：外部套一个父标签，样式中font-size设置为0px，然后单独给行内元素设置字体大小：

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		p{ border:medium solid #000000;display:inline;font-size:16px;} /*行内样式单独设置font-size*/
		span{border:medium solid #000000;display:block;}
		.zerofont{font-size:0px;marginbottom:10px;} 、/*父级元素的font-size设置为0px*/
		
	</style>
</head>
<body>
	<div class="zerofont">
		<p>块级转化为行内元素</p>
		<p>块级转化为行内元素</p>
		<p>块级转化为行内元素</p>
	</div>
		<span>行内元素转化为块级元素</span>
		<span>行内元素转化为块级元素</span>
		<span>行内元素转化为块级元素</span>
</body>
</html>

4、对于块级元素（包括display：block），它的width，height，margin，padding属性都是有效的

5、对于行内元素（包括display：inline），它的width，height都无效，margin和padding也只在水平方向上有效，垂直方向无效。

6、行内块元素（display：inline-block），属于行内元素，却也可以设置宽和高，以及水平和垂直方向上的margin和padding。

7、子元素不显示（display：none）,用下面的实例代码来演示一下：没有将鼠标放在<a>标签的内容上时，<span>标签中的内容是不显示的，把鼠标放在<a>标签的内容时：<span>中的内容就显示出来了。

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		span{display:none;}s
		a:hover span{display:inline-block;}
	</style>
</head>
<body>	
		<a href="#">后面隐藏着。。。<span>行内元素转化为块级元素</span></a>
</body>
</html>

9、示例总结

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta http-equiv="Content" content="text/html;charset=utf-8">
	<style type="text/css">
		div,p,span{margin:0px;padding:0px;font-family:"微软雅黑";margin:0 auto;}
		.course{width:220px;background-color:#f2f4f6;border:1px solid #ececec;}
		.list1{width:100%;height:150px;background-color:#040a10;text-align:center;}
		.content{font-size:20px;color:#fff;font-weight:bold;line-height:150px;}
		.list2{font-size:14px;border-bottom:1px solid #d9dde1;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基础课程</p>
				<span>4666人在学</span>
			</div>
			<div class="list2">
				<p>html基础课程</p>
				<span>4666人在学</span>
			</div>
			<div class="list2 special">
				<p>html基础课程</p>
				<span>4666人在学</span>
			</div>
		</div>
</body>
</html>

我们可以在浏览器看一下实现的效果是什么样的：

前端基础夯实--（CSS系列）CSS盒子模型

相关标签： 盒子模型 CSS盒子模型

上一篇： php mysql 怎么获取表注释

下一篇： Springboot（十二）构建docker images镜像

推荐阅读