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. centos 系统时间设置

    在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况.如果没有安装,而你使用的是 CentOS系统 那使用命令 yum insta ...

  2. centos6.9 samba配置

    https://blog.csdn.net/qq_33468857/article/details/75431813 1 使用用户名密码访问 [global] security = user [hom ...

  3. Eclipse中文插件安装教程

    先运行英文版Eclipse 点击Help选择Install New Software 直接点击Add按钮 Name输入: Babel Location输入: http://download.eclip ...

  4. Php mysql 常用代码、CURD操作以及简单查询

    C/S:Client ServerB/S:Brower Server php主要实现B/S LAMP :Linux系统    A阿帕奇服务器    Mysql数据库   Php语言 mysql常用代码 ...

  5. DeepFaceLab：视频中有多人，仅替换特定人脸的方法！

    DeepFaceLab自带的视频素材,一个是钢铁侠托尼斯塔克,一个是变形金刚男主角山姆.每一个视频中只有一个人.所以当你第一次玩的时候很顺畅,什么都不用管,一步一步按教程来就好好了. ​ 直到有一天你 ...

  6. leetcode 102二叉树的层序遍历

    5月20更新: 使用借助队列实现bfs,定义len记录队列的尺寸直接进行遍历层序 /** * Definition for a binary tree node. * struct TreeNode ...

  7. 【Python】格式化输出json

    参考文档: Python JSON JSON 函数 使用 JSON 函数需要导入 json 库:import json. 函数 描述 json.dumps  将 Python 对象编码成 JSON 字 ...

  8. Reactjs之静态路由、动态路由以及Get传值以及获取

    1.新增知识点 /* react路由的配置: 1.找到官方文档 https://reacttraining.com/react-router/web/example/basic 2.安装 cnpm i ...

  9. python学习笔记：（十一）模块

    模块是指一个包含定义的函数和变量的文件,其后缀名为.py.模块可以被别的程序引用,并使用其中的函数等功能. 1.import语句 如果需要使用模块,只需要在新模块中导入模块.使用import关键字 如 ...

  10. docker rm & docker rmi & docker prune 的差异

    docker rm & docker rmi & docker prune 的差异 docker rm : 删除一个或多个 容器 docker rmi :  删除一个或多个 镜像 do ...