Width Height -- (1)
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
Width Height -- (1)相关推荐
- pygame中Rect(left, top, width, height)的参数详解
今天终于把一个问题弄明白了,那就是pygame.Rect(left, top, width, height)中参数的问题.当遇到问题后,我上网上找了大量的资料,但是并没有详细的答案,于是开始思考最终得 ...
- as3:sprite作为容器使用时,最好不要指定width,height
官方解释: 除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 heigh ...
- 【目标检测】xmin,ymin,width,height 转为 xmin,ymin,xmax,ymax
1.xmin,ymin,width,height 转为 xmin,ymin,xmax,ymax 前2个坐标不需要动,只需要动后2个,规则如下: xmax= xmin+width-1ymax= ymin ...
- unity ugui改变pos,width,height
1.改变RectTransform的topGetComponent<RectTransform>().offsetMax = new Vector2(GetComponent<Rec ...
- Unity获取Ui的Posx与Posy以及Width Height和Top Bottom
获取Posx,Posx,通过anchoredPosition GetComponent<RectTransform>().anchoredPosition.x; 获取Width Heigh ...
- unity ugui改变width,height,pos
1.改变RectTransform的bottom GetComponent<RectTransform>().offsetMin = new Vector2(GetComponent& ...
- css - width / height
本文主要对<CSS世界>3.2节 width/height 作用的具体细节 的内容进行一些摘取和概括.更多资料可查阅<CSS世界>. 一.深藏不露的width: auto 一般 ...
- 如何将div上下居中,左右居中 有五种(width height定,width height不定 尺寸不固定)
width height定 1.绝对定位 top50% left50% margin-top 负值定为自身高一半 margin-left负值定为自身宽一半 2.定位拉伸 定位父relative子abs ...
- echarts map 解决label设置width height无效并附aliyun地图json地址
aliyun地图json地址 http://datav.aliyun.com/tools/atlas/#&lat=30.316551722910102&lng=106.75113472 ...
最新文章
- Mahout分布式推荐引擎介绍
- IntelliJ IDEA的配置优化
- 前端学习(1508):组件和模块的区别
- 【2019浙江省赛 - A】Vertices in the Pocket(权值线段树下二分,图,思维)
- 计算机系统-实模式/保护模式/虚拟86模式
- 安全成Win10进军企业级市场的最大卖点?
- 【语音识别基础】总有一天你会用到,嗯,没有公式~
- 中国防毒软件市场深度研究分析报告
- 完全开源:带OLED超级Mini的SWD离线烧写器!
- 校园网 显示ldap服务器连接不上,客户端无法连接到LDAP服务器
- stm32学习----正电原子精英板控制电机正反转
- 【转载】从创业者角度看《印度合伙人 Padman》后的一点感受
- 二叉树寻找节点x的所有祖先
- Linux性能分析工具
- 【Java】一个公司职员薪水管理系统(顺序表)
- Android studio飞机大战游戏分析-月末总结
- 8.0.高等数学3-向量的乘法运算(数量积、向量积与混合积)
- Github每日精选(第61期):虚拟 DOM 走向未来 million
- M1 芯片 MacBook 结合 MAMP 集成环境配置 PHP 环境变量
- 弘辽科技:淘宝卖家打造爆款商品的六大技巧!