CSS的布局 Day03

一、显示模式:

网页中HTML的标签多种多样,具有不同的特征。而我们学习盒子模型、使用定位和弹性布局把内容分块,利用CSS布局使内容脱离文本流,使用定位或弹性布局让每块内容摆放在想摆放的位置,让网站页面布局更合理、有条理。

1.1 标签分类

1.1.1 块状元素(block-level)

通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建

html 复制代码
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。

独占一行且自由设定

块级元素的特点:

(1)总是从新行开始【独占一行】

(2)高度,行高、外边距以及内边距都可以控制。【可以自由设定】

(3)宽度默认是容器的100% 【即可来源于父级】

(4)可以容纳内联元素和其他块元素

1.1.2 行内元素 (又叫内联元素inline)

一行共存多个;默认尺寸由内容撑开;加宽高生效

行内元素(内联元素inline)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。 常见的行内元素有

html 复制代码
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,
其中<span>标签最典型的行内元素。

行内元素的特点:

复制代码
一行共存多个;默认尺寸由内容撑开;加宽高生效

(1)和相邻行内元素在一行上。

(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

【不可自由赋值宽高】

(3)默认宽度就是它本身内容的宽度。

(4)行内元素只能容纳文本或则其他行内元素。(a特殊)

1.1.3 行内块状元素(inline-block)

复制代码
宽高属性生效;宽高默认由内容撑开

在内联元素中有几个特殊的标签

html 复制代码
<img />、<input />、<td>

可以对它们设置宽高和对齐属性,称它们为内联块状元素。 内联块状元素的特点:

(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
有间隙

(2)默认宽度就是它本身内容的宽度。

(3)高度,行高、外边距以及内边距都可以控制。

复制代码
宽高属性生效;宽高默认由内容撑开

1.1.4 转换display

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。

三者是可以互相转换的,使用display属性能够将三者任意转换:

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

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

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

例如:

块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。

css 复制代码
 div{
     display:inline;
 }
......
<div>我要变成内联元素</div>
相关推荐
m0_748247551 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进2 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203982 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2342 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1233 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~4 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语4 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg4 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全