、

...

、

、
、

、、、

、

常用的内联元素有：

、、
、、、、、、、、

常用的内联块元素有：

、

块级元素特点：

1、每一个块级元素都是从新的一行开始的，然后元素也是另一行。(真霸道，一个块级元素独占一行)

2、可设置元素的高度、宽度、行高、顶部和底部距离。

3、除非设置一个宽度，否则元素宽度是其父容器的100%(与父元素宽度一致)。

内联元素特点：

1、与其他元素同行；

2、不能设置元素的高度、宽度、顶部和底部边距；

3、元素的宽度是它所包含的文字或图片的宽度，不能改变。

inline-block 元素特点：

1、与其他元素同行；

2、可设置元素的高度、宽度、行高、顶部和底部距离。

CSS包含三种基本的布局模型，用英语概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

先说流动模型，流动模型。（Flow）是默认的网页布局模式。也就是说，网页处于默认状态。 HTML 网页元素根据流动模型分布网页内容。

流动布局模型有两个典型特点：

首先，块状元素会在所包含的元素中自上而下垂直延伸分布，因为在默认情况下，块状元素的宽度是100%。事实上，块状元素会以行的形式占据位置。

第二，在流动模型下，内联元素将从左到右水平分布在所包含的元素中。

层布局模型就像图像软件Photoshop中非常流行的层编辑功能一样，每个层都可以准确定位操作，但在网页设计领域，由于网页大小的活动，层布局并不流行。但在网页上局部使用层布局仍然很方便。


如何准确定位网页中的html元素，就像图像软件Photoshop中的图层一样，可以准确定位每个图层。CSS定义了一组定位（positioning）支持层布局模型的属性。

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

层模型-绝对定位：

如果您想为元素设置层模型中的绝对定位，则需要设置position:absolute(表示绝对定位)，将元素从文档流中拖出，然后使用left、right、top、bottom属性相对于其最接近的具有定位属性的父包含块进行绝对定位。如果没有这样的包含块，则相对于body元素，即相对于浏览器窗口。


层模型-相对定位：

如果要设置元素层模型中的相对定位，则需要设置position:relative(表示相对定位)，通过left、right、top、bottom属性确定了正常文档流中元素的偏移位置。相对定位的过程是先按static完成的(float)生成一个元素(元素像层一样浮动)，然后与之前的位置移动相比，移动的方向和幅度由left组成、right、top、bottom属性确定，偏移前的位置保持不动。


侧模型-固定定位：

fixed：表示固定定位，类似于absolute定位类型，但它的相对移动坐标是视图(屏幕上的网页窗口)本身。由于视图本身是固定的，它不会随着浏览器窗口滚动条的滚动而改变。除非您在屏幕上移动浏览器窗口的屏幕位置，或者改变浏览器窗口的显示尺寸，否则固定定位元素将始终位于浏览器窗口中视图的某个位置，不会受到文档流量的影响，这与background有关-attachment:fixed;属性功能相同。



不确定宽度的块状元素中间有三种方法(这三种方法目前使用很多)：

加入 table 标签

设置 display: inline 方法：与第一种类似，显示类型设置为 行内元素，设置不定宽元素的属性

设置 position:relative 和 left:50%：利用 相对定位 将元素向左偏移的方式 50% ，也就是说，达到居中的目的

单行文本垂直居中的方法是通过设置父元素来设置 height 和 line-height 实现高度一致。(height: 元素的高度，line-height: 顾名思义，行高(行间距)是指在文本中，行与行之间， 基线之间的距离 )。在 chrome、firefox 及 IE8 display可以在上述浏览器下设置块级元素 为 table-cell激活(设置为表单元显示) vertical-align 属性，但要注意 IE6、7 不支持这种风格， 兼容性相对较差。




本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。


上一篇 php解析html文件(php 解析)

下一篇 html, xhtml和xml

相关专题

• memo,useCallback之间的联系
• 使用 React.lazy() 实现按需加载组件，提高应用性能！
• 记录改造一个2018年的react老项目到vite4.3全过程
• React应用逻辑变得复杂后,部件render花费的时间会明
• React+Ts中如何优雅的二次封装组件
• Ant Design 弹窗封装：易用性和可维护性
• React 状态管理方案 （三）· zustand
• 浅谈原型链
• GET 和 POST 有什么不同?
• Android进阶宝典 -- 解读Handler机制核心源码，让ANR无处可藏
• 文件上传，搞懂这8种场景就够了
• JavaScript里的Proxy目标与Object
• 怎样在Rust中概念定义应用闭包
• 过程间的通信方式?能够介绍一下进度的通讯方式有什么吗?
• 纯css实现117个Loading效果（上）
• 手把手带你用Django实现一个后台管理系统
• 前面构建工具vite升阶系列产品怎样学习
• 一个Web3开发的入门历程
• MDC(Mapped Diagnostic Context)
• 应用kubernetes容器化部署的服务项目如何记录和搜集日