Css盒子模型

墨涵111

已于 2022-04-09 15:40:12 修改

阅读量250

点赞数 2

文章标签： css

于 2020-02-24 18:45:27 首次发布

本文链接：https://blog.csdn.net/wh193912/article/details/104482583

版权

Css盒模型具有四大属性，从内到外依次为：内容（content），内边距（padding），边框（border）,外边距（margin）。之所以称之为盒模型是因为它的本身就像一个盒子一样，它是网页布局中不可或缺的。如下图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}/* 清除默认内外边距 */
			div{width: 300px;height: 300px;background-color: aqua;border: 2px solid #008000;}
		</style>
	</head>
	<body>
		<div>
			<p>盒模型</p>
		</div>
	</body>
</html>

在这里插入图片描述

这就是一个简单的盒模型，可以发现内容“盒模型”距离盒子没有任何距离，接着我们添加一个padding: 30px;的属性：
在这里插入图片描述
可以发现我们的内容“盒模型”距离盒子上下左右都有30px的距离。
padding的作用：1.用来控制父元素和子元素之间的位置关系；2.用来控制元素和内容之间的位置关系。
这里需要指出的是：添加了padding值之后，padding值会把元素原有的大小撑大；如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding；

padding-top:30px; 上填充
padding-right:30px; 右填充
padding-bottom:30px; 下填充
padding-left:30px; 左填充

	    当写不同个值时的作用：
		padding： 1   2    3   4          1、上   2、右     3、下    4、左
		padding： 1   2    3              1、上   2、左和右     3、下 
		padding： 1   2                   1、上和下   2、左和右 
		padding： 1                       1、上 右  下 左

接着我们再写一个盒子，并给它一个margin-top：30px；的属性：
在这里插入图片描述
可以发现黄色的盒子上面距离蓝色盒子有30px的距离。
margin：作用：控制同辈元素之间的位置关系。
特点： margin是显示是在元素边框以外的空白区。

margin-top:30px; 上外边距
margin-right:30px; 右外边距
margin-bottom:30px; 下外边距
margin-left:30px; 左外边距
当写不同个值时与padding相同。另外实现元素水平居中的方法：margin：0 auto；
需要注意的是：margin 是可以写负值的，padding不可以写负值；
margin不会影响元素的实际宽高，但是也会增加他的所占区域；

边框:
border:1px solid #f00; 复合式写法

border-width : ;     边框的宽度	            可有可无，会有默认的宽度显示
border-style：；     边框的线型             必须要有的   
线型有很多种，常用的有：none 无边框（取消边框） solid 实线  dashed虚线  dotted 点线  double 双边线 ；
border-style:none;的应用场景：加了超链接的插入图片，在IE低版本浏览器会出现边框。

解决方法：给img 这个标签添加border-style:none;

border-color：；  边框的颜色	            可有可无，会有默认的颜色显示

            /*border-top-width:5px ;        上边框的宽度
			border-right-width:10px;        右边框的宽度
			border-bottom-width:15px;      下边框的宽度
			border-left-width: 10px;*/       左边框的宽度
			
			border-width:5px 10px 15px 10px;/*  border-width 的复合式写法*/
			
			/*border-top-style:solid;            上边框的线型
			border-right-style:dashed;           右边框的线型
			border-bottom-style:double;         下边框的线型
			border-left-style:dotted;*/          左边框的线型
			border-style:solid dashed double dotted;/*  border-style 的复合式写法*/
			
			/*border-top-color:#ff0;            上边框的颜色
			border-right-color:#f0f;             右边框的颜色
			border-bottom-color:#0ff;           下边框的颜色
			border-left-color:#0f0;*/            左边框的颜色
   			border-color:#ff0 #f0f #0ff #0f0;/*  border-color 的复合式写法*/

在这里插入图片描述
需要注意的是：边框的大小，是会添加在元素原有大小之外的，会改变元素原本的大小；也就是说边框是占位置的。（在标准盒模型的情况下）

墨涵111

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Css盒子模型

Css盒模型具有四大属性，从内到外依次为：内容（content），内边距（padding），边框（border）,外边距（margin）。之所以称之为盒模型是因为它的本身就像一个盒子一样，它是网页布局中不可或缺的。如下图所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <...
复制链接

扫一扫