css03_盒模型

最新推荐文章于 2024-07-19 15:50:46 发布

Luuuzi

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量90

点赞数

分类专栏： web 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_36366618/article/details/120194135

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

盒模型
- 盒模型属性

盒模型

所有的标签都是盒子，无论是div、span、a标签都是盒子。(图片和表单元素一律看做文本，所以不是盒子)

盒模型属性

一个盒子的主要属性有5个：width、height、margin 、padding、border

width：宽度，css中指的是内容的宽度，而不是盒子的宽度
height：高度，css中指的是内容的高度，而不是盒子的高度
margin:是“外边距"的意思
padding:是"内边距"的意思边框和内容之间的距离。
border：是"边框"的意思

盒子的宽/高=内容的宽/高+padding+border
举例
以下方框包起来的就是一个盒子(包括边框)

使用:3个大小一样的盒子

<!DOCTYPE html>
<html>
<head>
	<title>盒模型</title>
	<style type="text/css">
		.box1{
			width: 400px;
			height: 100px;
			/*边框宽度1px 线型为 solid 颜色为red*/
			border: 6px solid blue;
			padding: 95px;
			background: #f00;
		}
		.box2{
			width: 100px;
			height: 100px;
			border: 6px solid red;
		}
		.box3{
			width: 0px;
			height: 0px;
			border: 6px solid green;
			padding: 200px;
		}
	</style>
</head>
<body>
	<div class="box1">我是盒子1</div>
	<div class="box2">我是盒子2</div>
	<div class="box3">我是盒子3</div>
</body>
</html>

效果图

如果想保持一个盒子的真实占有宽度不变，那么加了宽度就要减padding，加了padding就要减宽度

1、padding属性

padding区域有颜色，和图片，在css2.1前提下，Background-color将填充所有的boder以内的区域。
padding是4个方向，所以可以分别设置4个方向的padding

<!--小属性-->
padding-left:左
padding-right:右
padding-top:上
padding-bottom:下

或者：

<!--综合属性-->
padding：上 右 下 左  
padding：30px 20px 40px 100px;
<!--如果只写3个值
上 右  下 ？左边补成和右边一样-->
padding：30px 20px 40px
<!--如果只写2个值 
上 右 ？ ？
下和上一样，左和右一样-->
padding:30px 20px

要小属性层叠大属性(大属性先写，小属性后写)

padding：40px;
padding-left:30px;

不能大属性层叠小属性(小属性会被大属性覆盖)
有些标签又默认的padding，所以在做网站的时候为了便于控制，会把默认的padding清除。

2、border属性

border(边框)，3要素，4条边。
3要素：宽度，样式，颜色。border-width、border-style、border-color；
4条边border-top、border-right、border-bottom、border-left
eg：

/*边框宽度1px 线型为 solid 颜色为red*/
border: 1px solid red;

所有的线型

border是一个大综合属性：

<!--就是把4个边框都设置成1px宽度，线型为实线，red颜色-->
border：1px solid red;

border属性拆开，有两种方式：
按要素：

border-width: 10px;//粗细
border-style: ridge;//样式(线型)
border-color: red;//颜色
<!--设置4条边框不同颜色-->
border-color: red green blue yellow;

按方向：

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;

等价于：border:10px solid red;
border可以没有

<!--border没有-->
border：none;
<!--左边没有-->
border-left:none;

3、外边框样式

outline-style:none;

Luuuzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css03_盒模型

文章目录盒模型盒模型属性1、padding属性2、border属性3、外边框样式盒模型所有的标签都是盒子，无论是div、span、a标签都是盒子。(图片和表单元素一律看做文本，所以不是盒子)盒模型属性一个盒子的主要属性有5个：width、height、margin 、padding、borderwidth：宽度，css中指的是内容的宽度，而不是盒子的宽度height：高度，css中指的是内容的高度，而不是盒子的高度margin:是“外边距"的意思padding:是"内边距"的意思边框和内容之
复制链接

扫一扫