盒子是用来储存物品的
我们可以将一个盒子理解为 一个快递的包裹，有内容 +有填充物 +纸盒子。
一个盒子的组成部分:
在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>
今天的文章css之盒子模型分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/68634.html
