html 块级元素和行内元素
2017-03-21 16:13
204 查看
html 块级元素和行内元素
为什么要理解块级元素和行内元素:
行内元素和块级元素的边距,宽高设置各又不同,
了解两者的特性,可以根据不同的业务场景,多行内元素和块级元素进行转换,
以满足不同的业务场景需要。
阅读要点:
1.了解块级元素和行内元素
2.掌握块级元素和行内元素的切换
html的由标组成,
大致可以分为块级元素和行内元素
块级元素(block element):
div
h --标题
p --段落
table --表格
ul --非排序列表
行内元素 (inline element)
span -- 常用内联容器,定义文本内区块
a -- 链接标签
i -- 斜体
img -- 图片
input -- 输入框
行内、块状元素区别:
(1).块级元素会独占一行,其宽度自动填满其父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在同一行里,
直到道一行排不下,才会换行,其宽度随元素的内容而变化
(2). 一般情况下,块级元素可以设置 width, height属性,行内元素设置width, height无效
(注意:块级元素即使设置了宽度,仍然是独占一行的)
(3).块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right
都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。
(水平方向有效,竖直方向无效)
行内、块级元素的切换:
.行内元素切换成块级元素:
display:inline-block //行内块级不换行
display:block //块级换行
.块级元素切换成行内元素:
display:inline
具体实现:
text.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0px; margin: 0px; } div{ border: 1px solid red; width: 100px; display: inline; /* 块级元素切换成行内元素 */ } span{ border: 1px solid green; display: inline-block; /* 行内元素切换成块级元素 */ width: 100px; height: 200px; } </style> </head> <body> <div> abc </div> <h1> 标题 </h1> <span> ggdfg </span> <span> fdgdfgdfg </span> </body> </html>
相关文章推荐
- html行内元素、块级元素和行内块元素的区别
- HTML中行内元素与块级元素有哪些及区别
- HTML之块级元素&内联元素
- Html+Css_ 行内元素与块级元素比较全面的区别和转换
- html 块级元素和行内元素
- html 块级元素和行内元素
- html 内联元素和html 块级元素概述及区别
- 关于HTML(含HTML5)的块级元素和行级(内联)元素总结
- HTML P不能包含块级元素(包括自身)
- HTML中行内元素和块级元素的区别及转换
- Html中行内元素有哪些?块级元素有哪些?
- 【html】行内元素,块级元素
- Html中行内元素有哪些?块级元素有哪些?
- 浅谈HTML中的块级元素和内联元素
- html中块级标签,行内标签,空元素的总结
- HTML 行内元素 与 块级元素
- HTML 块级元素 内联元素 速查
- HTML行级元素和块级元素区别
- html块级元素和内联元素区别详解
- HTML 块级元素 内联元素 速查