块级元素行内元素以及display属性
1、什么叫做标签语义化? ->合理的标签做合适的事情
->HTML中常用的标签都有哪些? (块状标签和行内标签)
->块状标签和行内标签的区别? (常用的有8条区别)
1)内联元素:和其他元素都在一行上,元素的高度,宽度及顶部和底部边距不可设置。元素的高度就是它包含的文字或者图片的宽度,不可改变。
->行内标签主要有:<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
2)块级元素:每个块级元素都是从新的一行开始,并且其他的元素也是另起一行。元素的高度,宽度,行高以及顶和底边距都可以设置。元素宽度在不设置的情况下,是他本身的父容器的100%(和父元素的宽度一直),除非设定一个宽度。
->常用的块级元素有:<div> <p> <h1> <h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
3)内联块状元素:和其他元素都在一行上:元素的高度宽度,行高,以及顶部和底部边距都可设置。常用内联块级元素有:<img> <input>
2、display有哪些常用的属性值?分别是什么意思?有哪些需要注意的地方?
display的属性值有:none|inline|inline-block|block|list-item|run-in|table|inlne-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inhert
1)none:元素不会显示,而且该元素的现实空间不会保留。担有另外一个visiblity:hidden;是保留元素空间的
2)inline:display的默认属性。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦元素的display属性设置成inline,设置属性的宽高是没有用的。此时影响他的高度一般是内部元素的高度font-size和padding。
3)block:将元素显示为块级元素,元素前后会带有换行符。设置为block后,元素可以设置width和height了,元素独占一行。
4)inline-block:行内块级元素,这个元素融合了inline和block的特性,他几时内联元素,又可以设置width和height
->你在项目中编写代码的时候,遵循的规范是什么? (雅虎优化36条建议)
5)其他的display不是很常用的属性
list-item: 此元素会作为列表显示。
run-in: 此元素会根据上下文作为块级元素或内联元素显示。
table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table: 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group: 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group: 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group: 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row: 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group: 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column: 此元素会作为一个单元格列显示(类似 <col>)
table-cell: 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption: 此元素会作为一个表格标题显示(类似 <caption>)
inherit: 规定应该从父元素继承 display 属性的值。
3、页面中有一个盒子,我先让其消失在我们的视野中,你有几种办法?
->透明度为零 (opacity/filter ->filter的其他作用)
->display:none
->visibility: hidden (display:none和visibility:hidden区别是什么?)
->宽高为零
->position设置完,让top/left是足够的负值 (position常用到的属性值都有哪些?需要注意哪些细节的地方)
->设置z-index,让其它的元素把它遮盖住
->背景颜色和我们页面整体的背景颜色保持一致 (background常用到的属性值都有哪些?)
->足够的负的margin值
...
块级元素行内元素以及display属性的更多相关文章
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- day001-html知识点总结(-)块级。行内元素区分
-.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- css盒子模型的深入理解,在块级、行内元素的区别和特性
css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...
- 元素显示模式:块元素 & 行内元素 & 行内块元素
元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...
- HTML 块级元素 行内元素
块级元素 - block level element 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度: 它可以容纳内联元素和其他块元素 如: ...
- css总结17:HTML块级元素&行内元素之分: <div> 和<span>
1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...
- 块元素&行内元素
大多数HTML 元素被定义为块级元素或内联元素.块级元素在浏览器显示时,通常会以新行来开始(和结束) block元素特点 1 总是在新行上开始: 2 高度,行高以及外边距和内边距都可控制: 3 宽度缺 ...
随机推荐
- Linux入门之常用命令(12)用户管理
[用户管理] linux如何查看所有的用户和组信息的方法: 1.cat /etc/passwd: 2.cat /etc/group 1. useradd useradd 命令可以创建一个新的用户帐号, ...
- S2_OOP第三章
第一章 多态 概念 多态是具有表现多种型生态的能力的特征,同一个实现接口,使用不同的实例而执行不同的操作 子类转换父类(向上转型) 用父类接受子类,向上转型 向上转型的规则: 讲一个父类的引用志向一个 ...
- 再起航,我的学习笔记之JavaScript设计模式30(简单模板模式)
简单模板模式 概念介绍 简单模板模式(Simple template): 通过格式化字符串拼凑出视图避免创建视图时大量节点操作,优化内存开销. 创建模板 在实际的业务中如果我们需要进行前后台交互,或多 ...
- cannot be cast to javax.servlet.Servlet
在第一次开发Maven项目时,maven环境和仓库以及eclipse都和讲师讲解的一样,可是却遇到下面这个问题: java.lang.ClassCastException: servlet.UserS ...
- 全球多个 TOP 网站藏挖矿代码,5 亿 PC 沦为矿工
据ZDNet报道,现在很多网站都开始在网页脚本中藏匿挖矿代码,在用户访问时偷算力用于挖矿.来自Adguard的报告称也证实,也有5亿台电脑中招. 最新最热的IT技术付费社区 IT帮 itbang.me ...
- 在Visual Studio 2013 中使用C++单元测试
本文主要介绍在Visual Studio 2013中对代码进行单元测试的方法,包含了两方面的内容:对已有的Dll文件进行单元测试,以及对已有的源文件进行单元测试. 1. VS2013对DLL文件的单元 ...
- 初识Hibernate之继承映射
前面的两篇文章中,我们介绍了两张表之间的各种相互关联映射关系,但往往我们也会遇到两张表甚至多张表之间共有着多个相同的字段.例如: 如图,student表和teacher表共同具有id,nam ...
- win10 uwp json
本文讲的是关于在uwp使用json的简单使用,json应用很多,因为我只是写简单使用,说的东西可能不对或者不符合每个人的预期.如果觉得我有讲的不对的,就多多包含,或者直接关掉这篇文章,但是请勿生气或者 ...
- OpenWRT 恢复出厂设置命令
如果通过无线或者有线口无法连接到router,可以用恢复某些设置重新设置路由器. 1. 开机,等着一个工作灯亮的时候立即按下rest键2秒,然后就开始拼命闪烁,很好现在进入failsafe模式了. 2 ...
- canvas图表详解系列(5):雷达(面积)图
雷达(面积)图 本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种 ...