文章目录
前言一、什么是文档流二、盒子模型三、盒子的水平布局四、盒子的垂直布局五、盒子的垂直外边距重叠总结前言
本文主要介绍CSS中的盒子模型,以及盒子的水平与垂直布局等相关知识点,感兴趣的小伙伴可以驻足阅读一下~
一、什么是文档流
1.1文档流
最底下的一层是文档流,文档流是网页的基础,所创建的元素默认都是在文档流中进行排列。1.2元素在文档流中的两个状态
元素在文档流中的特点:
1.对于块元素 块元素会在页面中独占一行(自上向下垂直排列)默认宽度是父元素的全部(会把父元素撑满)默认高度是被内容撑开(子元素) 2.对于行内元素 行内元素不会独占页面的一行,只占自身的大小行内元素在页面中自左向右水平排列,如果一行之中不能占满,则元素会换到第二行继续自左向右排列,默认高度与宽度都是被内容撑开元素不在文档流中的特点:可以这样理解当元素脱离文档流之后,就不再区分块元素和行内元素。
二、盒子模型
盒子都由以下几个部分组成: 内容区(content)内边距(padding)边框(border)外边距(margin)2.1内容区(content)
元素中的所有的子元素和文本内容都在内容区中排列,内容区的大小是由width(内容区的宽度),height(内容区的高度)两个属相来设置2.2边框(border)
属于盒子边缘,边框里边属于盒子内容,出了边框都是盒子的外部,边框的大小会影响到整个盒子的大小, 边框的宽度 border-width(border-width 如果不写,也会有一个默认值,3个像素)边框的颜色 border-color边框的样式 border-style(粗细)border-style:solid(实线 ) (三者缺一不可)值的情况四个值 上、右、下、左 三个值:上、 左右、下 两个值:上下、左右 一个值:上下左右 除了border-width 还有一个border-xxx-width xxx可以是top,left,right,bottom 例如:border-top-width用来单独指定某一个边的宽度border-color边框颜色 :用来设置边框的颜色值的情况和width相同border-style边框样式solid表示实线 dotted点状实线 dashed虚线 double双线 默认值是none ,表示没有边框border简写形式:通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求,例如 border: 10px red solid;border也有四个border-xxx top,right,bottom,left2.3内边距(padding)
内容区和边框之间的距离是内边距,一共有四个方向的内边距 padding-top padding-right -padding-bottom padding-left 内边框的设置会影响到盒子的大 小,背景颜色会延伸到内边框上 盒子的可见框大小,由内容区、 内边距 、 边框 共同决定 所以在计算盒子大小,需要将这三个区域加到一起计算 padding简写属性 ,可以同时指定四个方向的内边距,规则和border-width一样(值的情况) padding:10px,20px,30px,40px;2.4外边距(margin)
外边距不会影响盒子可见框的大小,但是外边距会影响盒子的位置,一共有四个方向的外边距: margin-top 上外边距,设置一个正值,元素会向下移动,负值则会向上移动margin-bottom 下外边距,设置一个正值,其下边的元素会向下移动,负值,下边的元素会向上移动margin-left 左外边距,设置一个正值,元素会向右移动,负值,元素会向左移动margin-right 右外边距,默认情况下,设置margin-right 不会产生任何效果 元素在页面中是按照自左向右的顺序排列的,所以默认情况下如果我们设置的左和上外边距则会移动元素自身,而设置下和右外边距会移动其他元素margin的简写属性:margin可以同时设置四个方向的外边距,用法和padding一样三、盒子的水平布局
元素的水平方向的布局,元素在其父元素中水平方向的位置由以下几个元素决定margin-left border-left padding-left width padding-right border-right margin-right公式——这7个值相加的和=父元素内容区的宽度(必须成立)相加结果不等,则为过度约束,则等式自动调整 如果这7个值中没有为auto的情况,则浏览器自动调整margin-right以使等式成立 若子元素的宽度,超过父元素的宽度,则将margin-right设为负值,使等式成立——加上一个负值相当于没有加 7个值中3个值可设为auto 包括:width margin(margin-left margin-right) 如果某个值为auto,则会自动调整设为auto的那个值使等式成立 如果将一个宽度和外边距设为auto,则宽度会调整到最大,auto的外边距则自动为0 这三个值都为auto,则外边距都为0,宽度最大 两个外边距设为auto,宽度为固定值,则两个外边距自动设置为相同的值,这个方法可使一个元素在父元素中居中,例如 width:xxxxpx; margin:0 auto;(margin值得情况,两个值时为——上下,左右)四、盒子的垂直布局
子元素在父元素的内容区中排列时,如果子元素的大小超过了父元素,则子元素会从父元素中溢出, 使用overflow属性来设置父元素如何处理溢出的子元素可选值:visible 默认值,子元素会从父元素中溢出,在父元素外部的位置显示hidden 溢出内容将会裁剪不会显示scroll 生成两个滚动条,通过滚动条来查看完整的内容overflow-x(水平滚动条) overflow-y(垂直滚动条)若只设置了一边的滚动条,但另一边无法自动显示时,也会自动生成,依据事实情况显示auto 根据需要生成滚动条五、垂直外边距的重叠(折叠)
5.1什么是外边距重叠现象?
相邻的垂直方向外边距会发生重叠现象兄弟元素(在开发中,兄弟元素的外边距重叠是好的,无需处理) ————兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值) 特殊情况: 如果相邻的外边距一正一负,则取两者的和; 如果相邻的外边距都是负值,则取两者中绝对值较大的父子元素(父子外边距的折叠会影响到页面的布局,必须要处理) 父子元素间的相邻外边距,子元素的会传递给父元素(上外边距)5.2解决外边距重叠的方法:
1.使它们不相邻 给父元素开启 padding-top:xxxpx; 同时修改父元素的高度 2.使用伪类解决,例如.box1::before, .box1::after{content:''; clear:both; display:table; }
总结
以上就是今天所要分享的内容,知识点有些多,但都是在布局中经常会使用到的,希望可以帮助到你,另外,依旧祝福看到这篇文章的朋友健康喜乐,拜~