块级元素和行内元素

时间 2019-11-20

标签元素繁體版

原文原文链接

标签分为两种等级：

　　1，行内元素。2，块级元素。

行内元素和块级元素的区别：

行内元素：　　html

与其余行内元素并排
不能设置宽高，默认的宽度就是文字的宽度

块级元素：前端

霸占一行，不能与其余任何元素并列。
能接受宽高，若是不设置宽度，那么宽度将默认变为父级的100%。

块级元素和行内元素的分类：

　　在HTML的角度来说，标签分为：python

　　　　文本级标签：p , span , a , b , i , u , emlinux

　　　　容器级标签：div , h系列 , li , dt ,ddweb

　　　　p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。浏览器

　　从CSS的角度讲，CSS的分类和上面的很像，就p不同：ide

　　　　行内元素：除了p以外，全部的文本级标签，都是行内元素。p是个文本级标签，可是是个块级元素。布局

　　　　块级元素：全部的容器级标签，都是块级元素，以及p标签。spa

块级元素和行内元素的相互转换：

　　咱们能够经过display属性将块级元素(好比div)和行内元素进行相互转换。3d

　　display：inline;

　　那么这个标签将变为行内元素，即：

　　　　1，此时这个div将不能设置宽度和高度了。

　　　　2，此时这个div能够和其余行内元素并排了。

　　一样的到了咱们也能够用display将行内元素(好比span)转行成块级元素。

　　display：block；

　　那么这个span标签将变为块级标签，即：

　　　　1，此时这个span可以设置宽度，高度。

　　　　2，此时这个span必须独占一行，其余元素没法与之并排。

　　　　3，若是不设置宽度，将占满父级。

标准流里面的限制很是多，致使不少页面效果没法实现，若是咱们如今就要并排，而且就要设置宽度，就hi有：脱离标准流。

CSS一共有三种手段，是一个元素脱离标准流文档：

浮动
绝对定位
固定定位

浮动：

　　浮动是CSS里面布局最多的一个属性。

　　float：表示浮动的意思。

属性：

none：表示不浮动，默认。
left：表示左浮动。
rigth：表示右浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            /*margin: 0;*/
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: green;
            float: right;
        }
        span{
            float: left;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <span>路飞</span>
</body>
</html>

例子

咱们会发现，三个元素并排显示，.box1和span由于是左浮动，全部紧挨在一块儿，这种现象是贴边现象。

.box2盒子由于是右浮动，因此紧靠着右边。

浮动的四大特性：

　　1，浮动的的元素脱标，

　　2，浮动的元素互相贴靠。

　　3，浮动的元素由"子围"效果。

　　4，收缩的效果。

浮动元素的脱标：

　　脱标：就是脱离了标准文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        span{
            float: left;
            width: 300px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">小红</div>
    <div class="box2">小黄</div>
    <span>顾清秋</span>
    <span>顾清秋</span>
</body>
</html>

例子

效果：红色的盒子盖住了黄色的盒子，一个行内的span标签，居然可以设置宽高了。

缘由1：小红设置了浮动，而小黄并无设置浮动，小红脱离了标准文档流，其实就是他不在页面中占据位置了，此时浏览器认为小黄是标准文档流的第一个盒子，因此就渲染到了页面中的第一个位置上，这种现象，也有一种叫法：浮动元素"飘起来了"。

缘由2：全部的标签一旦设置浮动，就可以并排且不区分块元素或行内元素，换言之，可以设置宽高了。

浮动元素互相贴靠：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 150px;
            height: 450px;
            float:     left;
            background-color: yellow;
        }
        .box3{
            width:     300px;
            height: 300px;    
            float:     left;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">小红</div>
    <div class="box2">小黄</div>
    <div class="box3">小绿</div>
</body>
</html>

例子

效果发现：若是父元素有足够的空间，那么小绿就会紧靠小黄，小黄紧靠小红，小红靠着边。

若是没有足够的空间，小绿那么就会靠着小红，若没有足够的空间靠着小红，就会本身靠边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
                    width: 300px;
                    border:1px solid black;        
        }
        .box1{
            width: 100px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 150px;
            height: 450px;
            float:     left;
            background-color: yellow;
        }
        .box3{
            width:     80px;
            height: 300px;    
            float:     left;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">小红</div>
        <div class="box2">小黄</div>
        <div class="box3">小绿</div>
    </div>
</body>
</html>

例子

浮动元素字围效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        div{
            float:     left;    
        }
        p{
            background-color: #    666;
        }
    </style>
</head>
<body>
    <div class="d1"><img src="    ../../images/1.jpg" alt="图片"></div>
    <p style="font-size:34px" >顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋</p>
</body>
</html>

例子

效果发现：所谓的字围效果，当div浮动，p不浮动，div遮盖了p,div的层级提升，可是p中的文字不会被遮盖，此时就造成了字围效果。

浮动元素紧凑效果：

　　收缩：一个浮动元素，若是没有设置width，那么就自动收缩为文字的宽度。（和行内元素很像）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紧凑效果</title>
    <style>
        div{
            float: left;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>顾清秋</div>
</body>
</html>

例子

谨记：关于浮动，必定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一块儿浮动。另外，有浮动，必定要清楚浮动。

为何要清楚浮动：

　　在页面布局的时候，每一个结构中的父元素的高度，咱们通常不会设置。

　　你们想，若是我初版的页面的写完了，感受很是爽，忽然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我以为图片要缩小一下。这样的需求在工做中很是常见的。真想打他啊。那么此时做为一个前端小白，确定是去每一个地方加内容，改图片，而后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是确定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 1126px;
            /*子元素浮动，父级通常不设置高度*/
        }
        .box1{
            width: 200px;
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            height: 100px;
            float: left;
            background-color: blue;
        }
        .father{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <div class="father2"></div>
</body>
</html>

例子

效果发现：若是不给.father一个高度，那么浮动子元素是不会填充父盒子的高度，那么.father2的盒子就会占据第一个位置，影响页面布局。

那么咱们知道，浮动元素确实能实现咱们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！因此咱们要清除浮动！

清除浮动的方法：

　　1，给父盒子设置高度。

　　2，clear：both;

　　3，伪元素清除法

　　4，overflow：hidden；

给父盒子设置高度：

　　使用不灵活，会固定父盒子的高度。

clear：both；

　　clear：意思就是清楚的意思。

　　有三个值：

　　left：当前元素左边不容许有浮动元素，

　　rigtht：当前元素右边不容许有浮动元素。

　　both：当前元素的左右两边都不容许有浮动元素。

　　给浮动元素后面加一个空的div，而且该元素不浮动，而后设置clear：both。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        div{
            width: 400px;
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            background-color:red;
        }
        .clear{
            width: 200px;
            height: 200px;
            background-color: yellow;
            clear:both;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>python</li>
            <li>web</li>
            <li>linux</li>
        </ul>
    </div>
    <div class="clear"></div>
</body>
</html>

例子

伪元素清除法(经常使用)：

　　给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，而后设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        div{
            width: 400px;
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            background-color:red;
        }
        .clear{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*clear:both;*/
        }
        .clearfix:after{
            content: '.';
            height: 0;
            clear:both;
            display: block;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <ul>
            <li>python</li>
            <li>web</li>
            <li>linux</li>
        </ul>
    </div>
    <div class="clear"></div>
</body>
</html>

例子

overflow:hidden(经常使用)：

　　overflow属性规定当内容溢出元素框时，发生的事情。

　　属性值：

　　visible：默认值，内容不会被修剪，会呈如今元素框以外。

　　hidden：内容会被修剪，而且其他内容是不可见的。

　　scroll：内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。

　　auto：若是内容被修剪，则浏览器会显示滚动条以便利查看其他内容。

　　inherit：规定应该从父元素继承overflow属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            overflow: scroll;
        }
        div{
            width: 100px;
            height: 100px;
            overflow: inherit;
        }
    </style>

</head>
<body>
    <div>顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋顾清秋</div>
</body>
</html>

例子

块级元素和行内元素

标签分为两种等级：

1，行内元素。2，块级元素。

行内元素和块级元素的区别：

块级元素和行内元素的分类：

块级元素和行内元素的相互转换：

CSS一共有三种手段，是一个元素脱离标准流文档：

浮动

绝对定位

固定定位

浮动：

浮动的四大特性：

浮动元素的脱标：

浮动元素互相贴靠：

浮动元素字围效果：

浮动元素紧凑效果：

谨记：关于浮动，必定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一块儿浮动。另外，有浮动，必定要清楚浮动。

为何要清楚浮动：

给父盒子设置高度：

clear：both；

伪元素清除法(经常使用)：

overflow:hidden(经常使用)：

　　1，行内元素。2，块级元素。