CSS 尺寸

Forest10 发布于2019-08-28 18:17 / 2351人阅读

摘要：概览尺寸属性允许你控制元素的高度和宽度。使用等单位定义高度。该属性值会对元素的高度设置一个最低限制。不允许指定负值。可选的值使用等单位定义元素的最小宽度值，默认值取决于浏览器。尺寸与盒模型有部分关联，稍后会补充盒模型的相关笔记。

概览

CSS 尺寸属性允许你控制元素的高度（height）和宽度（width）。

属性	描述
height	设置元素的高度。
width	设置元素的宽度。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。

我们一般所指的高度和宽度是指下图中红线标示的区域。

IE 5.X 和 6 这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。简单知道就行了。

height

height 属性设置元素的高度。行内非替换元素（如：,,影响他们高度的是line-height属性）会忽略这个属性。

可选的值：

auto 默认。浏览器会计算出实际的高度。

length 使用 px, cm, mm, em 等单位定义高度。

% 基于包含它的块级对象的百分比定义高度。

div.normal {
    height: auto
}

div.big {
    height: 160px
}

div.small {
    height: 30px
}

width

width 属性设置元素的宽度。行内非替换元素（如：,）会忽略这个属性。

可选的值：

auto 默认。浏览器会计算出实际的宽度。

length 使用 px, cm, mm, em 等单位定义宽度。

% 基于包含它的块级对象的百分比定义宽度。

div.normal {
    width: auto
}

div.big {
    width: 160px
}

div.small {
    width: 30px
}

max-height

max-height 属性设置元素的最大高度。

该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值。

可选的值：

none 默认。对元素的高度没有限制。

length 使用 px, cm, mm, em 等单位定义元素的最大高度值。

% 基于包含它的块级对象的百分比定义最大高度。

p {
    padding: 0;
    margin: 0;
    max-height: 10px;
    overflow: none;
}

设置最大高度后，段落的高度不会超过最大高度，但文本会溢出，其他部分可以覆盖到溢出的部分。

max-width

max-width 定义元素的最大宽度。

该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。

可选的值：

none 默认。对元素的宽度没有限制。

length 使用 px, cm, mm, em 等单位定义元素的最大宽度值。

% 基于包含它的块级对象的百分比定义最大宽度。

p {
    max-width:100px;
}

min-height

min-height 属性设置元素的最小高度。

该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。

可选的值：

length 使用 px, cm, mm, em 等单位定义元素的最小高度值，默认值是0。

% 基于包含它的块级对象的百分比定义最小高度。

p {
    min-height:100px;
}

min-width

min-width 属性设置元素的最小宽度。

该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。

可选的值：

length 使用 px, cm, mm, em 等单位定义元素的最小宽度值，默认值：取决于浏览器。

% 基于包含它的块级对象的百分比定义最小宽度。

p {
    min-width:100px;
}

小结

CSS 尺寸就是指元素内容的高度和宽度，虽然说非常简单，但却是必会知识，从属性的字面意思基本就可以领会其意思，没什么深入不深入可谈。

CSS 尺寸与盒模型有部分关联，稍后会补充盒模型的相关笔记。

GPU云服务器云服务器任意尺寸网站尺寸文件尺寸显示尺寸

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111150.html

【响应式布局】initial containing block、viewport以及相关尺寸

摘要：影响着其中元素的尺寸和定位。在标准中，元素的称为。当的宽度高度使用百分数的值时，这个百分数的基准就是的尺寸。例子其中就溢出了的区域。造成以上不同的原因是，在桌面端的缩放和在移动端的缩放有不同的性质。这两个数值的单位是设备独立像素。前言本篇文章修改、整理自我以前写的一篇文章。在阅读这篇文章之前，你需要了解设备像素、逻辑像素（设备独立像素）和CSS像素的区别，见我的前一篇文章理解设备...

weknow619 2019-08-30 15:54 评论0 收藏0
关于CSS中的字体尺寸设置

摘要：常用单位在中可以用很多不同的方式来设定字体的尺寸。当你为一个元素添加单位时，应当考虑到所有父元素的字体尺寸。例宽度是中新提出的一个单位，通过宽度来计算字体尺寸。个人翻译，转载请注明出处英文原文：CSS Font Sizing 写在前面上一篇文章如何做好移动端的响应式设计：Viewport控制讨论到了CSS像素，于是我决定研究一下如何用不同的方式来在CSS中设定字体...

mcterry 2019-08-28 18:09 评论0 收藏0
《CSS世界》笔记一：流/元素/尺寸

摘要：一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局，传统设计，网页上的所有元素的尺寸一律使用作为单位。世界中，提出了流体布局的概念所谓流体布局，指的是利用元素流的特性实现的各类布局效果。下一篇：《CSS世界》笔记二：盒模型四大家族写在前面初读《CSS世界》还是在深圳，属于换工作前的充能。那时候除了工作，其他时间基本都在这本书里了，因为它的确吸引人。之前看过《CSS揭密》...

hizengzeng 2019-08-30 15:54 评论0 收藏0
《CSS世界》笔记二：盒模型四大家族

摘要：基本上，等高布局只能满足栏的情况，除非正好是等比例的，那还可以使用实现最多栏布局上一篇世界笔记一流元素尺寸下一篇世界笔记三内联元素与对齐上一篇：《CSS世界》笔记一：流/元素/尺寸下一篇：《CSS世界》笔记三：内联元素与对齐写在前面在读《CSS世界》第四章之前，粗浅的认为盒模型无非是margin/border/padding/content而已，再多无非在不同box-sizing...

icyfire 2019-08-29 16:09 评论0 收藏0
[译] 关于两种视口（viewport）的故事：其一

摘要：它能给予一个关于你使用何种设备的正式结论，并且能通过获得。宽度两倍，高度两倍，总体四倍。视口的作用是限制元素，元素是所有网页块元素中最高一级的元素。视口并非一个结构，其不受控制。重点是上诉结论是在缩放的条件下成立的。原文地址：http://quirksmode.org/mobile/... 这篇小短文中，我将会介绍关于viewport与诸如html元素，window 对象，scree...

rose 2019-08-01 15:43 评论0 收藏0