CSS 尺寸(Dimension)

CSS 尺寸(Dimension)属性允许你控制元素的高度和宽度，同样，它允许你增加行间距。

实例

设置元素的高度

<!DOCTYPE html>
<html>
<head>  <meta charset="utf-8">  <title>自学教程(如约智惠.com)</title>  <style>img.normal {height:auto;}img.big {height:120px;}p.ex {height:100px; width:100px;}</style>
</head>
<body > <img class="normal" src="logocss.gif" width="95" height="84" /><br><img class="big" src="logocss.gif" width="95" height="84" /><p class="ex">这个段落的高和宽是 100px.</p><p>这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>

使用百分比设置图像的高度

<!DOCTYPE html>
<html>
<head>  <meta charset="utf-8">  <title>自学教程(如约智惠.com)</title>  <style>html {height:100%;}body {height:100%;}img.normal {height:auto;}img.big {height:50%;}img.small {height:10%;}</style>
</head>
<body > <img class="normal" src="logocss.gif" width="95" height="84" /><br><img class="big" src="logocss.gif" width="95" height="84" /><br><img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>

使用像素值来设置元素的宽度

<!DOCTYPE html>
<html>
<head>  <meta charset="utf-8">  <title>自学教程(如约智惠.com)</title>  <style>img {width:200px;}</style>
</head>
<body > <img src="logocss.gif" width="95" height="84" />
</body>
</html>

设置元素的最大高度

<!DOCTYPE html>
<html>
<head>  <meta charset="utf-8">  <title>自学教程(如约智惠.com)</title>  <style>p{max-height:50px;background-color:yellow;}</style>
</head>
<body > <p>本段落的最大高度被设置为 50px。 本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。</p>
</body>
</html>

使用百分比来设置元素的最大宽度

<!DOCTYPE html>
<html>
<head>  <meta charset="utf-8">  <title>自学教程(如约智惠.com)</title>  <style>p{max-height:20%;background-color:yellow;}</style>
</head>
<body > <p>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
</body>
</html>

设置元素的最低高度

<!DOCTYPE html>
<html>
<head>  <meta charset="utf-8">  <title>自学教程(如约智惠.com)</title>  <style>p{min-height:100px;background-color:yellow;}</style>
</head>
<body > <p>这段的最小高度设置为100 px。</p>
</body>
</html>

使用像素值设置元素的最小宽度

<!DOCTYPE html>
<html>
<head>  <meta charset="utf-8">  <title>自学教程(如约智惠.com)</title>  <style>p{min-width:150px;background-color:yellow;}</style>
</head>
<body > <p>这段的最小高度设置为100 px。</p>
</body>
</html>

所有CSS 尺寸 (Dimension)属性

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

参考:

https://www.yuque.com/docs/share/728fcd95-3484-4c6c-b7d6-0387d9b643a2

CSS 尺寸(Dimension)相关推荐

教你玩转CSS 尺寸 (Dimension)
目录所有CSS 尺寸 (Dimension)属性 CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度.同样,它允许你增加行间距. 所有CSS 尺寸 (Dimension)属性
雷林鹏分享：CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度.同样,它允许你增加行间距. 所有CSS 尺寸 (Dimension)属性属性描述 height设置元素的高度. line-hei ...
【 CSS 尺寸/宽高属性 heightwidth 】
CSS 尺寸/宽高属性 height&width CSS 尺寸/宽高属性 1. height 属性: 设置元素的高度 (auto/长度值/ 百分比值) 1.1 max-height 属性 ...
CSS尺寸和字体单位-em、px还是%
在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明, 重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置 ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
CSS尺寸与文本讲解。HTML、CSS笔记（四）。
文章目录 CSS尺寸(Dimention) 行高line-height属性尺寸的其他属性 heigh.width属性 max-height.max-width属性 min-height.min-wi ...
【网页制作】CSS尺寸样式属性
CSS尺寸样式属性作用:给html元素设置高度和宽度. 注意:只有块级元素才可以设置宽度和高度. 属性名称作用单位/值 height 设置元素的高度 length:使用px表示高度 auto:自动 ...
css尺寸（大小）属性
尺寸属性:用来控制元素大小的属性,单位为长度单位. 尺寸属性的使用场景当使用相对长度单位定义尺寸时,元素的大小跟随窗口大小变化. 为保证元素的正常显示,需要设定元素的最大.最小长度. 手机端开发时需 ...
CSS尺寸单位px、em、rem、vw、vh以及%的区别
1. px px是像素单位.它是代表显示器上每一个显示的像素点,根据用户屏幕显示器的分辨率决定. 2. em em为相对单位,相对于当前元素内文本的字体尺寸.如果当前元素没有指定字体尺寸,那么以浏览器 ...

CSS 尺寸(Dimension)

所有CSS 尺寸 (Dimension)属性

CSS 尺寸(Dimension)相关推荐

最新文章

热门文章