文章目录1. 元素的显示模式display1.1 三类显示模式对比1.2 总结常见元素显示模式1.3 修改元素的显示模式display 属性2. 盒子模型Box Model3. 盒子模型的各属性详解3.1 内容区content3.1.1 默认宽高3.1.2 宽高相关属性3.2 内边距padding3.2.1 行内元素的特殊性3.2.2 属性列表3.3 边框border3.3.1 基本属性3.4 外边距margin3.4.1 行内元素的特殊性3.4.2 属性列表与 padding 的两个重要区别4. 外边距的特殊问题4.1 父子 margin 塌陷Collapse4.2 兄弟 margin 合并问题5. 内容溢出处理overflow6. 默认样式与重置7. 布局小技巧居中7.1 水平居中7.2 垂直居中1. 元素的显示模式display在 CSS 中元素根据其默认的显示特性分为三类块级元素、行内元素、行内块元素。理解它们的区别是掌握布局的基础。1.1 三类显示模式对比特性块级元素block行内元素inline行内块元素inline-block是否独占一行是否同行可多个否同行可多个默认宽度撑满父元素由内容撑开由内容撑开默认高度由内容撑开由内容撑开由内容撑开能否设置宽高能不能能能否设置上下margin能不能无效能 历史补充元素早期只分为行内元素、块级元素区分条件也只有一条“是否独占一行”如果按照这种分类方式行内块元素应该算作行内元素。inline-block 是后来引入的混合模式。它让元素既能同行排列又能像块级一样控制宽高。1.2 总结常见元素显示模式块级元素block结构根html body排版div h1~h6 p hr pre列表ul ol li dl dt dd表格容器table thead tbody tfoot tr caption表单容器form option行内元素inline文本语义span br em strong sup sub del ins链接与标签a label️行内块元素inline-block多媒体img video audio表单控件input textarea select表格单元格td th嵌入内容iframe️ 行内块元素 inline-block️ 图像多媒体img 表格单元格td th️ 表单控件input textarea select button️ 嵌入框架iframe 行内元素 inline 文本语义标签br em strong sup sub del ins 链接与标签a label 块级元素 block️ 主体结构html body✍️ 排版标签h1~h6 hr p pre div 列表标签ul ol li dl dt dd 表格相关table tbody thead tfoot tr caption 表单容器form option HTML 元素显示模式核心分类与标签体系1.3 修改元素的显示模式display 属性通过 CSS 的display属性可以改变元素的默认显示行为属性值效果block转为块级元素独占一行可设宽高inline转为行内元素同行排列不可设宽高上下margin无效inline-block转为行内块元素同行排列可设宽高none隐藏元素不占任何空间如同不存在⚠️ 与visibility: hidden的区别visibility: hidden 会隐藏元素但仍然占据原来的位置保留占位元素的大小依然保持而 display: none 彻底消失。不但看不见也不占用任何位置没有大小宽高。2. 盒子模型Box ModelCSS 将每个元素视为一个矩形的“盒子”由内向外依次为content内容区域文字、图片、子元素padding内边距内容与边框之间的空白border边框包裹 padding 和 contentmargin外边距盒子与其他元素的距离✅ 关键点margin 不影响盒子本身的可见大小只影响位置而 border padding content 共同决定了盒子的实际占地大小。3. 盒子模型的各属性详解3.1 内容区content3.1.1 默认宽高元素类型宽高默认行为块级元素宽度默认auto填满父元素content区 高度由内容撑开行内元素宽高均由内容撑开无法设置width/height行内块元素宽高均由内容撑开可以设置width/height3.1.2 宽高相关属性CSS 属性名功能属性值width设置内容区域宽度长度max-width设置内容区域的最大宽度长度min-width设置内容区域的最小宽度长度height设置内容区域的高度长度max-height设置内容区域的最大高度长度min-height设置内容区域的最小高度长度 注意width / height 默认设置的是 content 的宽高不包含 padding / border / margin。3.2 内边距paddingpadding 用于在内容与边框之间创造空白。3.2.1 行内元素的特殊性行内元素可以设置左右 padding效果正常。行内元素也可以设置上下 padding背景会扩大但不会撑大父元素的行高可能造成与其他元素重叠。因此一般说“上下 padding 无效”指的是不影响周围布局但并非完全不能设置。3.2.2 属性列表CSS 属性名功能属性值padding-top上内边距长度padding-right右内边距长度padding-bottom下内边距长度padding-left左内边距长度padding复合属性长度可以设置 1~4 个值padding 复合属性的使用规则padding: 10px; → 四边均为 10pxpadding: 10px 20px; → 上下10px左右20pxpadding: 10px 20px 30px; → 上10px左右20px下30pxpadding: 10px 20px 30px 40px; → 上 右 下 左顺时针3.3 边框border边框可以设置在块级、行内、行内块元素上效果一致。3.3.1 基本属性CSS 属性名功能属性值border-width边框宽度CSS 中可用的长度值border-color边框颜色CSS 中可用的颜色值border-style边框风格solid实线、dashed虚线、dotted点线、double双实线默认值为 none因此必须设置 border-style 边框才能显示border边框复合属性复合属性无顺序要求如 border: 1px solid red;可以四个方向的单独控制border-top / border-right / border-bottom / border-left以及更细粒度的border-top-style、border-top-width、border-top-color 等。3.4 外边距marginmargin 用于控制盒子之间的间距。3.4.1 行内元素的特殊性行内元素左右 margin 有效会推开相邻行内元素行内元素上下 margin 无效不会改变行高也不会推开上下元素3.4.2 属性列表CSS 属性名功能属性值margin-top上外边距长度margin-right右外边距长度margin-bottom下外边距长度margin-left左外边距长度margin复合属性长度可以设置 1~4 个值margin 复合属性的使用规则规则与padding相同按照顺时针方向上、右、下、左设置margin: 10px; → 四个方向外边距都是 10px。margin: 10px 20px; → 上下外边距为 10px左右外边距为 20px。margin: 10px 20px 30px; → 上外边距 10px左右外边距 20px下外边距 30px。margin: 10px 20px 30px 40px; → 上外边距 10px右外边距 20px下外边距 30px左外边距 40px。与 padding 的两个重要区别特性marginpadding能否为负值可以如margin-left: -10px;不可以能否使用auto可以用于水平居中不可以✅ margin: 0 auto; 可以让块级元素在其父容器内水平居中。注意垂直方向 margin: auto 0; 无效除非使用 flex 等布局。4. 外边距的特殊问题4.1 父子 margin 塌陷Collapse现象当父元素没有 border/padding且第一个子元素有 margin-top或最后一个子元素有 margin-bottom时这个 margin 会“穿透”父元素作用在父元素的外部。出现这个问题的两个点1. 父子元素 2.子元素的 margin-top 或 margin-bottom “穿透”父元素与父元素外部的 margin 合并。style.box{background-color:#ddd;}.box1{background-color:greenyellow;margin:110px;}/stylebodydivclassboxdivclassbox1盒子1/div/div/body解决方案方案一 给父元素设置不为 0 的 padding 。方案二 给父元素设置宽度不为 0 的 border 。方案三给父元素设置 css 样式 overflow:hidden。 为什么有效padding / border 作为父元素的边界将子元素的 margin 与父元素外部隔开。这三种方法都让父元素成为一个独立的块级格式化上下文BFCBFC 内部的 margin 不会与外部的 margin 合并。塌陷问题只发生在块级元素之间。如果你把子元素设为 inline-block 或 float则不会发生塌陷。!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyleform{background-color:blueviolet;}#rel{margin:100px;}/style/headbodyformaction#nameinputtypetextname姓名passwordinputtypepasswordname密码idrel/form/body/html4.2 兄弟 margin 合并问题现象上下相邻的两个块级元素上元素的 margin-bottom 与下元素的 margin-top 会合并取两者中的较大值而不是相加。style.box1{margin-bottom:30px;}.box2{margin-top:20px;}/styledivclassbox1A/divdivclassbox2B/div!-- 实际间距为 30px不是 50px --出现这个问题的关键点1. 相邻兄弟元素 2. 上下margin设置注意左右 margin 不会合并会直接相加。合并只发生在块级元素。如果两个元素都是 inline-block则上下 margin 会正常相加。!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{background-color:orange;height:222px;width:222px;border:7px dotted pink;margin:17px;}.box1,.box2{display:inline-block;}/style/headbodydivclassbox box1盒子1/divdivclassbox box2盒子2/divdivclassbox box3盒子3/div/body/html而复原为块级则取最大值。5. 内容溢出处理overflow当子元素尺寸超过父元素时可以使用 overflow 控制溢出内容的显示。CSS 属性名功能属性值overflow溢出内容的处理方式visible显示默认值hidden隐藏scroll显示滚动条不论内容是否溢出auto自动显示滚动条内容不溢出不显示overflow-x水平方向溢出内容的处理方式同overflowoverflow-y垂直方向溢出内容的处理方式同overflowscroll无论是否溢出始终显示滚动条而auto只有溢出的时候显示滚动条所以我们常用的是auto和hidden。✅ overflow: hidden 除了裁剪溢出内容还能触发 BFC解决 margin 塌陷问题前面已提到。6. 默认样式与重置浏览器会给某些元素施加默认样式例如a下划线、蓝色、鼠标小手h1~h6加粗、特定字号、上下外边距p上下外边距ul/ol左内边距或左边距body默认有 8px 外边距四个方向…注意对于优先级元素的默认样式 继承的样式因此要覆盖默认样式必须直接选中该元素而不是通过父元素继承。实际开发中常用 reset.css 或 normalize.css 来统一不同浏览器的默认样式例如*{margin:0;padding:0;box-sizing:border-box;}7. 布局小技巧居中7.1 水平居中子元素类型方法块级元素给子元素设置margin: 0 auto;行内元素 / 行内块元素给父元素设置text-align: center;行内元素、行内块元素可以被父元素当做文本处理。可以利用父元素的文本属性控制行内/行内块子元素的排列对齐但不要滥用。7.2 垂直居中子元素类型方法块级元素父元素高度固定给子元素设置margin-top值为(父元素 content 子元素盒子总高) / 2。行内元素 / 行内块元素 单行给父元素设置height line-height⚠️ 如果一行内有多个行内/行内块元素它们的基线对齐可能导致整体不是严格居中。解决方案给父元素设置font-size: 0;消除基线影响然后子元素单独设置需要的font-size。以上为个人学习总结旨在梳理个人理解。如有疏漏或不当之处欢迎指正与交流。