css盒子模型

muzhuyu 发布于2019-08-30 15:52 / 633人阅读

摘要：今天谈谈我对盒子模型的理解。首先里面的就是图片中红色区域到之间的区域称为，也就是内边距，就是一个盒子的边框，边框外面还有个外边距。上右下左第一个参数边框宽度，第二个边框类型，第三个边框颜色上，右，下，左依次控制单边边框

今天谈谈我对盒子模型的理解。刚接触到盒子模型的时候那是一年前了，那时候在网上看视频学习，视频中的老师一讲到盒子模型的时候声音显得特别大，说明了盒子模型的重要性，今天就简单的谈谈盒子模型吧！

如果把上图看作是HTML里的一个标签div,

content

.我们就从这一句简单的代码来分析盒子模型。首先div里面的content就是图片中红色区域,content到border之间的区域称为padding，也就是内边距，border就是一个盒子的边框，边框外面还有个外边距margin。

图1-1

.div1{
    width:80px;
    height:80px;
    border:5px solid red;
    padding:20px;
}
.div2{
    width:80px;
    height:80px;
    border:7px solid yellow;
    padding:0px;
}

图1-1:第一个红色div标签我给了它padding:20px;第二个黄色div标签给了它padding:0px;从图中明显可以看出2个div边框离文本的距离大小不同，也发现了2个div大小也不一样（padding撑开了容器），这就是padding，简称内边距。

图1-2

.div1{
    width:80px;
    height:80px;
    border:5px solid red;
    margin:20px;
}
.div2{
    width:80px;
    height:80px;
    border:7px solid yellow;
    margin:0px;
}

图1-2:图上面那条绿色作为基点，第一个红色div给了margin:20px;大家可以看到红色div到绿色的线有了一定的距离，红色div离黄色div也有一定的距离，这个距离就是margin:20px，简称外边距。

图1-3

.div1{
    width:80px;
    height:80px;
    border:3px solid red;
}
.div2{
    width:80px;
    height:80px;
    border:10px solid yellow;
}

图1-3:第一个红色div边框的宽度为3px，第二个黄色div边框为10px，边框宽度同样也会撑开容器大小。

最后来讲下margin,padding,border参数。

margin:

margin: 10px;（上、下、左、右各10px。）
margin: 10px 20px;（上、下10px；左、右20px。）
margin: 10px 20px 30px;（上10px；左、右20px；下30px。）
margin: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）
margin-top:10px;(上:10px;)
margin-right:10px;(右:10px;)
margin-bottom:10px;(下:10px;)
margin-left:10px;(左:10px;)

padding:

padding: 10px;（上、下、左、右各10px。）
padding: 10px 20px;（上、下10px；左、右20px。）
padding: 10px 20px 30px;（上10px；左、右20px；下30px。）
padding: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）
padding-top:10px;(上:10px;)
padding-right:10px;(右:10px;)
padding-bottom:10px;(下:10px;)
padding-left:10px;(左:10px;)

border:

border:1px solid red;(第一个参数边框宽度，第二个边框类型，第三个边框颜色)
border-top
border-right
border-bottom
border-left
(上，右，下，左依次控制单边边框)

云服务器 GPU云服务器盒子模型比价盒子盒子比价电视盒子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116484.html

「前端早读君」css进阶之彻底理解视觉格式化模型

摘要：视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则。匿名块盒子在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用选择符选中，因此称为匿名盒子。因此最好不要将其用于正式项目。今日励志不论你在什么时候开始，重要的是开始之后不要停止。前言对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。 showImg(htt...

Eidesen 2019-08-23 14:25 评论0 收藏0
【前端】CSS盒子模型

摘要：盒子模型及更早的版本使用的是盒模型。盒子模型组成为。盒子模型盒子模型的盒子模型的意味着盒子的和的大小是上述属性相加的最大总和。标准盒子模型盒子模型的盒子模型的盒子模型大小计算就简单多，设置的和就是内容大小。盒子模型 IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。盒子模型组成为：margin、border、padding、...

Keagan 2019-08-30 15:55 评论0 收藏0
【Hello CSS】第二章-CSS的逻辑属性与盒子模型

摘要：本篇则会分享的逻辑属性以及盒子模型。的逻辑属性年月日，的工作组发布了逻辑属性和值的首份工作草案。那么按着这个规则去修改文本属性时，就会出现上述这种不符合语法规则的状态。大概也是基于这个原因，所以发布了新的逻辑属性与值。因此称为匿名盒子。作者：陈大鱼头 github： KRISACHAN 在上一篇【Hello CSS】的第一章CSS的语法与工作流中介绍了CSS的语法规则以及基本的...

SegmentFault 2019-08-30 10:49 评论0 收藏0
从CSS盒子模型说起

摘要：前言总括对于盒子模型，，和外边距合并等概念和问题的总结原文地址从盒子模型说起知乎专栏前端进击者博主博客地址的个人博客为学之道，莫先于穷理穷理之要，必先于读书。前言总括：对于盒子模型，BFC，IFC和外边距合并等概念和问题的总结原文地址：从CSS盒子模型说起知乎专栏：前端进击者博主博客地址：Damonare的个人博客为学之道，莫先于穷理；穷理之要，必先于读书。正文 ...

happyhuangjinjin 2019-08-29 12:54 评论0 收藏0