CSS知识（盒子模型、margin、padding、分组和嵌套）

最新推荐文章于 2023-07-12 10:43:27 发布

你得支棱起来呀-

最新推荐文章于 2023-07-12 10:43:27 发布

阅读量685

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39618279/article/details/113360195

版权

CSS盒模型边距 margin 填充 padding 百分比设置选择器

关键词由CSDN通过智能技术生成

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

CSS box-model

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

下面的例子中的元素的总宽度为300px：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

得到一下的结果（绿色外边还有一圈透明的外边距，即margin)

2、CSS margin(外边距)

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

2.1、Margin - 简写属性

margin属性可以有一到四个值。（从上开始顺时针）

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;（相当于没有了左，所以左默认和右一样）
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;（相当于没有了左和下，所以左默认和右一样，下默认和上一样）
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

2.2、通过百分比设置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.bottommargin {
	margin-bottom:30%;
	margin-left:50%;
	margin-right:45%;
	}
</style>
</head>
<body>

<p>这是一个没有指定边距大小的段落。</p>
<p class="bottommargin">这是一个指定下边距大小的段落距大小的段落</p>
<p>这是一个没有指定边距大小的段落。</p>

</body>
</html>

3、padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

其他性质很像margin

4、CSS 分组和嵌套选择器

4.1、分组选择器

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}

相当于下面代码段

h1,h2,p
{
    color:green;
}

4.2、嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

（直接写p是表达选取p元素，.marked是选取叫marked的类。多一个点号

<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}
</style>
</head>

<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
    
<p class="marked">带下划线的 p 段落。</p>
</body>
</html>

运行结果：

你得支棱起来呀-

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS知识（盒子模型、margin、padding、分组和嵌套）

1、CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距)- 清除边框外的区域，外边距是透明的。 Border(边框)- 围绕在内边距和内容外的边框。 Padd..
复制链接

扫一扫