image
CSS元素分类
- 块级元素
- 常用的块级元素有:
<div> 、 <p> <h1>-<h6> <ol> <ul> <li> <dl> <dt> <dd> <table> <tr> <address> <blockquote>(这是引用标签) <form>- 块级元素的特点:
a. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。即块级元素都是自己占用一行。 b. 元素的高度、宽度、行高以及到顶和底边的距离都可设置 c. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。- 设置display:block 可将元素显示为块级元素。如下代码就是将内联元素a转换为 块级元素，从而使a元素具有和块级元素特点。
例: a{display:block;}
-
内联元素
- 常用的内联元素:
<a> <b> <span> <br> <i> <em> <strong> <label> <q>- 内联元素的特点
a. 和其它元素都在一行上。即自己不独占一行 b. 元素的高度、宽度以及到顶部和底部的距离不可设置 c. 元素的宽度就是它包含的文字或图片的宽度，不可改变- 内联元素可以通过 display:inline 将块级元素转为内联元素。从而使块级元素具有内联元素的特点。
例子: div{ display:inline; } <div> 我会从块级元素变成内联元素 </div> -
内联块级元素
- 常用的内联块级元素有:
<img> <input> - 内联块级元素的特点:
a. 和其它元素在一行上 b. 元素的高度、宽度、行高以及到顶部和底部的距离都可以设置- 代码
display:inline-block就是将于元素设置为内联块级元素
- 常用的内联块级元素有:
- 示例: 将一个竖向排列的两个 div ，变成横向排列
<style> div{ width:200px; height:200px; display:inline-block; } .one{ background:blueviolet; /*紫色*/ } .two{ background: aquamarine; } </style> <body> <div class="one"></div> <div class="two"></div> </body>
未加 display:inline-block之前 效果:
image.png
加了之后的效果:
image.png
- 示例2: 将内联元素 设置为 块级元素
<html>
<head>
<style>
a{
background: red;
}
span {
background: blue;
}
</style>
</head>
<body>
<a>我是内联，我的宽高都是不可以设置的</a>
<span>我也是内联元素呢</span>
</body>
</html>
image.png
开始更改:
<!DOCTYPE html>
<html>
<head>
<style>
a{
background: red;
width: 100px;
height: 100px;
display: inline-block;
}
span {
background: blue;
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<a>我是内联，我的宽高都是不可以设置的</a>
<span>我也是内联元素呢</span>
</body>
</html>
image.png
不要被图片内的文字欺骗了，是可以设置的哈。。。
哈.png
part 3
干了这碗鸡汤
在你每天的生活之旅中，别忘了为人间留下一点赞美的温馨，这一点小火花会燃起友谊的火焰。
人类天性中有一点至为重要，就是渴求被人重视。
林肯：每个人都喜欢被人表扬
司华伯：世上最容易摧毁一个人的意志那就是上司对他的工作的否定。我从不批评任何人，我只给他们鼓励。如果说，我还有什么喜好，那就是真诚地称赞他人。
我们的习惯是，不喜欢一件事，便会鸡蛋里挑骨头、吹毛求疵；要是真喜欢，却会什么话都不说。
埃尔法利特：我最需要的东西，不是别的，而是自我尊严的滋养。
我们照顾好了孩子、朋友和员工身体所需要的营养，可是我们给他们自尊上所需要的营养何其稀少。我们给了他们牛排、土豆，增加他们的体能，可忽略了称赞。
拍马屁和美以及献媚的区别在于 ---- 献媚一眼就可以识别，而赞美是真诚的、由衷的、无私的，为人们所钦佩；而谄媚是虚伪的，只出自于嘴巴，非常自私的、令人感到可耻而需扬弃的。
献媚是告诉别人，他想得到他自己的种种肤浅的目标。
网友评论