__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 块 ...
随机推荐
- maven多个web模块进行合并
原文地址: https://blog.csdn.net/u011666411/article/details/77160907
- 未能找到类型或命名空间名称“Quartz”
C# 项目中使用Quartz必须使用.NetFrameWork4,而不能使用Client,否则的话会出现如题所示错误.
- DensePose: Dense Human Pose Estimation In The Wild(理解)
0 - 背景 Facebook AI Research(FAIR)开源了一项将2D的RGB图像的所有人体像素实时映射到3D模型的技术(DensePose).支持户外和穿着宽松衣服的对象识别,支持多人同 ...
- python Flask web框架
目录: --> Flask --> 配置文件 --> 配置文件解析 --> 配置文件导入 --> 路由 --> 路由参数 --> 常用路由匹配 --> ...
- linux tomcat单机部署多应用
1.修改/etc/profile 增加tomcat环境变量
- 20165221-week2课上测试补做
week2-课上测试补做 测试一: 参考附图代码,编写一个程序 "week0201学号.c",判断一下你的电脑是大端还是小端. 提交运行结果"学号XXXX的笔记本电脑是X ...
- Idea 问题记录
日常问题记录 下载IDEA, tomcat ,下载jdk 前言:java net对比 Java:JDK .NET:.NetFramework WEB服务器 Java:Tomcat,JBoss,Web ...
- Django的邮件发送以及云服务器上遇到的问题
邮件发送 首先我们的邮箱要开通smtp服务,然后就可以在settings中配置了 EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBacken ...
- Linux /etc/sudoers 文件详解
[root@test ~]# cat /etc/sudoers## Sudoers allows particular users to run various commands as## the r ...
- Reveal 使用详解
Reveal是一款调试iOS程序UI界面的神器 官网:https://revealapp.com 下载:https://revealapp.com/download/ 建议下载至少Reveal4版本, ...