html中的css——盒子模型

最新推荐文章于 2024-04-23 17:45:12 发布

夜·封尘

最新推荐文章于 2024-04-23 17:45:12 发布

阅读量446

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_49032349/article/details/117510295

版权

简介

在html页面中，每一个元素都是一个规则的矩形，因此每一个元素都可以由一个盒子模型来表示，盒子模型有四个区域组成，如下：

最里面是内容区域（content box），可以将内容填充在本区域。

padding box（内边距区域）：表示元素中的内容的各个方向，也就是上下左右到边框border的距离

border box（边框区域）：元素的边框，可以设置边框的相关属性，如：宽度、样式、颜色等

margin box（外边距）：表示从元素边框到存放该元素的父元素边框的距离

边框（border）

定义边框属性：border: { 10px solid black}

红色字体区域表示边框标识，可以直接用border表示定义边框属性，也可以使用border-top、border-right、border-bottom、border-left单独定义边框各边的属性。

蓝色字体区域表示边框的宽度。

绿色区域表示边框的样式，其中：

solid(实线)

dashed(虚线)

dotted(点线)

黑色字体区域表示边框的颜色，可以用英文red、blue等表示，也可以用六位RGB值表示，如：#f6f6f6等。详细各种颜色的RGB值可以到网上搜索获得。

实例：

<html>
<head>
<style type="text/css">    
.box1 {        
    border: 10px solid red;
}
.box2 {        
    border: 2px dashed blue;    
}
</style>
</head>
<body>
<div class="box1">盒子1</div>    
<div class="box2">盒子2</div>
</body>
</html>

运行结果

内边距（padding）

定义内边距属性：padding: 20px（上） 30px（右） 40px（下） 50px（左）//顺时针方向

当用padding定义时，如果只定义了几个值而未完全定义时，未定义的那一边会默认与其相对的另一边内边距相同，如：

padding:20px 30px 40px

padding:20px 30px

但只定义一个值时，则默认全部边的内边距相同：

padding:20px

单独定义：

padding-top:20px

padding-right:30px

padding-bottom:40px

padding-left:50px

外边距

定义外边距属性：margin: 20px（上） 30px（右） 40px（下） 50px（左）

外边距的定义方式、规则与内边距的基本相同。

补充：可以用 margin：0 auto；来设置元素水平居中

<html>
<head>
<style type="text/css">    
.box {        	
    width:200px;            
    border: 5px solid red;            
    margin:0 auto;        
}
</style>
</head>
<body>
<div class="box">元素水平居中</div>
</body>
</html>

运行结果：

夜·封尘

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html中的css——盒子模型

简介在html页面中，每一个元素都是一个规则的矩形，因此每一个元素都可以由一个盒子模型来表示，盒子模型有四个区域组成，如下：最里面是内容区域（content box），可以将内容填充在本区域。padding box（内边距区域）：表示元素中的内容的各个方向，也就是上下左右到边框border的距离border box（边框区域）：...
复制链接

扫一扫