学习目标
- 掌握盒模型类型、属性种类
- 掌握边距合并
- 掌握inline-block的特殊性与缝隙
一、块级盒子 vs. 内联盒子
Block box vs. Inline box
代码案例
- 块级盒子和行级盒子的差异
<p>欢迎<p>
<p>来饥人谷学习</p>
<span>前端</span>
<span>Java</span>
<style>
p {
border: 1px solid black;
}
span {
border: 1px solid red;
}
</style>
1.1、块级盒子
特征
- 盒子会在水平方向上扩展并占据父容器在该方向上的所有可用空间
- 每个盒子都会换到新行
- width 和 height 属性有效
- 内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当 前盒子周围推开
- 可通过 display 属性改变显示类型
- 特点:块级盒子可以改变宽高
常见的块级标签
<h1>...<h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、 <header>、<main>、<footer>、<aside>、<nav>、<section>、<table>、<pre>
1.2、行级盒子
特征
- 盒子不会产生换行。
- width 和 height 属性将不起作用。
- 内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
- 可通过 display 属性改变显示类型
- 特点:行级盒子改变不了宽高
常见的行级标签
<a>、<span>、<em>、<strong>、<img>、<input>、 <label>、<textarea>、<select>、<button>、<code>...
二、CSS盒模型
完整的 CSS 盒模型应用于块级盒子,内联盒子只使用部分内容 模型定义了盒的每个部分 —— margin, border, padding, and content
2.1、盒模型的各个部分
盒模型组成
- Content: 这个区域是用来显示内容,大小可以通过设置 width 和 height.
- Padding: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。
- Border: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
- Margin: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。
2.2、标准盒模型 (不包含margin)
设置的width 和 height 指的是Content
- 宽度 = 350 + 25 + 25 + 5 + 5,高度 = 150 + 25 + 25 + 5 + 5 • margin不计入
- 实际大小,但会影响盒子实际占用空间
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
2.3、IE盒模型 (包含margin)
设置的width和height包含内边距和边框
- 浏览器默认使用标准盒模型,如想使用IE盒模型可以设置box-sizing
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
box-sizing: border-box; /* content-box */ 这句话可以设置宽度就是包含边框得
}
• 让页面的全部元素使用IE盒模型
以下两种方法哪种更好?(当然是方法2)
/* 方法1 */
* {
box-sizing: border-box;
}
/* 方法2 */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
三、盒模型属性
3.1、margin
- 外边距会有合并现象,暂时没讲
.box {
margin: 10px;
margin: 10px 20px; /*10px 20px 10px 20px */
margin: 10px 20px 30px 40px; /*上 右 下 左 */
}
.box {
margin: 0 auto; /* 0 auto 0 auto; 让块级盒子居中 */
}
.box {
margin-top: 10px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 40px;
}
3.2、padding
.box {
padding: 10px;
padding: 10px 20px; /*10px 20px 10px 20px */
padding: 10px 20px 30px 40px; /*上 右 下 左 */
}
.box {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
3.3、border
.box {
border: 1px solid black; /* solid、dashed、dotted */ dashed - - dotted . . .solid 实线
border-radius: 4px; 圆角
border-radius: 50%;
}
.box {
border-top: 10px solid #ccc;
border-bottom: 5px dashed yellow;
border-left: 10px solid transparent;
border-right: 1px dotted black;
}
3.4、 width、height
一般情况高度不写
width: 100%代表什么意思?
我的内容等于父亲得内容 如果有padding content得话会溢出,加上box-sizing: border-box;就会包含padding这些因素 ,就不会溢出
height: 100% 怎么用?
height 要用到%比得时候 直接父亲也要设置heigth 并且html也需要
height 满屏应用
<body>
<section>page1</section>
<section>page2</section>
<section>page3</section>
<section>page4</section>
</body>
body,html {
margin:0;
height:100%;
}
section {
height:100%;
}
section:nth-child(odd) {
background:red;
}
section:nth-child(even) {
background:blue;
}
内联盒子
下图能看出什么
- span的宽度和高度设置无效;左右外边距和左右内边距生效;上下外边距、上 下内边距和边框样式生效,但不占用空间
四、inline-block
4.1、使用 display: inline-block
- 设置width 和height 属性会生效。
- padding, margin, 以及border 会推开其他元素
- 它不会跳转到新行
- 设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性,又保持了inline元素不换行的特性
4.2、使用 display:inline
此元素会被显示为内联元素,元素前后没有换行符,即display:inline的作用即可以将一个块级元素转换成行内元素,那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。
4.3、使用 display:block
该属性会把元素转换为块级元素,此元素前后会带有换行符,因此就可以设置元素的宽高和上下的margin和padding
做一个导航条
<header>
<nav>
<a class="active" href="#1">首页</a>
<a href="#2">产品</a>
<a href="#3">关于</a>
</nav>
</header>
nav {
background:#ccc;
width:800px;
margin:0 auto;
text-align:center;
}
nav > a {
text-decoration:none;
color:#333;
padding:10px;
}
nav > a.active {
background:#999;
color:#fff;
display:inline-block;
}
nav > a:hover {
background:black;
color:white;
}
inline-block的缝隙
缝隙产生的原因?
- TAB、 LF、 FF、 CR、 SPACE 都是空白字符
- 多个连续的空白字符会合并成一个空格,而空格也占据 一个字符的空间
- white-space 属性可以修改合并规则
如何解决?
- 通过设置font-size解决
- 通过更改布局方式来解决,比如使用float、flex、grid布 局
小知识
CR、LF
- CR (/r)(Carriage Return)回车。老的打字机打印头回 到纸张最开头
- LF (/n)(Line Feed)换行。老的打字机打印头向下移 动一行
- 对于Windows, CRLF代表换行
- 对于老Mac, CR代表换行
- 对于新Mac、Linux,LF代表换行
小知识
• HTML实体
- 在HTML中,< < < 都表示小于
- 在CSS里,需要转换成16进制。 如 span::before { content: ‘\003C’ }
• ASCII
- 早期的编码方式,
- 支持128个字符,7位,占用1字节
• Unicode
- 涵盖世界上绝大多数语言字符,占用1~3字节,是标准化的编码方式
- https://unicode-table.com/en/
• UTF-8
- Unicode只是字符的数字代号,utf-8是这个代号的存储方式
- utf-8是变长码,前128个字符和ASCII一样
- 参考文章 https://blog.csdn.net/Deft_MKJing/article/details/79460485
五、display常见值
none 让一个元素消失
block 展示一个元素
inline-block 变成拥有块级和行内特性
inline 展示一个元素
flex
inline-flex
grid
inline-grid
table
table-cell
六、外边距合并
定义
• 块级元素的上外边距和下外边距有时 会合并(或折叠)为一个外边距,其 大小取其中的最大者
• 浮动元素和绝对定位元素的外边距不 会折叠
场景
• 相邻元素
相邻的两个块级元素之间的外边距会折叠
• 父子元素
- 如果在父元素与其第一个子元素之间不存在边框、内边距、 行内内容,也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开,父子外边距会折叠
• 空的块级元素 - 如果一个块级元素中不包含任何内容,并且在其 margin-top 与 margin-bottom 之间**没有边框、内边距、行内内容、 height、min-height **将两者分开,则该元素的上下外边距会 折叠
注意
- 如果参与折叠的外边距中包含负值,折叠后的外边距的值为最大的正边距与最 小的负边距(即绝对值最大的负边距)的和。
- 如果所有参与折叠的外边距都为负,折叠后的外边距的值为最小的负边距的值。 这一规则适用于相邻元素和嵌套元素。
案例一
邻居合并
<header>这是页面头部</header>
<main>这是页面内容</main>
<footer>这是页面尾部</footer>
<style>
header {
background: red;
margin: 10px;
}
main {
background: blue;
margin: 20px;
}
footer {
background: green;
margin: 30px;
}
</style>
问题:有哪些方法可以阻止边距合并
- 加border
- 加padding
- 创建块级格式化上下文
- 改变盒子特性(如浮动、绝对定位、改变display)