Width Height -- (1)

2019-05-22 06:30:32来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

Width和Height应该是我们学习CSS时,最先接触到的属性了,一宽一高。

我们知道页面当中的标签分为块级元素和行内元素,它们最大的区别就在于,块级元素可以设置宽高,行内元素不能设置宽高。

举例说明,我们块级元素、行内元素各举一例

块级元素我们以div为例,div标签是我们编写页面最常用的标签了,我们称它为盒子。定义宽高在它身上甚至有种亲切的感觉。

<div></div>

div{
    border:1px solid black;
}

给div一个边框我们可以看见它,否则即使标签出来了,也是透明的(行内块元素除外)

 

可以看到,div是块级元素,块级元素独占一行,所以在未设置宽高的时候,我们看到的是一条直线。

行内元素我们以span为例,span标签被称为行内标签,在它当中写入的内容也会在同一行显示

<span></span>

span{
    border: 1px solid black;
}

行内元素是没有宽高的,他们的宽高是由其中的文本决定

我们一开始看到的是默认文本大小的高度,行内元素可以多个元素同占一行,所以宽为零,我们能看到的是与文本等高的一条竖线

一开始我们说到,行内元素和块级元素最大的区别就是行内元素不能设置宽高,块级元素可以设置宽高。设置宽高是改变元素占位大小的过程,使我们可以随心所欲的去布置页面,实现我们对页面的美化。

下面我们来看看行内元素和块级元素在规定宽高时是什么样子。

首先是块级的div

<div></div>

div{
  border: 1px solid black;
  width: 200px; /* 宽 */
  height: 200px; /* 高 */
}

我们可以看到,div的形状从原先的一条从左到右的直线,变成了现在的矩形

由此可见块级元素是接受宽高属性所发生的改变的。

接下来是行内元素中的span

<span></span>

span{
    border: 1px solid black;
    width: 200px; /* 宽 */
    height: 200px; /* 高 */
}

span标签就没有发生任何改变

所以说行内元素是不接受宽高属性所发生的改变的。

宽高是我们排版布局的最重要的手段,一定要好好学习哦:)


原文链接:https://www.cnblogs.com/Function-cnblogs/p/10891580.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【WEB基础】HTML &amp; CSS 基础入门(2)选取工具:VS2019安装

下一篇:【WEB基础】HTML &amp; CSS 基础入门(3)段落及文本