css之盒子模型

远方0905

已于 2022-09-26 14:32:59 修改

阅读量1k

点赞数 2

分类专栏： html5+css

于 2019-11-01 14:25:53 首次发布

本文链接：https://blog.csdn.net/qq_43198727/article/details/102856113

版权

html5+css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

在这里插入图片描述
盒子是用来储存物品的
我们可以将一个盒子理解为一个快递的包裹，有内容 +有填充物 +纸盒子。
一个盒子的组成部分:
在css中的一个盒子的组成部分
内容(content)+内填充(padding)+边框(border)+外边距(margin)
一个盒子的主要属性
:width、height、paddding、border、margin。
如何计算一个盒子的总宽度
一个盒子的总宽度=盒子里面内容的长度+左右两边的填充+左右两边的边框线
注意:一个盒子的高度一般情况下是不用设置的，因为一个盒子的高度他应该是由其内容来决定的。
源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 100px;/*这里的WIDTH属性值得是盒子里面内容的宽度*/
            height: 100px; /*这里的height属性值得是盒子里面内容的高度*/
            padding:20px; /*内填充 盒子里面内容到边框的距离*/
            border:1px solid #f00; /*外边框*/
        }
    </style>
</head>
<body>
    <div class="box">文本文本文本文本八点考达拉扣税的牌可打拉萨扩大</div>
</body>
</html>

提到盒子就不得不讲的两个属性 : margin(外边距 )跟(padding) 内填充。
pdding是内填充的意思指的是盒子中间的内容到边框之间的距离。padding 是有四个方向的所以我们能够分别的描述这四个方向的padding 方法有两种：第一种我们称之为小属性，第二种我们称之为简写属性
小属性：
padding-top 上内填充
padding-right 右内填充
padding-bottom:下内填充
padding-lift 左内填充.
简写属性:
padding:这个属性是有方向的可以同时表示四个方向这个属性的方向是有顺序的。
顺序是顺时针的方向也就是上右下左这个顺序
padding:20px 30px 40px 50px；他的内边距为上边距20px，右边距为30px 下边距为40px 左边距为50px
margin：
margin 他表示及外边距的意思它是指盒子与盒子之间的距离
margin 他也是有四个方向的所以我们能够通过四个方向对其进行描述
方法有两种:第一种我们称之为小属性，第二章我们称之为简写属性.
小属性
margin-top：上外边距
margin-right:右外边距
margin-bottom：下外边距
margin-left :做外边距
简写属性
margin：简写属性它是有方向的这里的方向是一个顺时针的方向他的方向是的顺序是：上、右、下、左
margin：10px;表示上右下左这四个方向的外边距为10像素
margin：10px 20px；表示上下这两个方向的外边距为10像素左右两个方向的外边距为20像素
margin：10px 20px 30px；表示上边距为10像素左右边距为20像素下外边距为30像素
margin：10px 20px 30px 40px；表示上外边距为10像素右外边距为20像素下外边距为30像素左边距为40像素
源代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 100px;/*这里的WIDTH属性值得是盒子里面内容的宽度*/
            height: 100px; /*这里的height属性值得是盒子里面内容的高度*/
            /*使用小属性来描述内填充*/
            padding-top: 20px;
            padding-right:30px;
            padding-bottom: 40px;
            padding-left: 50px;
            border:1px solid #f00; /*外边框*/
        }
    </style>
</head>
<body>
    <div class="box">文本文本文本文本八点考达拉扣税的牌可打拉萨扩大</div>
</body>
</html>

远方0905

关注

2
点赞
踩
2

收藏

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

别人的盒子我的盒子(css中的盒子模型)别人家的盒子咱也不知道，咱也不敢问，我就带你们了解一下我的盒子(css中的盒子模型)。盒子 :盒子是用来储存物品的我们可以将一个盒子理解为一个快递的包裹，有内容 +有填充物 +纸盒子。一个盒子的组成部分:在css中的一个盒子的组成部分内容(content)+内填充(padding)+边框(border)+外边距(margin)一个盒子...
复制链接

扫一扫