031_div和span

1. html标签按照元素种类可以分为块级元素(display: block); 行内元素(display: inline)和行内块元素(display: inline-block)三种。

2. 块级元素

2.1. 块元素指的是占据全部可用宽度的元素, 并且在其前后都会换行。块级元素一般可嵌套块级元素、行内块元素或行内元素。最常用的块级元素是div。

2.2. 默认特点:

2.2.1. 独占一行, 通常会以新行来开始和结束。

2.2.2. 可以设置width, height, margin, padding等属性。

2.2.3. 占据全部可用宽度, 默认值为100%。

3. 行内元素

3.1. 行内元素通常不会以新行开始, 显示在一行, 宽度随内容变化, 当到达父元素宽度时换下一行显示。内联元素只能容纳文本或其他行内元素。最常用的行内元素是span。

3.2. 默认特点:

3.2.1. 排在一行, 宽度随内容变化。

3.2.2. 设置width, height无效(可以设置line-height指定高度)。

3.2.3. margin水平方向有效, 垂直方向无效。

3.2.4. padding水平方向有效, 垂直方向有特殊效果(不是边距效果), 具体表现: 不影响位置, 影响视觉。

4. 行内块元素

4.1. 行内块既有行内元素的一些特性又有块级元素的一些特性。

4.2. 默认特点:

4.2.1. 多个元素排在一行。

4.2.2. 可以设置width, height, margin, padding等属性。

5. <div>元素

5.1. <div>元素是块级元素, 它是可用于组合其他html元素的容器。

5.2. <div>元素没有特定的含义。实际上, 换行是<div>固有的唯一格式表现。

5.3. 如果用id或class来标记<div>, 那么该标签的作用会变得更加有效。

5.4. <div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

5.5. <div>元素常用作布局工具, 因为能够轻松地通过CSS对其进行定位。

5.6. 使用<div>元素的html布局

5.6.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta charset="utf-8" /><title>div 布局</title><style type="text/css">#header {background-color: black;color: white;text-align: center;height: 100px;}#header h1 {margin: 0;line-height: 100px;}#nav {line-height: 30px;background-color: #eeeeee;height: 300px;width: 100px;float: left;padding: 5px;   margin: 0px;     }#section {width: 350px;float: left;padding: 10px;         }#footer {background-color: black;color: white;clear: both;text-align: center;padding: 5px;         }</style></head><body><div id="header"><h1>City Gallery</h1></div><div id="nav">London<br />Paris<br />Tokyo<br /></div><div id="section"><h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p></div><div id="footer">Copyright ? W3Schools.com</div></body>
</html>

5.6.2. 效果图

6. <span>元素

6.1. <span>元素是内联元素, 可用作文本的容器。用来组合文档中的行内元素。

6.2. <span>元素也没有特定的含义。

6.3. 当与CSS一同使用时, <span>元素可用于为部分文本设置样式属性。

7. 早期没有div的时候都是使用table布局

7.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta charset="utf-8" /><title>table 布局</title><style type="text/css">#header {background-color: black;color: white;text-align: center;width: 100%;height: 100px;}#nav {height: 300px;width: 100px;float: left;background-color: #eeeeee;text-align: left;line-height: 30px;}#nav td {vertical-align: top;}#section {width: 350px;float: left;}span {display: inline-block;margin: 12px 0;}#footer {background-color: black;color: white;clear: both;text-align: center;padding: 5px; width: 100%;     }</style></head><body><table id="header"><tr><td><h1>City Gallery</h1></td></tr></table><table id="nav"><tr><td>London<br />Paris<br />Tokyo</td></tr></table><table id="section"><tr><td><h2>London</h2></td></tr><tr><td>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</td></tr><tr><td><span>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</span></td></tr></table><table id="footer"><tr><td>Copyright ? W3Schools.com</td></tr></table></body>
</html>

7.2. 效果图

031_div和span相关推荐

MTK Android添加驱动模块
1 [编写linux驱动程序] 1.1 一.编写驱动核心程序 1.2 二.配置Kconfig 1.3 三.配置Makefile 1.4 四.配置系统的autoconfig 1.5 五.编译 2 [编写 ...
css html span 块状不换行
span标记的样式设定width属性,会发现不会产生效果. 如果设置display:block,width属性生效,但是此时的span跟div一样了. 如果设置display:inline-bloc ...
AttributeError: ‘NoneType‘ object has no attribute ‘span‘
span 是返回配置到内容的下标,使用span 的时候需要注意,当匹配不到内容的时候就会报错了, 如下的例子就会报错 str_content = "Python is a good lang ...
[Swift]LeetCode901. 股票价格跨度 | Online Stock Span
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
行内标签（最常用的：a标签、img标签、span标签）
a 标签: 功能: 从一个页面跳转到其他页面,或者是当前页面的其他位置. 属性: href :指定跳转的目标路径. 值可以是一个外部网站的地址: 也可以是一个内部网页的地址 target: _self ...
交换机SPAN功能配置
实验项目性质:验证性计划学时:4学时一.实验目的掌握交换机设备的端口镜像(SPAN)功能与原理,掌握配置指令与用法. 二.实验原理用户可以利用端口镜像(SPAN)提供的功能,将指定端口的报文复 ...
数学中的span以及线性流形是什么意思
span在矩阵论中是指生成线性子空间V1V_1V1的意思. 说到线性子空间,那肯定有原线性空间VVV. 我们从VVV中取nnn个向量,x1,⋯,xnx_1,\cdots,x_nx1,⋯,xn,他 ...
Android之TextView的样式类Span的使用具体解释
Android中的TextView是个显示文字的的UI类,在现实中的需求中,文字有各式各样的样式.TextView本身没有属性去设置实现,我们能够通过Android提供的 SpannableStrin ...
获得span里面价值（在特殊情况下）
如何获得A? <div class="warpper"><span class="content">A<span>123&l ...

031_div和span

031_div和span相关推荐

最新文章

热门文章