块级元素与行级元素的具体区别

块级元素与行级元素的具体区别

元素的组成
外边距margin + 边框border + 内边距padding + 内容
(1)块级元素【支撑起整个网页的结构】
div
h1~h5 标题
margin
html
ul li 无序列表
ul margin、padding-left
li 黑色圆点 list-style设置
ol li 有序列表
p 段落标签
margin
1) 独占一行空间
2) 高度有内容决定、宽度占满窗口
3) 宽、高可以设置
4)块级元素可以嵌套其他元素

(2)行内元素 【填充网页】
a 超链接
href 访问的地址
url 访问地址
id 锚点
target 设置超链接打开的方式
_self 当前选项卡打开
_blank 新建选项卡打开
i、strong…
1) 与其他元素共享一行空间
2) 宽高由内容决定
3) 宽高无法设置
4)行内元素不可以嵌套块级元素

    (3)块级元素和行内元素的转换
        display:block;  将元素设置为块级元素
        display:inline-block; 将元素设置为行内块元素
   
    (4)如何给行内元素设置宽高?
        先将行内元素设置为块级元素或者行内块元素,再设置宽高即可

注:1)黑字体可以作为作为IT面试的答案

你可能感兴趣的:(块级元素与行级元素的具体区别)