html常见的块元素与内联(行内)元素用法说明(一)

html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等。

块元素的属性:无论内容是什么,都会独占一整行。主要用于页面布局。

内联元素的属性:只占自身大小的元素,不会占用一行。主要用于选中文本设置样式。

div块元素仅仅只用于进行页面布局,它自身不带任何默认样式。

span内联元素可以用来选中文本设置文本的样式,其自身不会带默认样式。

一般情况下,只使用块元素包含内联元素,而不会使用内联元素去包含块元素。

a元素可以包含任意元素,除了其本身。

p元素不可包含任何的块元素。

块元素之div:<br>
    <div style="background-color: blueviolet">div 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!</div>
    <div style="background-color: blue">div 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!</div>
    <div style="background-color: chartreuse">div 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!</div>
    <div style="background-color: chocolate; width: 300px;">div width=300px 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!</div>
    <div style="background-color: blue; width: 500px;">div width=500px 噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!</div>
    块元素之p:<br>
    <p style="background-color: blue">p 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。</p>
    <p style="background-color: chocolate">p 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。</p>
    <p style="background-color: chartreuse">p 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。</p>
    <p style="background-color: green; width: 300px;">p width=300px 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。</p>
    <p style="background-color: red; width: 500px;">p width=500px 尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。</p>
    块元素之h(h1, h2, h3):<br>
    <h1 style="background-color: red">h1 蜀道难</h1>
    <h2 style="background-color: green">h2 蜀道难</h2>
    <h3 style="background-color: blue">h3 蜀道难</h3>
    <h3 style="background-color: pink; width: 300px;">h3 width=300px 蜀道难</h3>
    <h3 style="background-color: yellow; width: 500px;">h3 width=500px 蜀道难</h3>
    内联元素之span:<br>
    <span style="background-color: red">西当太白有鸟道,可以横绝峨眉巅。</span>
    <span style="background-color: green">西当太白有鸟道,可以横绝峨眉巅。</span>
    <span style="background-color: blue">西当太白有鸟道,可以横绝峨眉巅。</span>
    <br>内联元素之a:<br>
    <a href="#" style="background-color: yellow">地崩山摧壮士死,然后天梯石栈相钩连。</a>
    <a href="#" style="background-color: blue">地崩山摧壮士死,然后天梯石栈相钩连。</a>
    <a href="#" style="background-color: red">地崩山摧壮士死,然后天梯石栈相钩连。</a>
    <a href="#" style="background-color: green">地崩山摧壮士死,然后天梯石栈相钩连。</a>

效果显示(默认在谷歌浏览器下):

从上面的效果图中,可以看出,有些块元素和内联元素会自带默认样式,比如:p, h1, h2, h3

p自带默认样式为:

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h1自带默认样式:

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h2自带默认样式:

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h3自带默认样式:

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

当然还有body元素也会带默认样式:

body {
    display: block;
    margin: 8px;
}

原文地址:https://www.cnblogs.com/goujian/p/11594982.html

时间: 2024-10-26 15:40:55

html常见的块元素与内联(行内)元素用法说明(一)的相关文章

内联(行级)元素不能设置margin-top

内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-right属性.如果需要设置行级元素的margin-top或margin-bottom属性,必须将行级元素转换成内联块级元素或块级元素.

web兼容学习分析笔记--块级、内联、内联块级元素

一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inline **和其他inline元素同行显示 **可以设置margin-left,margin-righ,padding-left,padding-right, **无效设置widht,height,margin-top,margin-bottom,padding-top,padding-bottom

1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小/行高 字体样式 字体大小和样式不可省略 2 行内块的间距问题 行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动 给父盒子设置一个高度     Clear: both      Overflow

html的块级、内联、内联块级元素基础

概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. display属性默认值是inline,那么该元素是内联元素. 没有元素的display默认值是inline-block. display属性值可以被设置,比如可以把块级元素div的display的值设成inline,那么它就变成了内联元素,不再独行显示. 特征 1.块级元素 独占一行. 可设置width,he

HTML的块状、内联、内联块状元素的特点

元素分类及特点: 1.块级元素: 在html中<div>. <p>.<h1>.<form>.<ul> 和 <li>就是块级元素.设置display:block就是将元素显示为块级元素.块级元素特点: (1).每个块级元素都从新的一行开始,并且其后的元素也另起一行:(一个块级元素独占一行) (2).元素的高度.宽度.行高以及顶和底边距都可设置: (3).元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一

内联和快元素的特点

内联元素的特点  1.和其他的元素显示在一行上:  2.内边距和外边距.高度,宽度都是不可改变的,他的宽度是根据他的显示文本和图像的宽度  3.可以通过css来将它变成为块元素之后然后就可以用css其他样式应用了. 块元素的特点: 1.总是在新的一行上显示: 2.高度.行高.宽度.内边距.外边距等都是可控制的: 3.他的高度默认为0,是根据元素内的内容而决定的,宽度是父元素的宽度,但是可以通过css控制它,显示的指定他的宽度和高度,可以利用浮动和定位来将他与其他的块元素也显示在一行上:

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

块状元素居中、元素分类(块状,内联,内联块状)、内联转块状

块状元素中的文字.图片居中显示: CSS设置:text-align:center <style type="text/css"> div{text-align:center;} </style> </head> <body> <div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div> 如图所

行内元素与块级元素的区别,行内块级元素在IE8-的兼容性

行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行内元素还是块级元素都要另起一行,单独占一行. 对于行内元素设置with.height.margin值无效,但对于块级元素,设置这些值是有效的. 行内块级元素在IE8以下的兼容性 div { display: inline-block: *zoom: 1: *display: inline: } 解析

HTML哪些是块级元素,哪些是行内元素

块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center>  地址文字 <h1>...</h1>  标题一级 <h2>...</h2>  标题二级 <h3>...</h3>  标题三级 <h4>...</h4>  标题四级 <h5>...</h5>  标题五级 <h6>