CSS学习第二天：元素类型与盒子模型-优快云博客

本文链接：https://blog.youkuaiyun.com/CSNMD/article/details/144226145

CSS学习第二天

内容概要
html元素类型
盒子模型

内容概要

1、块级元素、行内元素，特性与转化
2、核子模型

html元素类型

块级元素

1、在网页中以矩形区域的形式显示

2、默认情况下，一个块级元素就会独占一行，自上而下排列

3、块级元素可以定义宽高属性

4、块级元素可以作为其他元素的容器

文字类的元素除外。如：p标签，是块级元素，但不能编写其他块级元素作为p的子元素

5、宽度默认是父级元素的100%

常见的块级元素有：
- div
- dl,dt,dd,ol,ul
- h1-h6
- p
- form
- hr
- col,table,tr,td;

div用的最多，多用于布局。

虽然html5推出了语义化的布局标签，但实际并没有被广泛使用。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_元素类型</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #app1 {

            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        #app2 {
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app1">
    哇哈哈
</div>
<div id="app2">
    哇哈哈
</div>
</body>
</html>

在这里插入图片描述

行内元素

1、多个行内元素在一行中挨个显示

2、行内元素没有自己的形状，不能定义宽高。默认宽度就是内容的宽度。最小的内容单元也是矩形

3、行内元素只能容纳其他行内元素，或文本

注意，a标签内不能再放a标签

常见的行内元素
- a
- strong、b等一批文本标签
- select、textarea
- br
- span

行内块元素

在行内元素中，有几个比较特殊，同时具有行内元素和块级元素的特点：img、input、td

和相邻行内块元素在一行展示，但之间会有空白间隙
宽高、内外边距都可以设置

元素类型的转换

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display: inline-block;

小结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含的任何标签
行内元素	一行可以放多个行内元素	不可以设置宽度高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度高度	它本身内容的宽度

盒子模型

所有的html元素，都可以看做是一个盒子

在这里插入图片描述
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完整大小的元素，还必须添加内边距，边框和外边距。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_盒子模型</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #app {
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 5px solid red;
            padding: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
<div id="app">嘻嘻</div>
</body>
</html>