CSS 尺寸 (Dimension)

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

更多实例

这个例子演示了如何设置不同元素的高度。

<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>

这个例子演示了如何使用百分比值设置元素的高度。

<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>

本例演示如何使用像素值来设置元素的宽度。

<style>

img {width:200px;}

</style>

</head>

<body>

<img src="logocss.gif" width="95" height="84" />

</body>

此示例演示如何设置元素的最大高度。

<style type="text/css">

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>

此示例演示如何设置元素的最小高度。

<style>

p

{

    min-height:100px;

    background-color:yellow;

}

</style>

</head>

<body>

<p>这段的最小高度设置为100 px。</p>

</body>

这个例子演示了如何使用像素值设置元素的最小宽度。

<style>

p

{

    min-width:150px;

    background-color:yellow;

}

</style>

</head>

<body>

<p>这个段落的最小宽度设置为 150px。</p>

</body>

所有CSS 尺寸 (Dimension)属性

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

初探css-18 尺寸的更多相关文章

  1. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  2. HTML+CSS基础 css的尺寸

    css的尺寸 width 宽   height高 Line-light   行高    行高是由三部分构成,上间距.文本高度.下间距. 且上下间距相等.所以文字居中 行高.一旦设置行高了,元素内部必须 ...

  3. css的尺寸、display的属性、以及浮动和清除浮动的方法

    css的尺寸width heightline-height 行高是由三部分构成,上间距 文本高度 下间距,且上下间距相等.所以文字居中.行高:一旦设置了行高,元素内部必须有内容.line-height ...

  4. 初探CSS - 5 创建

    CSS 创建 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档. 如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Interna ...

  5. 初探CSS

    css基本框架 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. 初探css -11 Table表格

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Bergl ...

  7. 初探CSS -3 语法

    CSS 语法 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. 关于对CSS尺寸单位'em'的长期误解

    一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-he ...

  9. 对CSS尺寸单位'em'的长期误解

    一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-he ...

  10. Atitit.html css  浏览器原理理论概论导论attilax总结

    Atitit.html css  浏览器原理理论概论导论attilax总结 1.1. 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)1 2. 5.1.1 DOM标准 1011 3. <We ...

随机推荐

  1. Java第09次实验（流与文件）

    第一次实验 0. 字节流与二进制文件 1.使用DataOutputStream与FileOutputStream将Student对象写入二进制文件student.data 二进制文件与文本文件的区别 ...

  2. Vagrant基本命令详解

    正在学习Docker Swarm,接触到了Vagrant.Vagrant是一个创建虚拟机的技术,可以把它认为是一个Vmware,它让我们可以通过代码的方式快速地.可重复地创建针对不同虚拟环境的虚拟机, ...

  3. 基于对象的orm跨表查询再练习

    model.py from django.db import models # Create your models here. class Book(models.Model): nid = mod ...

  4. 编辑器UEditor入门学习

    优点:非常使用的富文本编辑器,对比于之前使用的summernote,比前者多出了更多的字体图标 废话少说,直接步骤: 1.导入资源(全部放在单独的文件下即可,下图为“UEditor”文件夹) 2.引用 ...

  5. VSCode添加 console.log 快捷键

    file - preferences - keyboard shortcuts - keybindings.json:   添加:   {   "key": "ctrl+ ...

  6. CTF—WEB—sql注入之宽字节注入

     宽字节注入 宽字节注入是利用mysql的一个特性,mysql在使用GBK编码(GBK就是常说的宽字节之一,实际上只有两字节)的时候,会认为两个字符是一个汉字(前一个ascii码要大于128,才到汉字 ...

  7. LeetCode.1029-两城调度(Two City Scheduling)

    这是小川的第383次更新,第412篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第245题(顺位题号是1029).公司计划采访的人数为2N.将第i个人飞往城市A的费用是[ ...

  8. shell脚本4

    1.从FTP服务器下载文件 #!/bin/bash if [ $# -ne 1 ]; then echo "Usage: $0 filename" fi dir=$(dirname ...

  9. 【机器学习入门笔记】第 2 课：SVM

    Support Vector machines 为什么人们称一种算法为机器,我也不知道(俄罗斯人发明) 粗略的来说,支持向量机所做的就是去寻找分割线(separating) 或者通常称之为超平面,介于 ...

  10. python每日一练：0002题

    第 0002 题:将 0001 题生成的 200 个激活码(或者优惠券)保存到 MySQL 关系型数据库中. 示例代码: import os import string import random i ...