CSS2--行内元素、块元素、行内块元素

作者: 废废_siri | 来源:发表于2018-12-01 19:27 被阅读0次

CSS2--行内元素、块元素、行内块元素
块元素、行内元素、行内块元素
入门任务8
css学习笔记之常见样式
CSS行块级元素
2019-09-24 块级元素、行内元素
css常见样式
6. CSS常见样式
2018-07-15
Css元素|属性

块元素block

独占一行的元素叫做块元素，只会受它的父元素的宽度高度所影响。可以对块元素的宽度和高度进行设置，可以容纳行内元素和其他块元素。常见的块元素：<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>，<form>。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>块元素 demo</title>
    <style>
        p,div,ul li,h3{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <p>p标签是块元素</p>
    <div>div是块元素</div>
    <ul>
        <li>li是块元素</li>
    </ul>
    <h3>h1~h6是块元素，form也是块元素</h3>
</body>
</html>

行内元素inline

不会独占一行，大小由元素中的内容而决定，它会和周围的内容在一起，按从做到右的顺序显示，不可设置其宽度与高度，因为它的宽高依其内容而定。常见的行内元素：<span>、<a>、<label>、<strong>、<b>、<em>、<i>。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>行内元素 demo</title>
    <style>
        a,span,label,em,i,strong,b{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">a是行内元素</a>
    <a href="https://www.baidu.com">两个a元素在同一行</a>
    <span>span是行内元素</span>
    <span>两个span在同一行</span>
    <label>label是行内元素</label>
    <label>两个label在同一行</label>
    <em>em是行内元素</em>
    <em>两个em在同一行</em>
    <strong>strong是行内元素</strong>
    <strong>两个strong在同一行</strong>
    <i>i是行内元素</i>
    <i>两个i在同一行</i>
    <b>b是行内元素</b>
    <b>两个b在同一行</b>
</body>
</html>

行内块元素inline-block

既具有块元素特性也具有行内元素的特性，可以设置其宽度和高度，默认大小由行内块元素的内容而定，不会占据整行。行内元素只能容纳文本或则其他行内元素。（a标签除外，a标签内可以放块元素）。常见的行内块元素：<img>、<input>、<td>。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>行内块元素 demo</title>
</head>
<body>
    <!-- 行内块元素--当浏览器的一行不能同时容纳下几个行内块元素时，那么多余的行内块元素会自动换行到下一行 -->
    <input type="text" value="注册">
    <input type="text" value="登录">
    <img src="../img/crazy.gif" alt="抽疯">
    <img src="../img/current.gif" alt="抱萝卜">
</body>
</html>

可替换元素

img 的在浏览器的display属性为inline,而它表现出来的特性包含inline-block的特性(可以直接设置其宽高)
三像素空白问题：
img 的display为inline，三像素问题与基线有关(不确定)
解决三像素空白：

1.将父元素的font-size设置为0
2.将img的display改为block
3.如果是垂直方向上的三像素空白，则将img的vertical-align设置为top

display--显示模式转换。

块元素转换为行内元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>display-01 demo</title>
    <style>
        h2,p{
            background-color: brown;
            display: inline;
            width: 50px;        /*设置的宽度无效*/
            height: 200px;      /*设置的宽度无效*/
        }
    </style>
</head>
<body>
   <h2>块元素转为行内元素</h2>
   <p>在CSS样式中将display的值设置为inline。</p> 
</body>
</html>

行内元素转换为块元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>display-02 demo</title>
    <style>
        a{
            display: block;
            background-color: rgb(180, 146, 212);
            width: 200px;           /*转换为块元素后可设置其宽度*/
            height: 200px;          /*转换为块元素后可设置其高度*/
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">行内元素转换为块元素</a>
    <a href="https://www.baidu.com">在CSS样式中将display的值设置为block;</a>
</body>
</html>

块元素、行内元素转换为行内块元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>display-03 demo</title>
    <style>
        a{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">块元素、行内元素转换为行内块元素。</a>
    <a href="https://www.baidu.com">在CSS中将display的值设置为inline-block。</a>
</body>
</html>