情景:最近由于公司的项目中需要用到CSS调整一些样式,嘿嘿 CSS有些知识已经记不太清楚啦,在网上重新学习一下,顺便把一些常用的知识点记录一下。
1.块级元素和行内元素什么是?
[1].块级元素:根据W3C上的解释,就是说block(块级)元素是独占一行显示的,它的兄弟元素必定不会与其在同一行中(除非脱离了文档流);常见的块级元素如div 、p、hr 、ul、ol、li和form等。
[2].行内元素:也叫内联元素,行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素;常见的行内元素如a、span、br、 strong和em等。
2.块级元素和行内元素的区别 ?
[1] 区别一:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度;行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type='text/css'>
#block1{background-color:#00FF00;}
#block2{background-color: #008800;}
.inline1{background-color: #FF3333;}
.inline2{background-color: #FFFF33;}
</style>
<title>测试块级元素和行级元素</title>
</head>
<body>
<div id="block1">测试块级元素1</div>
<div id="block2">测试块级元素2</div>
<a class="inline1">测试行级元素1</a>
<span class="inline2">测试行级元素2</span>
</body>
</html>
效果图如下:
[2] 区别二:块级元素可以设置宽高,行内元素不可以设置宽高,而且块级元素即使设置宽度也还是独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type='text/css'>
#block1{background-color:#00FF00;height: 50px;width: 50%;}
#block2{background-color: #008800;height: 50px;width: 40%;}
.inline1{background-color: #FF3333;height: 70px;width: 50%;}
.inline2{background-color: #FFFF33;height: 70px;width: 50%;}
</style>
<title>Document</title>
</head>
<body>
<div id="block1">测试块级元素1</div>
<div id="block2">测试块级元素2</div>
<a href="#" class="inline1">测试行级元素1</a>
<span class="inline2">测试行级元素2</span>
</body>
</html>
效果图如下:
[3] 区别三:块级元素可以设置margin,padding;行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type='text/css'>
#block1{background-color:#00FF00;height: 50px;width: 50%; padding: 20px;margin: 20px;}
#block2{background-color: #008800;height: 50px;width: 50%; padding: 20px;margin: 20px;}
.inline1{background-color: #FF3333;height: 70px;width: 50%; padding: 30px;margin: 20px;}
.inline2{background-color: #FFFF33;height: 70px;width: 50%; padding: 40px;margin: 20px;}
</style>
<title>Document</title>
</head>
<body>
<div id="block1">测试块级元素1</div>
<p id="block2">测试块级元素2</p>
<a href="#" class="inline1">测试行级元素1</a>
<span class="inline2">测试行级元素2</span>
</body>
</html>
效果图如下:
[4] 区别四:块级元素对应display:block,行内元素对应display:inline,display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排,是一个很实用的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type='text/css'>
#block1{background-color:#00FF00;height: 50px;width: 50%; padding: 20px;margin: 20px; display:block}
#block2{background-color: #008800;height: 50px;width: 50%; padding: 20px;margin: 20px; display:inline}
.inline1{background-color: #FF3333;height: 70px;width: 50%; padding: 30px;margin: 20px; display:inline}
.inline2{background-color: #FFFF33;height: 70px;width: 50%; padding: 40px;margin: 20px; display:block}
.inline3{background-color: #FFFF33;height: 70px;width: 50%; padding: 40px;margin: 20px; display:inline-block}
</style>
<title>Document</title>
</head>
<body>
<div id="block1">测试块级元素1</div>
<p id="block2">测试块级元素2</p>
<a href="#" class="inline1">测试行级元素1</a>
<span class="inline2">测试行级元素2</span>
<span class="inline3">测试行级元素3</span>
</body>
</html>
效果图如下:
ok 就到这里了( ^ - ^ )