css src属性值,css维度属性 – CSS高级教程

上一章CSS高级教程请查看:css内容溢出处理

本章介绍用于控制元素的高度和宽度的CSS维度属性。

CSS维度属性

CSS提供了几个属性,如width, height, max-width和max-height等,允许你控制一个框的尺寸,下一节将介绍如何使用这些属性来创建更好的web页面布局。

宽度和高度属性

width和height属性定义元素内容区域的宽度和高度。此宽度和高度不包括划片、边框或边距。查看CSS盒子模型,了解如何计算有效宽度和高度。

width和height属性可以取长度(px、pt、em等)、百分比或关键字auto的值,长度不允许为负值。

div {

width: 300px;

height: 200px;

}

此样式规则为

元素分配固定的宽度300像素和高度200像素。

注意:特殊的auto值允许浏览器自动计算指定元素的宽度,百分比(%)值指的是元素所在块的宽度。

max-height属性

max-height属性允许你指定框的最大内容高度,这个最大高度不包括划片、边框或边距。

应用了max-height的元素将不会比指定的值更高,即使height属性被设置为更大的值也是如此。例如,如果高度设置为200px,最大高度设置为100px,那么元素的实际高度就是100px。

div {

height: 200px;

max-height: 100px;

}

max-height属性通常与min-height属性一起使用,以生成相关元素的高度范围。

注意:这个规则有一个例外——如果最小高度属性指定的值大于max-height属性的值,在这种情况下,最小高度值实际上就是应用的值。

最小高度属性

min-height最小高度属性允许你指定块的最小内容高度,这个最小高度不包括划片、边框或边距。

应用最小高度min-height的元素永远不会小于指定的最小高度。例如,如果高度设置为200px,最小高度设置为300px,那么元素的实际高度就是300px。

div {

height: 200px;

min-height: 300px;

}

最小高度属性通常与最大高度属性一起使用,以生成相关元素的高度范围。

注意:min-height属性通常用于确保即使没有内容,元素也至少具有最小高度。但是,如果内容超过最小高度设置,则允许元素正常增长。

最大宽度属性

max-width属性允许你指定块的最大内容宽度,这个最大宽度不包括划片、边框或边距。

即使将width属性设置为更大的值,应用最大宽度max-width的元素的宽度也不会超过指定的值。例如,如果宽度设置为300px,最大宽度设置为200px,则元素的实际宽度为200px。

div {

width: 300px;

max-width: 200px;

}

max-width属性通常与min-width属性一起使用,以生成相关元素的宽度范围。

注意:这个规则有一个例外;如果指定的最小宽度属性的值大于最大宽度属性的值,在本例中,最小宽度值实际上就是应用的值。

min-width属性

最小宽度属性允许你指定块的最小内容宽度,这个最小宽度不包括划片、边框或边距。

应用最小宽度的元素永远不会比指定的最小宽度更窄。例如,如果宽度设置为300px,最小宽度设置为400px,则元素的实际宽度为400px。

div {

width: 300px;

min-width: 400px;

}

最小宽度属性通常与最大宽度属性一起使用,以生成相关元素的宽度范围。

注意:最小宽度属性通常用于确保即使没有内容,元素也至少具有最小宽度。但是,如果元素的内容超过最小宽度设置,则允许元素正常增长。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值