CSS元素分类

2019-07-13 本文已影响0人 IronMan999

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>

内联块级元素
1. 常用的内联块级元素有: <img> <input>
2. 内联块级元素的特点:
```
    a. 和其它元素在一行上
    b. 元素的高度、宽度、行高以及到顶部和底部的距离都可以设置
```
1. 代码 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

干了这碗鸡汤
在你每天的生活之旅中，别忘了为人间留下一点赞美的温馨，这一点小火花会燃起友谊的火焰。

人类天性中有一点至为重要，就是渴求被人重视。
林肯：每个人都喜欢被人表扬

司华伯：世上最容易摧毁一个人的意志那就是上司对他的工作的否定。我从不批评任何人，我只给他们鼓励。如果说，我还有什么喜好，那就是真诚地称赞他人。

我们的习惯是，不喜欢一件事，便会鸡蛋里挑骨头、吹毛求疵；要是真喜欢，却会什么话都不说。

埃尔法利特：我最需要的东西，不是别的，而是自我尊严的滋养。

我们照顾好了孩子、朋友和员工身体所需要的营养，可是我们给他们自尊上所需要的营养何其稀少。我们给了他们牛排、土豆，增加他们的体能，可忽略了称赞。

拍马屁和美以及献媚的区别在于 ---- 献媚一眼就可以识别，而赞美是真诚的、由衷的、无私的，为人们所钦佩；而谄媚是虚伪的，只出自于嘴巴，非常自私的、令人感到可耻而需扬弃的。
献媚是告诉别人，他想得到他自己的种种肤浅的目标。

CSS元素分类

CSS元素分类

猜你喜欢

热点阅读