前端基础(三)----盒子模型与元素显示类型

目录

1. 盒子模型

 1.1 盒子模型-内容区域

1.2 盒子模型-边框区域

1.3 盒子模型-内边距区域 

1.4 盒子模型-外边距区域

1.5 标准盒子与怪异盒子

2. 元素显示类型 

2.1 块元素

2.2 行内元素

2.3 行内块元素

2.4 元素显示模块转换

3 作业

---

1. 盒子模型

CSS中我们可以将元素看出成一个个矩形盒子，对于页面的布局就是将不同盒子放在不同的位置。由四个部分构成，从内到外分别为内容区、内边距、边框和外边距。

盒模型示意图：

 1.1 盒子模型-内容区域

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

• hidden：表示隐藏溢出的部分；

• visible：表示显示溢出的部分（溢出的部分将显示在盒子外部）；

• scroll：表示为内容区添加一个滚动条，您可以通过滑动这个滚动条来查看内容区的全部内容；

• auto：表示由浏览器决定如何处理溢出部分。

1.2 盒子模型-边框区域

边框是环绕内容区和内边距的边界，你可以使用 border-style、border-width 和 border-color 以及它们的简写属性 border 来设置边框的样式。其中 border-style 属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。

边框的三要素：边框的粗细 边框的样式 边框的颜色

边框线类型：

值	描述
none	默认：无边框。
solid	定义实线
dotted	点状边框
dashed	虚线
double	双线

1.3 盒子模型-内边距区域 

内边距是内容区和边框之间的空间，你可以通过 padding-top、padding-right、padding-bottom、padding-left 以及它们的简写属性 padding 来设置内容区各个方向上与边框之间的距离。

取值	示例	含义
一个值	padding: 10px	上下左右都设置为10px
两个值	padding: 10px 20px	上下设置为10px，左右设置为20px
三个值	padding: 10px 20px 30px	上设置为10px，左右设置为20px，下设置为30px
四个值	padding: 10px 20px 30px 40px	上设置为10px，右设置为20px，下设置为30px，左设置为40px

1.4 盒子模型-外边距区域

外边距位于盒子模型的最外围，是边框之外的空间，通过外边距可以使盒子与盒子之间不会紧凑的连接在一起，是 CSS 布局中的一种重要手段。您可以使用 margin-top、margin-bottom、margin-left、margin-right 以及它们的简写属性 margin 来设置各个方向上外边距的宽度。

1.5 标准盒子与怪异盒子

默认情况下盒子的大小是由内容区、内边距、边框共同决定的

我们可以使用 box-sizing 属性来指定盒模型的尺寸计算方式

• content-box：默认值 宽度和高度是用来设置内容区的大小

• border-box：宽度和高度是用来设置整个盒子的大小

2. 元素显示类型 

在HTML中有很多标签，不同的标签在页面中的显示效果是不一样的。比如说div之间默认会换行显示 两个span之间会在一行显示。我们根据HTML标签的显示特点我们将标签分为三类：块元素、行内元素、行内块元素.

2.1 块元素

div h1~h6 p ul ol li form, table

独占一行，内容不够一行的地方会被默认添加外边距。外边距可以要块级盒子水平居中

margin:0 auto;

• 可以设置宽高，宽度默认是父元素的宽度，高度默认由内容撑开默认是0px

• 可以正常的设置上下外边距和内边距

• 块级元素一般作为大容器，可以嵌套：块级元素、行内元素、行内块元素等等……

p元素除外,p标签中不要嵌套div、p、h等块级元素

2.2 行内元素

a、span 、b、u、i、s、strong、ins、em、del……

• 用于控制页面中文本的样式

• 一行可以显示多个,不独占一行。用来包裹文字级别的

• 宽度和高度默认由文字大小撑开

• 不可以设置宽高，写了也不生效

• 左右外边距内边距边框有效，上下外边距内边距边框无效。只是视觉上可以看到，不会影响页面的布局。

<style>
    span {
        /* 只是视觉上可以看到 */
        padding: 20px;
        background-color: green;
    }
    
    div {
        width: 300px;
        height: 300px;
        background-color: red;
    }
</style>

<span>span1</span>
<span>span2</span>
<div></div>

• 标签换行解析空格

• 结构上：内部不能放块元素，但是a标签能包裹块级元素做区域链接。同时注意a标签内部可以嵌套任意元素

  • 但是：a标签不能嵌套a标签

2.3 行内块元素

• 对内是块级（可以设置宽高），对外是行内元素（一行可以显示多个）

• input、textarea、button、select……

• 上下左右外边距内边距有效

• 解析空格

• 结构上内部可以包裹任何的元素

2.4 元素显示模块转换

目的：改变元素默认的显示特点，让元素符合布局要求

属性	效果
display：block	转换成块级元素
display：inline-block	转换成行内块元素
display：inline	转换成行内元素

3 作业

第五章 案例