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标签就没有发生任何改变
所以说行内元素是不接受宽高属性所发生的改变的。
宽高是我们排版布局的最重要的手段,一定要好好学习哦:)
Width Height -- (1)的更多相关文章
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- as3:sprite作为容器使用时,最好不要指定width,height
除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...
- offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()
开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...
- 正则:img的url,width,height 和 a标签的url以及替换
代码:// 内容:$detail['content'] //img的url,width,height $img = array(); $matches = array(); $regeImg = '/ ...
- ffmpeg按比例缩放--"width / height not divisible by 2" 解决方法
最近在处理视频的时候,有这么一个需求 如果视频的分辨率宽度大于960的话,就把宽度设为960,而高度按其比例进行缩放 如果视频的分辨率高度大于540的话,就把高度设为540,而宽度按其比例进行缩放 之 ...
- 如何理解VB窗体中的scale类属性及width height属性之间的关系
如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...
- css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...
- Canvas的width,height 和 样式中Canvas的width,height
控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...
- [WPF系列]- Style - Specify width/height as resource in WPF
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys=" ...
- css中的width,height,属性与盒模型的关系
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...
随机推荐
- luoguP3455 [POI2007]ZAP-Queries
题意 设\(f(n)=\sum\limits_{i=1}^{a}\sum\limits_{j=1}^{b}[gcd(i,j)==n],F(n)=\sum\limits_{n|d}f(d)\) 发现\( ...
- 论文阅读笔记六十三:DeNet: Scalable Real-time Object Detection with Directed Sparse Sampling(CVPR2017)
论文原址:https://arxiv.org/abs/1703.10295 github:https://github.com/lachlants/denet 摘要 本文重新定义了目标检测,将其定义为 ...
- 两个开源的 Spring Boot + Vue 前后端分离项目
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- 使用dva 的思考的一个问题,数组复制的必要
*getTags({ payload }, { call, put }) { const response = yield call(getTags, payload); const arr = re ...
- 使用jattach 在host 节点查看容器jvm信息
jattach是基于hostspot attach api 指南编写的轻量all in one(jmap,jstack,jcmd,jinfo) 的工具 包含了以下命令 load 家在agent lib ...
- nowcoder911J 异或的路径
题目链接 题意 给出一棵树,每条边有边权.求\(\sum\limits_{i=1}^n{f(i,j)}\),\(f(i,j)\)表示从i到j路径的异或和. 思路 \(g_i\)表示从根到\(i\)的异 ...
- [LeetCode] 897. Increasing Order Search Tree 递增顺序查找树
Given a tree, rearrange the tree in in-order so that the leftmost node in the tree is now the root o ...
- Manjaro Linux安装后第一件事
环境:Manjaro KDE 使用中科大源 USTC Mirror 当然也可以勾选所有中国镜像源 谷歌加上云pinyin拼音输入法,不亚于搜狗 fcitx-qt5 kcm-fcitx (confi ...
- PDMan-2.1.0 正式发布:用心开源,免费的国产数据库建模工具 PowerDesigner
PDMan是一款开源免费的数据库模型建模工具,支持Windows,Mac,Linux等操作系统,是PowerDesigner之外,更好的免费的替代方案.他具有颜值高,使用简单的特点.包含数据库建模,灵 ...
- hyper-v安装centos后配置网络
YPE="Ethernet" PROXY_METHOD="none" BROWSER_ONLY="no" BOOTPROTO="n ...