CSS-盒模型、默认样式、边距合并、inline-block、外边距合并

最新推荐文章于 2022-09-26 21:29:51 发布

Pluto_lei

最新推荐文章于 2022-09-26 21:29:51 发布

阅读量528

点赞数

分类专栏： css笔记文章标签： css

本文链接：https://blog.csdn.net/pluto_lei/article/details/108825940

版权

css笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习目标

掌握盒模型类型、属性种类
掌握边距合并
掌握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）

Pluto_lei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-盒模型、默认样式、边距合并、inline-block、外边距合并

块级盒子 vs. 内联盒子Block box vs. Inline box代码案例块级盒子和行级盒子的差异欢迎 来饥人谷学习 前端 Java <style> p { border: 1px solid black; }span { border: 1px
复制链接

扫一扫