您好,登录后才能下订单哦!
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>
<meta charset="utf-8">
<title>导航栏</title>
<style type="text/css">
.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>
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>
代码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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。