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

1.块元素

创新互联建站专注于潜山网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供潜山营销型网站建设,潜山网站制作、潜山网页设计、潜山网站官网定制、微信小程序定制开发服务,打造潜山网络公司原创品牌,更为您提供潜山网站排名全网营销落地服务。

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

(1)支持全部的样式

(2)如果没有设置宽度,默认的宽度为父级宽度100%

(3)盒子占据一行、即是设置了宽度

div元素

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>


导航栏

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



新闻标题

新闻

更多

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

代码2



文字绕图

路飞
![](/upload/otherpic54/91327cf0278e14d4328122567f081eab.png) 内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归于类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为:

(1)支持全部样式

(2)如果没有设置宽高,宽高由内容决定

(3)盒子并在一行

(4)代码换行,盒子会产生间距

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

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


6.清除浮动

(1)父级上增加属性overflow:hidden

(2)在最后一个子元素的后面加一个空的div,给它样式属性clear:both(不推荐)

(3)使用成熟的清除浮动样式类,clearfix

代码



清除浮动

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


分享标题:CSS块元素-内联元素-浮动
浏览地址:http://cdiso.cn/article/giscgj.html

其他资讯