__x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block
1. 块元素block
- 独占一行的元素
- 一般使用块元素包含内联元素,用作页面布局
- <a> 标签可以包含任何除了a标签以外的元素
- <p> 标签不能包含块元素
- h1... ...h6
- <hr />
- <center></center>
- <div> 标签不含任何语义,被用于页面布局
2. 内联元素 inline
行内元素 只占自身大小的位置,不会独占一行。通常用于选中文本,设置样式
- 内容区 不能设置 width 和 height ,设置了没用。
- 水平方向 内边距,可以设置,会影响布局,正常
- 垂直方向 内边距,可以设置,不会影响布局,会覆盖原位置其他元素
- 水平方向的 边框,可以设置,会影响布局,正常
- 垂直方向的 边框,可以设置,不会影响布局,会覆盖原位置其他元素
- 水平方向的 外边距,可以设置,且不会重叠,而是求和增加
- 垂直方向的 外边距,不能设置
- <span></span> 无任何语义,用于选中行内内容,进行样式设置
- <img></img>
- <a></a>
- <iframe></iframe>
3. 行内块元素 inline-block
既有块元素特点,又有内联元素的特点。
既可以设置 width 和 height,又不会独占一行。
值得注意的是:
在 HTML5 中,已经不使用这两个概念了,而是用了更复杂的
__x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block的更多相关文章
- __x__(8)0906第三天__乱码问题
需要知道: 计算机只认 0 1 任何内容,计算机都会以 0 1 去存储 所以 0 1 与内容的编码方式/解码方式需要依照一定的规则,实现 0 1 与内容之间的转换. 字符集:一定的规则,由编码/解码采 ...
- __x__(9)0906第三天__常见的标签
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- __x__(10)0906第三天__字符实体(转义字符)
实体:也叫转义字符,在网页中,一些类似“大于号”和“小于号”这样的字符,无法直接使用,需要用特殊的字符串来表示. 实体语法: “&实体名字;” 或者 “&实体编号;” 注意: 最好使用 ...
- __x__(11)0906第三天__图片标签
图片标签 <img src="images/1.gif" alt="冰河世纪的大松鼠" width="80%" /> Hell ...
- __x__(12)0906第三天__<meta>标签
<meta name=" " content=" " />标签常用功能: 指定浏览器对当前页面的字符集: <!doctype html> ...
- __x__(14)0906第三天__<iframe> 内联框架 引入有一个外部html页面
在现实开发中,不推荐使用内联框架,因为<iframe></iframe>中的内容不会被搜索引擎检索. 在特殊情况中,如内网项目,不用放在互联网上时,可以使用<iframe ...
- __x__(15)0906第三天__超链接
HTML5 中的新属性. 属性 值 描述 charset char_encoding HTML5 中不支持.规定被链接文档的字符集. coords coordinates HTML5 中不支持.规定链 ...
- __x__(16)0906第三天__层叠样式表CSS简介
层叠样式表CSS Cascading Style Sheets 用来为网页创建样式表,通过样式表对网页进行装饰. 所谓层叠,就是将网页想象成一层一层的结构,层次高的将覆盖层次低的. CSS可以为网页的 ...
- html5 区块与内联div 与span html块级元素
HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块 ...
随机推荐
- 抓包工具Charles基本用法
我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据.或者使用Http ...
- Design Principles and Design Patterns
设计原则解读. 设计原则是对设计模式的约束性要求,属于设计中基本的四项特征,不符合此四项特征的设计,不具有生命力. 设计模式也是在此四项设计原则上的具体化实例化衍生物. Martin原文: http: ...
- 【*和&】复习-杂七杂八代码收集
int main() { ;//整数k,地址为x00CFFCA4 int &c = k;//引用参数c,c及&c的值与k及&k相同 int *w = &k;//指针 ...
- Mongodb注入
0x01 Brief Description 作为nosql(not only sql)数据库的一种,mongodb很强大,很多企业也在用到.相对于sql数据库,nosql数据库有以下优点:简单便捷. ...
- python的request包
1,request包基本用法 import requests a=requests.get("http://www.baidu.com")print a.text #以文本形式打印 ...
- perl 之 正则表达式 (简)
正则表达式,简单介绍: 元字符 匹配项 字符类:单字符与数字 . 匹配除换行符之外的任意字符 [a-z0-9] 匹配集中任意单字符 [^a-z0-9] 匹配不在集合中的任意单字符 \d 匹配单个数 ...
- 【转载】Vue自定义指令实现pc端加载更多
转载来源:https://www.86886.wang/detail/5a6f19e644f9da55274c3bbd,谢谢作者分享! 原理 document.documentElement.scro ...
- Python--subprocess
本节内容 os与commands模块 subprocess模块 subprocess.Popen类 总结 我们几乎可以在任何操作系统上通过命令行指令与操作系统进行交互,比如Linux平台下的shell ...
- Flask开发微电影网站(五)
后台管理页面是系统管理员登录后对网站进行管理的前端页面 后台登录页面,如下图所示 管理员登录后的页面,如下图所示 管理员登录后,在右上角显示的管理员信息,如下图所示 管理员登录后,在页面中间部分的左侧 ...
- pl/sql学习(6): 引号/程序调试/列中的字符串合并/正则表达式
有关自治事务的问题: https://www.cnblogs.com/princessd8251/p/4132649.html 我在plsql development学习中遇到的常见问题: (一) 引 ...