青海建设工程云网站重庆金融网站建设

青海建设工程云网站,重庆金融网站建设,软件开发文档包括,益阳公司网站建设CSS 盒子模型#xff08;Box Model#xff09;详解0、序言#xff08;非必要#xff09;1、盒子模型的组成1.0 盒子模型的总览1.1 第一层 内容#xff08;content#xff09;1.2 第二层 内边距#xff08;padding#xff09;1.3 第三层 边框#xff08;border#xf…CSS 盒子模型Box Model详解0、序言非必要1、盒子模型的组成1.0 盒子模型的总览1.1 第一层 内容content1.2 第二层 内边距padding1.3 第三层 边框border1.4外边距margin2、关于盒子模型的属性和值2.1 边框线border2.2 内边距padding2.3外边距margin3、外边距的合并和塌陷问题3.1外边距的合并3.2 父元素的坍陷4、总结0、序言非必要刚学前端的时候你是不是经常遇到这种情况“我明明设置了宽度为什么看起来比想象中大”“这个 div 怎么和另一个 div 挤在一起”“margin 和 padding 到底有什么区别啊啊啊”别急别急(•̀ᴗ-)✧这些问题几乎都和 CSS 的「盒子模型」有关。只要把盒子模型搞懂CSS 至少能一下子明白一半1、盒子模型的组成1.0 盒子模型的总览在 CSS 里每一个元素本质上都是一个盒子Box不管是 div标签、span标签、p标签、img标签还是其他什么的标签浏览器在渲染它们的时候都会当成一个「盒子」来处理。这个盒子从里到外一共由 4 个部分 组成┌─────────────────────┐│margin│ ← 外边距│ ┌───────────────┐ ││ │border│ │ ← 边框│ │ ┌───────────┐ │ ││ │ │padding│ │ │ ← 内边距│ │ │ ┌───────┐ │ │ ││ │ │ │content│ │ │ │ ← 内容│ │ │ └───────┘ │ │ ││ │ └───────────┘ │ ││ └───────────────┘ │└─────────────────────┘(⊙﹏⊙)看上去好复杂难懂第一眼看上去想放弃了。但是你先别急其实这个类比一下就容易懂的多了我们可以把盒子模型类比成俄罗斯套娃层层相叠。1.1 第一层 内容content里面第一层是核心你所写的html的内容呈现出来的效果这是盒子真正放内容的地方比如文字、图片等。│ │ │ ┌───────┐ │ │ ││ │ │ │content│ │ │ │ ← 内容│ │ │ └───────┘ │ │ │1.2 第二层 内边距padding然后再套上一层内边距。内容和边框之间的距离相当于“缓冲区”。│ │ ┌───────────┐ │ ││ │ │ padding │ │ │ ← 内边距│ │ │ ┌───────┐ │ │ ││ │ │ │content│ │ │ │ ← 内容│ │ │ └───────┘ │ │ ││ │ └───────────┘ │ │content padding 共同构成元素的内容区域1.3 第三层 边框border到了这里如果不做任何修改的话盒子的实际大小大于你所定义的盒子的大小因为第一层第二层都是标签的主体而边框是套在标签的外面是一个额外的附加值所以盒子实际的大小还要再加上边框的大小。│ ┌───────────────┐ ││ │border│ │ ← 边框│ │ ┌───────────┐ │ ││ │ │padding│ │ │ ← 内边距│ │ │ ┌───────┐ │ │ ││ │ │ │content│ │ │ │ ← 内容│ │ │ └───────┘ │ │ ││ │ └───────────┘ │ ││ └───────────────┘ │我们有时会用边框框住标签使得更加美观好看但边框大小有时会影响我们的整体布局而手动根据边框大小去减去对应盒子的大小太过烦琐工程量大起来找起来很麻烦。到了这个时候前人的智慧开始发挥作用了拯救万千苍生与苦楚当中。box-sizing:border-box;这行css代码的作用是将边框线算在元素盒子整体大小中。也就是说让width / height包含padding和border。举个例子div{width:200px;padding:20px;border:10px solid black;box-sizing:border-box;}在上述div盒子中本来盒子的大小应该是200px20px为220px但是因为box-sizing: border-box;这行代码设置div元素的盒子大小包含了边框线大小所以还是200px。强烈建议( •̀∀•́ )✧在开头加上省去了计算盒子大小还有一时忘记边框也有大小的烦琐。1.4外边距margin外边距就是每个盒子与其他盒子之间的边距┌─────────────────────┐│margin│ ← 外边距│ ┌───────────────┐ ││ │border│ │ ← 边框│ │ ┌───────────┐ │ ││ │ │padding│ │ │ ← 内边距│ │ │ ┌───────┐ │ │ ││ │ │ │content│ │ │ │ ← 内容│ │ │ └───────┘ │ │ ││ │ └───────────┘ │ ││ └───────────────┘ │└─────────────────────┘如果设置了外边距的话盒子相当于再套上一层拒绝的刺外边距。外边距的大小并不影响盒子的实际大小所以盒子的占用空间边框内边距内容而外边距和边框的大小可以用*{padding0 margin0}让其默认值为零2、关于盒子模型的属性和值在实际运用中我们应该理解原理而不用去死记硬背。2.1 边框线border属性值样式solid实线dashed虚线dotted点线可以设置单方向的边框线。用法为 border-方位名词。2.2 内边距padding用法可以用padding-方位名词。padding-top10px padding-right10px padding-bottom10px padding-left10px或者用多值写法padding:10px;/* 上右下左 */padding:10px 10px;/* 上下 | 左右 */padding:10px 10px 10px;/* 上 | 左右 | 下 */padding:10px 10px 10px 10px;/* 上右下左 */说明将元素的内边距的上、右、下、左大小分别设置为10px。2.3外边距margin同上用法可以用margin-方位名词。margin-top10px margin-right10px margin-bottom10px margin-left10px或者用多值写法margin10px 10px 10px 10px说明将元素的外边距的上、右、下、左大小分别设置为10px。3、外边距的合并和塌陷问题3.1外边距的合并在css当中垂直配列的兄弟元素margin会合并只取最大值而不是相加举个例子!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.a{margin-bottom:50px;}.b{margin-top:30px;}/style/headbodydivclassa1/divdivclassb2/div/body/html这俩者的距离应该是50px而不是80px3.2 父元素的坍陷举个例子!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.a{margin-bottom:50px;}.b{margin-top:30px;}.parent{background:pink;}.child{margin-top:50px;}/style/headbodydivclassa1/divdivclassb2/divdivclassparent3divclasschild4/div/div/body/html你会发现——child 的 margin-top 顶到了 parent 外面这就叫外边距塌陷发生外边距塌陷的条件同时满足父元素 没有 border父元素 没有 padding父元素 没有创建新的 BFC子元素是第一个元素margin-top或最后一个margin-bottom本质上原因是浏览器觉得“你这个 margin 也算父的吧合并一下省点事。(´◓Д◔)”方法一给父元素加 border最简单.parent { border-top: 1px solid transparent; }✅ 方法二给父元素加 padding常用.parent {padding-top: 1px;}✔️ 实战很常见✔️ 同时还能调内部布局✅ 方法三触发 BFC强烈推荐.parent { overflow: hidden; }或.parent { display: flow-root; } 这是现代前端最推荐的方式✅ 方法四给父元素设 display: inline-block.parent { display: inline-block; }✔️ 能解决❌ 会影响布局方式不常用4、总结什么时候该用 margin什么时候用 padding给你一句“不会错”的口诀 拉开盒子之间的距离用 margin 给盒子内部留空间用 padding你写页面时❌ 布局混乱多半是盒子模型没想清楚❌ 上下间距怪怪的80% 是 margin 合并 / 塌陷✅ box-sizing: border-box 先加上✅ 父元素想“包住”子元素优先用 padding 或 BFC作者碎碎念╮(╯_╰)╭ 非必要哎一直在尝试和调整博客的内容和风格前面写的博客太水了不能这样下去了有些简单内容就跳过不说了接下来主要将重点内容和原理说明白尽量做到精简(╥﹏╥)