`

六.CSS尺寸

 
阅读更多

尺寸
属性                      描述
height      设置元素高度。  
max-height  设置元素的最大高度。
max-width   设置元素的最大宽度。
min-height  设置元素的最小高度。
min-width   设置元素的最小宽度。 
width       设置元素的宽度。
(1)设置图像的高度/宽度 height/width
img.normal { height: auto }
img.big { height: 160px }
img.small ( width: 30px)
img.big { height: 50% }
img.small ( width: 10%)
heigth/width的值是基于父元素来说的
注意图像会在保持高宽比的情况下进行伸拉
(2)设置元素的最大/最小:高度/宽度 max-height max-width
p{max-height: 300px;max-width: 50%;min-height: 100px;min-width: 200px}
注意:默认向下溢出,需要通过overflow来调整;经测试IE不生效;最大最小冲突时最小的生效;
(3)设置行间距
p.big{line-height: 200%}
p.normal{line-height: 20px} 在大多数浏览器中默认行高大约是 20px。
p.normal{line-height: 1} 拥有标准行高的段落。 默认行高大约是 1

分享到:
评论

相关推荐

    27款经典的CSS框架小结 网页制作必备

    作为最著名的 CSS 框架之一,YUI Grids CSS 提供了四种预设页面宽度,六种预设模板。其中的负 Margin 技术,使用度量单位 em,清除布局浮动等技术非常值得学习和借鉴。 3. Blueprint Blueprint 是一款成熟

    postcss-logical:在CSS中使用逻辑属性和流相对值

    使您可以遵循规范,在CSS中使用逻辑而非物理,方向和尺寸映射。 .banner { color : #222222 ; inset : logical 0 5 px 10 px ; padding-inline : 20 px 40 px ; resize : block; transition : color 200 ms ;...

    使用CSS实现逼真的水波纹点击效果

    这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠 虽然webkit具有遮罩的能力(webkit mask),...,然后让背景的尺寸有大有小,就可以完成了,只要把六个div叠在一起,搭配CSS的animation,就可以让六个

    介绍27款经典的CSS框架

    利用CSS框架,可以简化你的工作,提高工作效率。CSS框架是一系列CSS文件的集合体,包含了基本的元素重置,页面排版、网格...作为最著名的CSS框架之一,YUIGridsCSS提供了四种预设页面宽度,六种预设模板。其中的负Ma

    EXTJS总结.txt

    六、Html片断 38.insertHtml 插入HTML片断到这个元素。至于要插入的html放在元素的哪里,你可指定beforeBegin, beforeEnd, afterBegin, afterEnd这几种。第二个参数是插入HTML片断,第三个参数是决定是否返回一个...

    jQuery详细教程

    提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...

    flex3的cookbook书籍完整版dpf(包含目录)

    第六章. DataGrid和高级DataGrid(179) 6.1节. 创建DataGrid自定义列 6.2节. 为DataGrid列设定排序函数 6.3节. 启动DataGrid多列排序 6.4节. 过滤DataGrid数据项 6.5节. 为AdvancedDataGrid创建自定义表头 6.6节. ...

    js-sliders-game:Vanilla JavaScript CSS Firebase 项目

    滑块链接 :link:演示 :chequered_flag:如何玩滑块 :backhand_index_pointing_right: 选择游戏尺寸:3x3、4x4 等... 将碎片从上方、下方或侧面滑入空白空间以尽可能少的移动以正确的顺序排列位置编号碎片在正确的位置...

    techdegree-project-2-portfolio:我使用HTML和CSS构建了响应式,移动优先的布局

    我的六个项目的投资组合部分 技能部分,其中包括我的技术技能和软技能 我的联系信息,包括我的LinkedIn个人资料链接和电子邮件地址 我学习了如何包括屏幕尺寸为768px和1024px的媒体查询。 我学习了如何包括float...

    宝马汽车带背景音乐网页(6页,可用作Web期末作业)

    在这个项目中,学生们将创建一个精美的宝马轿车展示网页,该网页包含六个页面,每个页面都精心设计,以展示宝马轿车的独特魅力和高端品质。这个网站不仅具有视觉上的吸引力,还融入了高品质的背景音乐,为访问者提供...

    Ext+JS高级程序设计.rar

    1.1.6 尺寸大小 13 1.1.7 定位功能 14 1.1.8 动画功能 16 1.1.9 杂项 19 1.2 Ext Core的Ajax功能 19 1.3 DomQuery详解 20 1.4 模板介绍 23 1.5 实用功能 24 1.6 定时执行代码 25 1.7 本章小结 26 第2章 Ext Core实例...

    86CMS企业网站管理系统 2011.SP7 UTF-8.zip

    广告管理:增加图片、文字、FLASH广告,定义尺寸、类型、生成JS调用。 幻灯管理:新闻幻灯、幻灯修改等。 招聘管理:在线发布招聘信息、修改、删除、管理职位。查看前台用户投至简历。 应聘管理:会员投递简历可...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    比如表示首行标题,有固定的尺寸。相对的,XML则没有固定的标记,XML不能描述网页具体的外观,内容,它只是描述内容的数据形式和结构。 这是一个质的区别:网页将数据和显示混在一起,而XML则将数据和显示分开来。 ...

    基于stm32的六轴机械臂控制+open mv颜色识别,识别不同的物块分放.zip

    STM32产品线按性能、功耗、外设组合等特性划分为多个子系列,如STM32F、STM32L、STM32G、STM32H等,每个子系列下又包含多种型号,以适应不同成本、性能、尺寸和功耗要求。封装形式多样,从小型QFN、LQFP到大型BGA,...

    宝马轿车带背景音乐网页(6页,可用作Web期末作业)

    在这个项目中,学生们将创建一个精美的宝马轿车展示网页,该网页包含六个页面,每个页面都精心设计,以展示宝马轿车的独特魅力和高端品质。这个网站不仅具有视觉上的吸引力,还融入了高品质的背景音乐,为访问者提供...

Global site tag (gtag.js) - Google Analytics