盒子模型与样式排版

目录

前言:

1.先带大家复习一下前面学习过的知识:

1.1在外面写前端过程中怎么找到标签元素的选择器:

1.1.1通配符选择器:

1.1.2标签选择器:

1.1.3class选择器: 

1.1.4id选择器:

1.2样式表写法:

1.2.1.行内样式表:

1.2.2.内部样式表 :

1.2.3.外部样式表:

2.块元素基础特性(block)  :

2.1概念:

2.1.1独占一行：

2.1.2占据整个宽度：

2.1.3可以设置宽度、高度、对齐等属性：

2.1.4包含内联元素和其他块元素：

3行内元素基础特性(inline):

3.1以下是行内元素的基础特性：

3.1.1不独占一行：

3.1.1宽度和高度由内容决定：

3.1.1无法设置上下边距：

3.1.1只能容纳文本或其他行内元素：

4.行内块元素(inline-block):

4.1以下是行内块元素的主要特性:

4.1.1不独占一行：

4.1.2可以设置宽度和高度：

4.1.3保留块级元素的特性：

4.1.4主要用于水平横向布局：

4.1.5使用场景:

5.css属性的元素类型转换:

5.1进行元素类型转换：

5.1.1display: block;

5.1.2display: inline;

5.1.3display: inline-block;

5.1.4display: none:

6.盒子模型:

6.1盒子模型的组成如下：

6.1.1内容（content）：

6.1.2内边距（padding）：

6.1.3边框（border）：

6.1.4外边距（margin）：

 6.2 盒子的核心属性:

6.2.1width: 宽度,默认为浏览器的100%

6.2.1height: 默认为盒子内容

6.2.1overflow: 溢出处理(内容超出了盒子范围.怎么处理)

6.2.1visible; 正常显示溢出

6.2.1hidden; 隐藏显示溢出

6.2.1scroll; 滚轮显示内容

6.2.1 auto; 浏览器自动处理

6.3盒模型标签属性:

6.3.1margin -- 设置外边距

6.3.2 padding -- 设置内边距

 6.3.3 例子:

6.3.3.1margin例子:

6.3.3.2单独设置边距方向:

6.3.3.3设置内边距

6.3.4边框(border):

结语:

---

前言:

今天我们继续去学习前端今天我们学习关于盒子模型和样式排版,以下是对这两者的解释:

盒子模型是CSS技术所使用的一种思维模型，它将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容（Content，如文本、图片等）、内边距（Padding，内容区域和边框之间的空白区域）、边框（Border，包围内容和内边距的线）和外边距（Margin，边框和相邻元素之间的空白区域）四个部分组成。除去内容部分，其余每个部分又分别包含上、下、左和右四个方向，这些方向既可以分别定义也可以统一定义。

样式排版则是一种自动化排版的基本工具，是实现其他高级排版功能的基础。样式可以理解为格式的集合，包括字体设置、字号大小、对齐方式、添加项目符号等。在排版过程中，除了输入基础内容外，大多数工作都是在设置内容的格式。使用样式可以方便地为文字、表格等内容一次性投放多种格式，减少了为同类的多个内容重复设置格式的时间，也避免了人为操作失误，同时保证了格式上的统一。

1.先带大家复习一下前面学习过的知识:

1.1在外面写前端过程中怎么找到标签元素的选择器:

1.1.1通配符选择器:

*{属性:值;}

1.1.2标签选择器:

标签名{属性:值;}

1.1.3class选择器: 

.class名{属性:值;}

1.1.4id选择器:

#id名{属性:值;}

在这里有两个看起来很像其实他俩不是一回事:

 id和class选择器都需要提前给标签设置对应属性

两者区别:

        1.一个是#id名   一个是.class名  符号不同

        2. id是唯一的,只能设置一个. 类似于身份证. class可以有多个

1.2样式表写法:

1.2.1.行内样式表:

把样式写在标签内部

1.2.2.内部样式表 :

把样式写在head标签里的style标签中

1.2.3.外部样式表:

把样式写在.css文件里.通过link标签导入

2.块元素基础特性(block)  :

2.1概念:

让开发者更好的对页面进行布局,把网页分割为一个个区块

2.1.1独占一行：

块元素在页面中以区域块的形式出现，每个块元素通常都会独占一行或多行，即它们会在新行开始显示，相邻的块级元素将会在不同行显示。这使得块元素在垂直方向上有一定的间距，有助于区分不同的内容块。

2.1.2占据整个宽度：

块元素默认会占据其父容器的整个宽度，即它们会横向扩展到最大宽度。这使得块元素在水平方向上能够填满其父容器，从而实现各种复杂的页面布局。

2.1.3可以设置宽度、高度、对齐等属性：

块元素允许设置宽度、高度、对齐等属性，这使得开发者可以精确地控制块元素在页面中的位置和大小。通过调整这些属性，可以实现各种复杂的页面效果。

2.1.4包含内联元素和其他块元素：

块元素内部可以包含其他块元素和内联元素，因此可以构建复杂的嵌套结构。这使得块元素在网页结构的搭建中具有很大的灵活性。

常见的块元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、其中 <div> 标签是最典型的块元素，常用于页面布局和容器。

3行内元素基础特性(inline):

行内元素（Inline elements）与块级元素相比，更像是“打工人”，它们主要作为内容存在，

3.1以下是行内元素的基础特性：

3.1.1不独占一行：

行内元素不会独占一行，它们会在同一行内显示，直到该行没有足够的空间为止。然后，它们会移到下一行继续显示。这与块级元素不同，块级元素通常会独占一行。

3.1.1宽度和高度由内容决定：

行内元素的宽度和高度是由其内容决定的，无法通过CSS直接设置具体的宽度和高度值。它们的尺寸会自适应其内容的大小。

3.1.1无法设置上下边距：

对于行内元素，上下边距（margin-top 和 margin-bottom）是无效的，即使在CSS中设置了这些值，也不会影响行内元素的布局。但是，左右边距（margin-left 和 margin-right）是有效的，可以用于调整行内元素之间的水平间距。

3.1.1只能容纳文本或其他行内元素：

行内元素通常只包含文本或其他行内元素。它们不能包含块级元素，但可以被块级元素包含。

常见的行内元素包括 <span>、<a>、<strong>、<em>、<i>、<u>、<img> 等。这些元素常用于标记文本内容，如链接、强调文本等。

没有自己地盘.内容大小就是自身大小. 所以给它设置宽高,对齐都是无效。

4.行内块元素(inline-block):

行内块元素（Inline-block elements）结合了行内元素和块级元素的一些特性，主要用于水平横向布局。

4.1以下是行内块元素的主要特性:

4.1.1不独占一行：

与行内元素相似，行内块元素不会独占一行。它们可以与其他行内元素或行内块元素并排显示在同一行中，直到该行没有足够的空间为止。

4.1.2可以设置宽度和高度：

与块级元素相似，行内块元素允许设置宽度和高度。这意味着开发者可以精确地控制行内块元素在页面中的大小和形状。

4.1.3保留块级元素的特性：

行内块元素保留了块级元素的一些特性，如可以设置上下边距（margin-top 和 margin-bottom）和内外边距（padding）。这使得行内块元素在布局上具有更大的灵活性。

4.1.4主要用于水平横向布局：

由于行内块元素可以结合行内元素和块级元素的特性，它们特别适合于创建水平横向布局。通过调整行内块元素的宽度、高度和边距等属性，可以实现各种复杂的水平布局效果。

4.1.5使用场景:

常见的使用场景包括创建水平导航菜单、按钮组或图标列表等。在这些场景中，行内块元素可以方便地控制元素之间的间距和对齐方式，从而实现整洁、一致的页面布局。

5.css属性的元素类型转换:

属性用于控制元素的显示方式，包括将元素从一种类型转换为另一种类型。

5.1进行元素类型转换：

5.1.1display: block;

将元素转换为块级元素。块级元素会独占一行，宽度默认为其父元素的100%（除非设置了具体的宽度值），并且可以设置宽度、高度、上下边距等属性。常见的块级元素有<div>、<p>、<h1>到<h6>等。

5.1.2display: inline;

将元素转换为行内元素。行内元素不会独占一行，而是与其他行内元素并排显示，宽度和高度由其内容决定，无法设置具体的宽度和高度值。同时，上下边距对行内元素无效，但左右边距有效。常见的行内元素有<span>、<a>、<img>等。

5.1.3display: inline-block;

将元素转换为行内块元素。行内块元素结合了行内元素和块级元素的特点，既可以与其他行内元素并排显示，又可以设置宽度、高度、上下边距等属性。这使得行内块元素在布局上更加灵活，常用于创建水平导航菜单、按钮组等场景。

5.1.4display: none:

将元素隐藏，使其在页面上不可见。需要注意的是，隐藏元素仍然会占据页面上的空间（即其位置仍然保留），只是内容不会被渲染出来。如果希望元素不占据空间地完全消失，可以考虑使用visibility: hidden;属性，但这种方式下元素虽然不可见，但仍然会占据空间。

6.盒子模型:

盒子模型（Box Model）是CSS中用于设计和布局的基本概念，它描述了元素在页面上的呈现方式以及元素之间的空间关系。每个HTML元素都可以看作是由内容、内边距、边框和外边距组成的矩形盒子。

6.1盒子模型的组成如下：

6.1.1内容（content）：

这是元素本身的内容，如文本、图片等。它的宽度和高度可以通过CSS的width和height属性来设置。但在实际计算时，需要注意区分标准盒模型和IE盒模型（怪异盒模型）的差异。在标准盒模型中，width和height只包括内容的宽度和高度；而在IE盒模型中，width和height包括了内容、内边距和边框的宽度和高度。

6.1.2内边距（padding）：

内容区域与边框之间的空间，是内边距。内边距是透明的，不会遮挡背景。可以通过CSS的padding属性来设置内边距的大小，包括padding-top、padding-right、padding-bottom和padding-left四个方向的内边距。内边距的设置会影响到盒子的大小。

6.1.3边框（border）：

内边距和外边距之间的边界就是边框。边框是围绕在内边距和内容周围的线条，是可见的。可以通过CSS的border属性来设置边框的样式、宽度和颜色。同样，边框的设置也会影响到盒子的大小。

6.1.4外边距（margin）：

边框与其他元素之间的空白区域是外边距。外边距是透明的，不会遮挡背景。可以通过CSS的margin属性来设置外边距的大小，包括margin-top、margin-right、margin-bottom和margin-left四个方向的外边距。外边距是盒子之间的间距，它并不属于任何一个盒子，

不会影响到盒子的大小，但会影响到盒子的占位。

需要注意的是，虽然外边距不属于盒子的大小，但它会影响到盒子的占位。当两个垂直的外边距相遇时，它们会形成一个外边距，这个外边距的大小等于两个相遇的外边距中的较大值，这种现象被称为外边距合并。

 6.2 盒子的核心属性:

6.2.1width: 宽度,默认为浏览器的100%

6.2.1height: 默认为盒子内容

6.2.1overflow: 溢出处理(内容超出了盒子范围.怎么处理)

6.2.1visible; 正常显示溢出

6.2.1hidden; 隐藏显示溢出

6.2.1scroll; 滚轮显示内容

6.2.1 auto; 浏览器自动处理

6.3盒模型标签属性:

6.3.1margin -- 设置外边距

        margin: 10px

6.3.2 padding -- 设置内边距

        padding: 10px;

 6.3.3 例子:

6.3.3.1margin例子:

        margin: 10px;   # 距离4个方向10px   主要基于左/上

        margin: 10px 20px;  #  距离上10px  左20px  

        margin: 10px 20px 30px;  # 距离上10px 左右20px 下30px

        margin: 10px 20px 30px 40 ;  # 距离上10px 右20px 下30px 左40px



        margin设置左右居中:

        margin: 任意值 auto;

        auto会自动计算页面宽度,实现居中

6.3.3.2单独设置边距方向:

        margin-top -- 设置上外边距

        margin-right -- 设置右外边距

        margin-bottom -- 设置下外边距

        margin-left -- 设置左外边距

6.3.3.3设置内边距

       

 padding-top -- 设置上内边距

        padding-right -- 设置右内边距

        padding-bottom -- 设置下内边距

        padding-left -- 设置左内边距

6.3.4边框(border):

    边框复合写法:       

border: 1px solid #096;  粗细,样式,颜色



    border-width -- 边框粗细

        border-width: 5px;

    border-style -- 边框样式

        border-style: solid;

    border-color -- 边框颜色

        border-color: #096;

    border-radius -- 边框圆角

        border-radius: 20px;



    border-top -- 设置上边框

    border-right -- 设置右边框

    border-bottom -- 设置下边框

    border-left -- 设置左边框

结语:

好了,今天关于盒子模型的分享就到这里了,其实关于盒子模型还有很多内容,我这里提到的几个只是我们平时最常用到的几个,以上内容都是我个人的一些学习成果,内容来源于网络,可能会有所遗漏,欢迎大家指正,也欢迎大家在评论区和谐讨论。