__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 块 ...
随机推荐
- 前端面试题整理—Vue篇
1.对vue的理解,有什么特点,vue为什么不能兼容IE8及以下浏览器 vue是一套用于构建用户界面的渐进式框架,核心是一个响应的数据绑定系统 vue是一款MVVM框架,基于双向绑定数据,当数据发生 ...
- [物理学与PDEs]第3章习题4 理想磁流体的能量守恒方程
试证明: 对理想磁流体, 能量守恒方程 (4. 14) 可以写为如下形式: $$\beex \bea \cfrac{\p}{\p t}&\sex{\rho e+\cfrac{1}{2}\rho ...
- js倒计时一分钟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【原创】大数据基础之Ambari(3)通过Ambari部署Airflow
ambari2.7.3(hdp3.1) 安装 airflow1.10 ambari的hdp中原生不支持airflow安装,下面介绍如何通过mpack方式使ambari支持airflow安装: 1 下载 ...
- 在浏览器中查看.vue文件的源码
- C++入门篇一
双冒号(::)的作用:作用域运算符,全局作用域 void LOL::game1(){//在LOL命名空间下面的game1 cout << "LOL游戏开始" <& ...
- Codeforces 1083C Max Mex [线段树]
洛谷 Codeforces 思路 很容易发现答案满足单调性,可以二分答案. 接下来询问就转换成判断前缀点集是否能组成一条链. 我最初的想法:找到点集的直径,判断直径是否覆盖了所有点,需要用到树套树,复 ...
- noj 算法 八数码问题
描述 在九宫格里放在1到8共8个数字还有一个是空格,与空格相邻的数字可以移动到空格的位置,问给定的状态最少需要几步能到达目标状态(用0表示空格):1 2 34 5 67 8 0 输入 输入一个给定 ...
- leetcode(js)算法10之正则表达式匹配
mmp,对着答案看了三遍才看懂,真是菜的抠脚 给定一个字符串 (s) 和一个字符模式 (p).实现支持 '.' 和 '*' 的正则表达式匹配. '.' 匹配任意单个字符. '*' 匹配零个或多个前面的 ...
- IDEA打包jar包
1.点击idea左边的Maven 2.点开要打包的项目下的-->Lifecycle-->双击package 3.jar包会默认保存在项目下的target文件夹下