猿究院的小白研究猿前端入门块元素行内元素与定位详解（自用）

最新推荐文章于 2023-07-10 18:35:20 发布

Mufasha_

最新推荐文章于 2023-07-10 18:35:20 发布

阅读量381

点赞数 2

文章标签： python numpy 数据分析

本文链接：https://blog.csdn.net/Mufasha_/article/details/126295040

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

;块元素行内元素与定位
一、块元素与行内元素
二、定位
- 1.引入库
- 2.读入数据
总结

前言

HTML 元素根据其表现形式可以分为 2 种：

1.块级元素

2.行内元素

巧妙利用inline与block把两种不同元素的属性相互转换，可以做到简单页面的简单布局

提示：以下是本篇文章正文内容，下面案例可供参考

一、块元素

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。

常用的块级元素有：address, center, div, dl,, form, h1, h2, h3, h4, h5, h6, menu, ol, p, table, ul, li。

二、行内元素

行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。

常用的行内元素有：span、a、 img、 input、textarea、select、label。

三、块元素与行元素的相互转换

(1)display:inline;转换为行内元素

(2)display:block;转换为块状元素

(3)display:inline-block;转换为行内块状元素

块元素转换位行内元素写法如下：

<style type="text/css">
            .one{
                height: 100px;
                width: 100px;
                background-color: red;
                display: inline;
            }
        </style>

代码如下（示例）：

<style type="text/css">
            .two{
                height: 100px;
                width: 100px;
                background-color: gray;
                display: block;
            }
        </style>

定位

一、利用边距定位

内边距padding、外边距margin。

写法为：

padding：上右下左；（内边距）

margin：上右下左；（外边距）

写法为：

<style type="text/css">
 7             .box1{
 8                 width: 100px;
 9                 height: 100px;
10                 background-color: aqua ;
11                 
12                 padding-top: 10px;
13                 padding-right: 10px;
14                 padding-bottom: 10px;
15                 padding-left: 10px;
16             }
17             .box2{
18                 width: 100px;
19                 height: 100px;
20                 background: blueviolet;
22                 margin: 10px 20px 30px 40px;
23             }
24         </style>