详解CSS标识中的显示信息方式

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

标识的显示信息方式(关键)

div和span标识

​1.款式彻底同样,标识不一样,显示信息的結果彻底不一样

​2.每一个div会占有1行,好几个span会并列1排

1.块元素

特性:宽度默认设置是100%,高宽比默认设置是0,能够设定宽度和高宽比,会承继父级的宽度,换行显示信息—div ul li p h

示用意

总结:块元素能够加上宽高的特性,占有1行

2.行元素

特性:宽高默认设置全是0,不可以设定宽和高,1行显示信息----span b i u a

示用意

总结:对宽高不比较敏感,不可以占有1行

3.行内的块元素

特性:只能设定宽和高,不可以换行显示信息—img input

示用意

多学1招:从大的层面来讲,实际上行内的块元素也属于行内元素,对行内元素的一些实际操作,一样能够实际操作行内的块元素,例:text-align:center;line-height:1000px;

4.方式变换

英语的语法:display:值

赋值:block转成块元素,inline转成行元素,inline-block转成行内的块元素,none掩藏元素

多学1招:应用该特性掩藏元素后,在网页页面中将不占有室内空间

小实例:简单导航栏的制做

      实例示用意

编码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf⑻">
	<title></title>
	<style type="text/css">
		a{
            display:inline-block;
            width:100px;
            height:50px;
            background:#f00;
            text-align:center;
            text-decoration:none;
            color:#fff;
            line-height:50px;
        }
		body{text-align:center;}
	</style>
</head>
<body>

<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>

</body>
</html>

总结

到此这篇有关CSS标识中的显示信息方式的文章内容就详细介绍到这了,更多有关css 标识显示信息方式內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!