html+css基础教程入门之CSS 尺寸
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。
CSS height 属性
height 属性用以设置元素的高度,单位可以使用px,em等,通常用使用PX(像素)为html单位。这个属性定义元素内容区的高度,在内容区外面可以增加内边距、边框和外边距。
设置段落的高度和宽度:
p{ height:100px;width:100px;}
height属性可能的值有:
auto: 默认。浏览器会计算出实际的高度。
length: 使用 px、em 等单位定义高度。
%: 基于包含它的块级对象的百分比高度。通常单独对一个div高度为百分比没有效果。
inherit: 规定应该从父元素继承 height 属性的值。
CSS line-height 属性
line-height 属性设置行间的距离(行高)。该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。 line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
设置段落的高度和行高:
p{ height:100px;line-height:100px;}
CSS max-height和min-height 属性
max-height 属性设置元素的最大高度。该属性值会对元素的高度设置一个最高限制。因此,元素可以比指定值矮,但不能比其高。不允许指定负值。
min-height 属性设置元素的最小高度。该属性值会对元素的高度设置一个最低限制。因此,元素可以比指定值高,但不能比其矮。不允许指定负值。
max-height和min-height 属性不包括外边距、边框和内边距。
p{ max-height:50px;}
对为什么需要设置max-height最大高度的解释:
此属性较少使用,可能是为了避免内容太多将高度撑太高影响布局美化统一,这个时候我们设置最大高度限制。比如一个table tr td表格对象里装一个图片,而图片高度不确定,如果太高了不想图片撑破tr td表格,这个时候通过css max-height限制图片最大高度是有必要的。
设置min-height最小高度应用地方的解释:
有时设置一个对象盒子时候避免对象没有内容时候不能撑开,但内容多少不能确定所以又不能固定高度,这个时候我们就会需要css来设置min-height最小高度撑高对象盒子。当内容少时候最小高度能将内容显示出,如果内容多余最小高度能装下时候,对象也会再随内容增多而增高。根据实践经验,如果仅仅是上面这些处理,往往是无法应对实际需求的,存在一些“致命问题”。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
IE6不支持max-height解决方法
1)使用css hack来解决
.box{ max-height:50px;_height:50px;}
2)还有直接使用以下CSS代码
.box{ height: expression(this.height> 50 ?50: true); max-height: 50px;}
但是此CSS代码会引起图片加载后不能正常显示(图片随机会被缩小无法正常显示),推荐使用max-height:50px;_height:50px;来解决IE6不能max属性的问题。
同理,推荐使用css hack来解决IE6不支持min-height的问题。
CSS width 属性
width 属性设置元素的宽度,这个属性定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距。
传统Html 宽度属性单词:width 如width="300";
CSS 宽度属性单词:width 如width:300px;
设置段落的高度和宽度:
p{ height:100px;width:100px;}
width属性可能的值有:
auto: 默认。浏览器会计算出实际的宽度。
length: 使用 px、em 等单位定义宽度。
%: 定义基于包含块(父元素)宽度的百分比宽度。
inherit: 规定应该从父元素继承width属性的值。
CSS max-width和min-width 属性
max-width 定义元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。因此,元素可以比指定值窄,但不能比其宽。不允许指定负值。
min-width 属性设置元素的最小宽度。该属性值会对元素的宽度设置一个最小限制。因此,元素可以比指定值宽,但不能比其窄。不允许指定负值。
最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。比如一个图片为主列表,对象里图片大小不定时候,为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。再如,一个盒子里有文章有图片混排的时候,有时图片宽度不能确定,这个时候如果html img图片宽度超出了div盒子宽度,可能图片就会撑破div盒子造成图片混乱。
设置段落的最大宽度:
p{ max-width:100px;}
设置段落的最小宽度:
p{ min-width:100px;}
Css max-width与css min-width可以同时在一个CSS选择器使用设置一个对象最大最小宽度样式。一般对图片对象设置此两项样式比较多。
IE6不支持max-width的解决方法
.box{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;}
说明:max-width:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围宽度。
而_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");overflow:hidden;则是让IE6支持max-width替代CSS代码,但效果和其它版本浏览器相同效果。
IE6不支持min-width的解决方法
.box{min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"");}
让IE6都支持max-width和min-width的解决方法
用到CSS代码:
_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));
说明:不能超出大于620px的宽度,又不小于1像素的宽度。
html+css基础教程入门之CSS 尺寸相关推荐
- css做名单,css基础教程:2021年适合新手的7个CSS入门教程推荐
上一篇我们向同学们推荐了5个html入门教程,本篇我们继续向同学们精选推荐一些适合新手学习的CSS基础入门教程,欢迎学习! 首先我们来介绍什么是CSS?以及CSS的作用 CSS 是一种标准样式表语言, ...
- DIV+CSS基础教程
DIV+CSS基础教程 第一节 了解DIV+CSS 一.什么是DIV+CSS DIV元素是html(超文本语言)中的一个元素,是标签,用来为HTML文档内大块(block-level)的内容提供结构 ...
- CSS基础教程(下)
今天把看<CSS基础教程>的下半部分笔记贴出来,嘿嘿,希望也对大家有点好处. 一. 文本 1. 基本字体属性 下面看看字体的几个属性: 1)font-f ...
- CSS基础选择器之类选择器(CSS、HTML)
CSS基础选择器之类选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"><head><meta c ...
- JavaScript基础教程——入门必看篇
JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. ...
- css基础知识入门教程免费,DIVCSS入门基础知识教程.doc
DIVCSS入门基础知识教程 HYPERLINK "/rumen/r319.html" DIV+CSS盒子模型 CSS盒子模型-什么是 HYPERLINK "/" ...
- DIV+CSS基础教程:导航条的制作详解
课程开始: 前三节课,我们知道了什么是"内容块状元素和内联元素",以及XHTML+CSS布局的核心概念"盒子模型",同时又学习了一下页面布局中两种方 ...
- css基础教程【学习笔记】
[前端总路线学习笔记] 文章目录 css基础 一. css初识 二. css语法规范 三. 字体属性 四. CSS注释 五.开发工具 六. 选择器 七.文本属性 八.css样式表: 1.内部样式表(嵌 ...
- CSS基础教程(上) - 阿蜜果 - BlogJava
导读: 因为本人是个CSS盲,为了改善这种情况,特意扫了一下盲,前不久不买书时,看到一本不错的CSS基础书,顺手买了一本,觉得还不错,记了一下笔记,共享给大家. 一. CSS 入门 1. CSS 应用 ...
- 【网页设计】CSS基础全面入门
文章目录 字体样式属性 font-size:字号大小 font-family:字体 CSS Unicode字体 font-weight:字体粗细 font-style:字体风格 font:综合设置字体 ...
最新文章
- Windows10如何设置系统保护色
- Linux 设置端口转发
- java执行时的两个常见问题(无法加载主类)
- Redis 如何保持和MySQL数据一致【一】
- 设置edittext不自动获取焦点
- web数据交互_通过体育运动使用定制的交互式Web应用程序数据科学探索任何数据...
- 重磅下载 | 核心系统100%上云,揭秘双11背后的云原生实践
- 信号扫描_图文并茂,一文读懂信号源
- 炸了!JetBrains 宣布:IntelliJ IDEA 彻底弃用 Log4j。。
- 计算机手速专业说法,大学里“挂科率超高”的专业,学霸也不好拿捏,考试难补考更难...
- HDU4635 Strongly connected
- c语言回顾之指针数组和数组指针
- GraphEmbedding - Node2vec 图文详解
- 冒险岛进去计算机丢失,找不到队伍怎么办?《冒险岛2》打杂攻略
- python 反爬虫策略
- 【智能优化算法】多目标于分解的多目标进化算法MOEA/D算法(Matlab代码实现)
- PLC同时连接多个触摸屏和电视机显示器解决方案
- Pr学习笔记——添加字幕流
- fftn N 维快速傅里叶变换(Matlab)
- 使用天平只用3次求出12个球中的次品球并确认轻重