块级元素行内元素以及display属性
2018-06-24 02:00:21来源:未知 阅读 ()
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值
...
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:CSS选择器总结
- [03]HTML基础之行内标签 2020-06-01
- 前端CSS五中元素定位类型 2020-06-01
- [04]HTML基础之块级标签 2020-06-01
- css设置overflow:hiden行内元素会发生偏移的现象 2020-05-09
- CSS的 行内元素 和 块类元素 2020-05-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash