CSS块元素-内联元素-浮动

发布时间：2020-07-07 21:39:23 作者：bigbeatwu
来源：网络阅读：372

1.块元素

块元素，也称为行元素，布局常用的标签如：div,p,ul,h2-h7,dl,dt,dd等等都是块元素，它在布局中的行为：

（1）支持全部的样式

（2）如果没有设置宽度，默认的宽度为父级宽度100%

（3）盒子占据一行、即是设置了宽度

<div class="box">div元素</div>
<p class="box01">p标签</p>

2.内联元素

内联元素，也可以称为行内元素，布局中常用的标签如：a,span,em,b,strong,i,等等都是内联元素

它们在布局中的行为：

（1）支持部分样式（不支持宽、高、margin上下、padding上下）

.box a{
background-color: pink;
margin: 20px 20px;
padding: 30px 30px;

（2）宽高由内容决定

（3）盒子并行一行

（4）代码换行，盒子之间会产生间距

（5）子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

解决内联元素之间间隙的方法

.box01{
width: 200px;
height: 100px;
border: 1px solid #000000;
margin: 20px;
text-align: center;

（1）去掉内联元素之间的换行

（2）将内联元素的父级设置font-size为0，内联元素自身再设置font-size

.box{
width: 300px;
height: 500px;
background-color: yellow;
border: 1px solid #000000;
font-size: 0px; /除去间隙/

    **3.内联块元素**

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归于类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

（1）支持全部样式

（2）如果没有设置宽高，宽高由内容决定

（3）盒子并在一行

（4）代码换行，盒子会产生间距

（5）子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所有我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

.box a{
width: 40px;
height: 50px;
background-color: pink;
/margin: 20px 20px;/
padding: 0px 30px;
font-size: 16px;
display: inline-block;
}

例子：

head>

.meun{
    width: 505px;
    height: 48px;
    font-size: 0px;
    margin: 100px 50px;
    /*background-color: pink;*/
    /*border: 1px solid #000000;*/
    /*text-align: center;*/

}
.meun a{
    width: 100px;
    height: 39px;
    font-size: 16px;
    border: 1px solid #000000;
    padding-top: 9px;                  /*尽量不用*/
    margin-left: -1px;
    margin-top: -1px;
    text-align: center;                 /*对齐方式*/
    text-decoration: none;              /*隐藏下划线*/
    font-family: "Microsorf Yahei";

    display: inline-block;              /*内联块*/
}
.meun a:hover{                          /*伪类*/
    background-color: gold;             /*背景色*/
    color: #FFFFFF;                      /*文字颜色*/
}
</style>

</head>

<body>

<div class="meun">

    <a href="#">首页</a>
    <a href="#">公司简介</a>
    <a href="#">公司业务</a>
    <a href="#">公司员工</a>
    <a href="#">公司产品</a>
</div>

</body>

CSS块元素-内联元素-浮动

4.display属性：使用来设置元素的类型及隐藏的，常用的属性有：

（1）none 元素隐藏且不占位置

（2）block元素以块元素显示

（3）inline元素以内联元素显示

（4）inline-block 元素以内联块元素显示

5.浮动元素

（1）浮动元素有左浮动（float-left）和右浮动（float-right）

（2）浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才会停下来

（3）相邻浮动的块元素可以并在一行，超出父级宽度就换行

（4）浮动让行内元素或块元素自动转化为行内块元素（此时不会有行内块元素间隙问题）

（5）浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果

（6）父元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动

（7）浮动元素之间没有垂直margin的合并

代码1

<head>
<meta charset="utf-8">
<title>新闻标题</title>
<style type="text/css">

.title{
    width: 400px;
    height: 40px;
    margin: 50px auto;
    border-bottom: 1px solid #ff8200;

}
.title h4{
    width: 80px;
    height: 40px;
    margin: 0px;
    background-color: #ff8200;
    float: left;
    font-size: 16px;
    text-align: center;
    line-height: 36px;
    font-weight: normal;
}
.title a{
    float: right;
    line-height: 36px;
    text-decoration: none;
    /*font: normal 14px/36px 'Microsoft Yahei' 加粗，字号，行高，字体*/

}
.title a:hover{
    color: #ff8200;
}
</style>

</head>

<body>

<div class="title">

    <h4>新闻</h4>
    <a href="#">更多</a>
</div>

</body>

CSS块元素-内联元素-浮动

代码2

<head>
<meta charset="utf-8">
<title>文字绕图</title>
<style type="text/css">

.con{
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    margin: 50px auto;
    overflow: auto;
}
.pic{
    width: 224px;
    height: 205px;
    background-color: aqua;
    margin: 10px;
    margin-bottom: 0px;
    float: left;
}
.word{
    height: 400px;
    background-color: #FFF;
    line-height: 24px;

}
/*.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    zoom:1;
}*/
</style>

</head>

<body>

<div class="con">

    <div class="pic"><img src="image/路飞1.jpg" alt="路飞"></div>
    <div class="word">

    ![](https://s1.51cto.com/images/blog/201812/21/91327cf0278e14d4328122567f081eab.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

        内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归于类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

（1）支持全部样式

（2）如果没有设置宽高，宽高由内容决定

（3）盒子并在一行

（4）代码换行，盒子会产生间距

（5）子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所有我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
</div>
</div>

</body>

6.清除浮动

（1）父级上增加属性overflow：hidden

（2）在最后一个子元素的后面加一个空的div，给它样式属性clear：both（不推荐）

（3）使用成熟的清除浮动样式类，clearfix

代码

<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">

.list{
    width: 400px;
    /*height: 400px;*/                   /*浮动问题：不给高度，设置了浮动*/
    margin: 50px auto;
    border: 1px solid #000000;
    list-style: none;
    padding: 0;
    /*overflow: hidden;*/                /*第一张清除浮动，*/
}
.list li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin: 20px;
    text-align: center;
    float: left;
}
/*第三种清除浮动方法，相当于第二种，以插入的方式*/
/*.clearfix:after{                   
    content: "";
    display: table;
    clear: both;
}*/

/*before解决塌陷问题，after解决浮动问题，zoom解决兼容性问题*/
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    zoom:1;
}
</style>

</head>

<body>

<ul class="list clearfix">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <!--<div ></div>-->  <!--第二种清除浮动-->
</ul>

</body>

CSS块元素-内联元素-浮动

CSS块元素-内联元素-浮动

相关阅读