HTML/CSS 备忘录 - 10. CSS 盒子模型
yuyutoo 2024-10-11 21:37 13 浏览 0 评论
一、元素的显示模式
1. 块元素（block）
- 在页面中独占一行 ，不会与任何元素共用一行，是从上到下排列的。
- 默认宽度：撑满父元素 。
- 默认高度：由内容撑开。
- 可以通过 CSS 设置宽高。
<html>、<body>
<h1>~<h6>、<hr>、<p>、<pre>、<div>
<ul>、<ol>、<li>、<dl>、<dt>、<dd>
<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
<form>、<option>2. 行内元素（inline）
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开。
<br>、<em>、<strong>
<sup>、<sub>、<del>、<ins>
<a>、<label>3. 行内块元素（inline-block）
- 在页面中不独占一行 ，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
- 默认宽度：由内容撑开。
- 默认高度：由内容撑开。
- 可以通过 CSS 设置宽高。
<img>、<td>、<th>
<input>、<textarea>、<select>、<button>
<iframe>4. 使用 display 属性修改显示模式
/* 元素会被隐藏, 不占用原来位置 */
display: none;
/* 元素作为块元素显示 */
display: block;
/* 元素作为行内元素显示 */
display: inline;
/* 元素作为行内块元素显示 */
display: inline-block;二、盒子模型的组成
CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。
- margin（外边距）：盒子与外界的距离。
- border（边框）：盒子的边框。
- padding（内边距）：紧贴内容的补白区域。
- content（内容）：元素中的文本或后代元素都是它的内容。
- 盒子的大小 = content + 左右 padding + 左右 border
- 外边距 margin 不会影响盒子的大小，但会影响盒子的位置。
三、内容区域
/* 设置内容区域宽度 */
width: 100px;
/* 设置内容区域最大宽度 */
max-width: 160px;
/* 设置内容区域最小宽度 */
min-width: 80px;
/* 设置内容区域高度 */
height: 200px;
/* 设置内容区域最大高度 */
max-height: 200px;
/* 设置内容区域最小高度 */
min-height: 200px;四、内边距
/* 上内边距 */
padding-top: 10px;
/* 右内边距 */
padding-right: 10px;
/* 下内边距 */
padding-bottom: 10px;
/* 左内边距 */
padding-left: 10px;
/* 复合属性, 四个方向内边距都是 10px */
padding: 10px;
/* 复合属性, 上下10px，左右20px */
padding: 10px 20px;
/* 复合属性, 上10px，左右20px，下30px */
padding: 10px 20px 30px;
/* 复合属性, 上、右、下、左 */
padding: 10px 20px 30px 40px;行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
五、边框
/* 边框线风格,复合了四个方向的边框风格 */
border-style: none;
border-style: solid dashed dotted double;
/* 边框线宽度,复合了四个方向的边框宽度 */
border-width: 3px;
/* 边框线颜色,复合了四个方向的边框颜色 */
border-color: #999;
/* 复合属性 */
border:5px solid red;- border-left
- border-left-style
- border-left-width
- border-left-color
- border-right
- border-right-style
- border-right-width
- border-right-color
- border-top
- border-top-style
- border-top-width
- border-top-color
- border-bottom
- border-bottom-style
- border-bottom-width
- border-bottom-color
边框圆角（css3）
/* 同时设置四个角圆角 */
border-radius: 10px;
/* 分别设置四个角*/
/*
一个值是正圆半径，
两个值分别是椭圆的 x 半径、 y 半径。
*/
border-top-left-radius: 10px;
border-top-right-radius: 5px 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 5px 10px;六、外边距
/* 左外边距 */
margin-left: 10px;
/* 右外边距 */
margin-right: 10px;
/* 上外边距 */
margin-top: 10px;
/* 下外边距 */
margin-bottom: 10px;
/* 复合属性，用法同padding */
margin: 10px 20px 30px 40px;- 子元素的 margin ，是参考父元素的 content 计算的。
- 块级元素、行内块元素，均可以完美地设置四个方向的 margin；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。
- margin 的值也可以是 auto，如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。
- margin 的值可以是负值。
1. margin 塌陷问题
margin 塌陷：第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。
解决方案：
- 方案一: 给父元素设置不为 0 的 padding。
- 方案二: 给父元素设置宽度不为 0 的 border。
- 方案三: 给父元素设置 css 样式 overflow:hidden。
2. margin 合并问题
margin 合并：上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
这种问题无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。
七、外轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓不占用页面空间不影响页面布局。
- outline-width：外轮廓的宽度。
- outline-color：外轮廓的颜色
- outline-style：外轮廓的风格。none | dotted | dashed | solid | double
- outline: 外轮廓复合属性。
- outline-offset：置外轮廓与边框的距离。不是 outline 的子属性。
outline-width: 3px;
outline-color: red;
outline-style: dashed;
outline:50px solid blue;
outline-offset: 5px;八、处理内容溢出
/* 显示溢出内容，默认 */
overflow: visible;
/* 隐藏溢出内容 */
overflow: hidden;
/* 显示滚动条，不论内容是否溢出 */
overflow: scroll;
/* 自动显示滚动条，内容不溢出不显示 */
overflow: auto;
/* 水平方向溢出内容的处理方式，用法同 overflow */
overflow-x:hidden;
/* 垂直方向溢出内容的处理方式，用法同 overflow */
overflow-y: auto;九、隐藏元素的方式
/* 显示溢出内容，默认 */
overflow: visible;
/* 隐藏溢出内容 */
overflow: hidden;
/* 显示滚动条，不论内容是否溢出 */
overflow: scroll;
/* 自动显示滚动条，内容不溢出不显示 */
overflow: auto;
/* 水平方向溢出内容的处理方式，用法同 overflow */
overflow-x:hidden;
/* 垂直方向溢出内容的处理方式，用法同 overflow */
overflow-y: auto;十、元素居中的方式
行内元素、行内块元素，可以被父元素当做文本处理，因此可以像处理文本对齐一样，去处理。
1. 子元素在父元素中水平居中
- 若子元素为块元素，给子元素加上：margin: 0 auto;
- 若子元素为行内元素、行内块元素，给父元素加上：text-align: center;
2. 子元素在父元素中垂直居中
- 若子元素为块元素，给子元素加上：margin-top，值为 (父元素 content - 子元素盒子总高)/2。
- 若子元素为行内元素、行内块元素，让父元素的 height = line-height ，每个子元素都加上: vertical-align: middle; 若想绝对垂直居中，父元素 font-size 设置为 0。
十一、元素之间的空白问题
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符
解决方案:
- 方案一：去掉换行和空格（不推荐）。
- 方案二：给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。
十二、行内块的幽灵空白问题
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案:
- 方案一：给行行内块设置 vertical-align，值不为 baseline 即可，设置为 middel、bottom、top 均可。
- 方案二：若父元素中只有一张图片，设置图片为 display: block。
- 方案三：给父元素设置 font-size: 0。如果该行内块内部还有文本，则需单独设置 font-size。
十三、box-sizing 怪异盒模型（CSS3）
/* width 和 height 设置的是盒子内容区的大小。（默认值） */
box-sizing: content-box;
/* width 和 height 设置的是盒子总大小。（怪异盒模型） */
/* 包括 border 与 padding */
box-sizing: border-box;十四、box-shadow 盒子阴影（CSS3）
/* box-shadow: h-shadow v-shadow blur spread color inset; */
/* 无阴影，默认 */
box-shadow: none;
/* 水平位置、垂直位置 */
box-shadow: 10px 10px;
/* 水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;
/* 水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;
/* 水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;- h-shadow：水平阴影的位置，必须填写，可以为负值。
- v-shadow：垂直阴影的位置，必须填写，可以为负值。
- blur：可选，模糊距离。
- spread：可选，阴影的外延值。
- color：可选，阴影的颜色。
- inset：可选，将外部阴影改为内部阴影。
十五、resize 调整盒子大小（CSS3）
/* 不允许用户调整元素大小(默认) */
resize: none;
/* 用户可以调节元素的宽度和高度 */
resize: both;
/* 用户可以调节元素的宽度 */
resize: horizontal;
/* 用户可以调节元素的高度 */
resize: vertical;十六、opacity 不透明度（CSS3）
opacity 属性能为整个元素（包括元素中的内容）添加透明效果，值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明。
opacity: 0.6;相关推荐
- Python操作Word文档神器:python-docx库从入门到精通
-
Python操作Word文档神器：python-docx库从入门到精通动动小手，点击关注...
- Python 函数调用从入门到精通:超详细定义解析与实战指南 附案例
-
一、函数基础：定义与调用的核心逻辑定义：函数是将重复或相关的代码块封装成可复用的单元，通过函数名和参数实现特定功能。它是Python模块化编程的基础，能提高代码复用性和可读性。定义语法：...
- 等这么长时间Python背记手册终于来了，入门到精通(视频400集)
-
本文毫无套路！真诚分享！前言：无论是学习任何一门语言，基础知识一定要扎实，基础功非常的重要，找一个有丰富编程经验的老师或者师兄带着你会少走很多弯路，你的进步速度也会快很多，无论我们学习的目的是什么，...
- 图解Python编程:从入门到精通系列教程(附全套速查表)
-
引言本系列教程展开讲解Python编程语言，Python是一门开源免费、通用型的脚本编程语言，它上手简单，功能强大，它也是互联网最热门的编程语言之一。Python生态丰富，库（模块）极其丰富，这使...
- Python入门教程(非常详细)从零基础入门到精通，看完这一篇就够
-
本书是Python经典实例解析，采用基于实例的方法编写，每个实例都会解决具体的问题和难题。主要内容有：数字、字符串和元组，语句与语法，函数定义，列表、集、字典，用户输入和输出等内置数据结构，类和对象，...
- Python函数全解析:从入门到精通，一文搞定!
-
1.为什么要用函数？函数的作用：封装代码，提高复用性，减少重复，提高可读性。...
- Python中的单例模式:从入门到精通
-
Python中的单例模式：从入门到精通引言单例模式是一种常用的软件设计模式，它保证了一个类只有一个实例，并提供一个全局访问点。这种模式通常用于那些需要频繁创建和销毁的对象，比如日志对象、线程池、缓存等...
- 【Python王者归来】手把手教你，Python从入门到精通!
-
用800个程序实例、5万行代码手把手教你，Python从入门到精通！...
- Python从零基础入门到精通:一个月就够了
-
如果想从零基础到入门，能够全职学习（自学），那么一个月足够了。...
- Python 从入门到精通:一个月就够了
-
要知道，一个月是一段很长的时间。如果每天坚持用6-7小时来做一件事，你会有意想不到的收获。作为初学者，第一个月的月目标应该是这样的：熟悉基本概念（变量，条件，列表，循环，函数）练习超过30个编...
- Python零基础到精通，这8个入门技巧让你少走弯路，7天速通编程!
-
Python学习就像玩积木，从最基础的块开始，一步步搭建出复杂的作品。我记得刚开始学Python时也是一头雾水，走了不少弯路。现在回头看，其实掌握几个核心概念，就能快速入门这门编程语言。来聊聊怎么用最...
- 神仙级python入门教程(非常详细)，从0到精通，从看这篇开始!
-
python入门虽然简单，很多新手依然卡在基础安装阶段，大部分教程对一些基础内容都是一带而过，好多新手朋友，对一些基础知识常常一知半解，需要在网上查询很久。...
- Python类从入门到精通，一篇就够!
-
一、Python类是什么？大家在生活中应该都见过汽车吧，每一辆真实存在、能在路上跑的汽车，都可以看作是一个“对象”。那这些汽车是怎么生产出来的呢？其实，在生产之前，汽车公司都会先设计一个详细的蓝图...
- 学习Python从入门到精通:30天足够了，这才是python基础的天花板
-
当年2w买的全套python教程用不着了，现在送给有缘人，不要钱，一个月教你从入门到精通1、本套视频共487集,本套视频共分4季...
- 30天Python 入门到精通（3天学会python）
-
以下是一个为期30天的Python入门到精通学习课程，专为零基础新手设计。课程从基础语法开始，逐步深入到面向对象编程、数据处理，最后实现运行简单的大语言模型（如基于HuggingFace...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)