css块级元素与行级元素

看先下效果图

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>div{background: #DD28A0;}span{background: #EEE8AA;      }.one{width: 30px;height: 50px;margin-top: 30px;margin-left: 30px;margin-right: 30px;}</style><body><div>块级元素</div><div>块级元素</div><span>2222222222222222</span> <span class="one">2222222222222222</span><span>2222222222222222</span><span>2222222222222222</span><span>2222222222222222</span></body>
</html>

效果图如下

从上面可以看出什么

块级元素都是独自站一行, 行级元素缺不是设置一个行内元素看出来他的kuan,高,顶部距离都是失效的

总结一下他们的特点

块级元素

特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

　　　2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　

　　　3.元素的宽度如果不设置的话，默认为父元素的宽度。

常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

行级元素

特点：1.可以和其他元素处于一行，不用必须另起一行。

　　　2.元素的高度、宽度及顶部和底部边距不可设置。

　　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。

块级元素与行级元素的转换

display:inline将块级元素设为行级元素

　display:block将行级元素设为块级元素

设置代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>div{background: #DD28A0;display: inline;}span{background: #EEE8AA;display: block;       }/*.one{width: 30px;height: 50px;margin-top: 30px;margin-left: 30px;margin-right: 30px;display: block;}*/</style><body><div>块级元素</div><div>块级元素</div><span>2222222222222222</span> <span class="one">2222222222222222</span><span>2222222222222222</span><span>2222222222222222</span><span>2222222222222222</span></body>
</html>

css块级元素与行级元素相关推荐

CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block&q ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
css块元素与行内元素特点,CSS区分块级元素和行内元素
块级元素(块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素) 特点: 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底 ...
CSS块级元素与行内元素的区别和联系
块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方. 默认情况下块元素,是独占一行的常见 ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
CSS基础：margin在行内元素及行级块元素失效两个元素之间margin重叠
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
CSS中的块级元素、行内元素和行内块元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫"盒子".但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的.比如:div 与s ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
CSS中块级元素，行内块元素，行内元素的特点
CSS自学笔记目录一.什么是元素显示模式二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素前言网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...

css块级元素与行级元素

css块级元素与行级元素相关推荐

最新文章

热门文章