css中文字能够撑开高度吗

css中文字能够撑开高度吗:
本章节介绍一个可能比较误导人的概念。
那就是当一个div没有设置高度的时候,可能很多人认为它的高度是由内部的文字撑开的,真的是这样吗,下面就通过代码实例进行一下验证,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  width:300px;
  border:1px solid red;
  line-height:0px;
}
</style>
</head>
<body>
<div>蚂蚁部落</div>
</body>
</html>

大家看到演示结果了没有,高度并没有被撑开,这里涉及到line-height的相关知识。
关于line-height可以参阅line-height属性深入介绍一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15899

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-12-15 18:59:07

css中文字能够撑开高度吗的相关文章

CSS中的浮动、高度塌陷以及清楚浮动

一.CSS浮动 浮动(float)的框可以左右移动,直至它的外边缘碰到包含框或另一个浮动框的外边缘.浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级元素的布局而只会影响内联元素(通常是文本)的排列,文档中的普通流就表现得如同浮动框不存在一样.当浮动框高度超出包含框的时候,就会出现包含框不会自动升高来闭合浮动元素("高度塌陷"现象). <!DOCTYPE html> <html> <head> <style type="t

13 css中文字排版

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body{font-size:12px;color:#666;} .stress{ color:red; } </style> </head> <body>

CSS实现文字半透明显示在图片上方法

CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在图片的底部,用来说明图片的内容,当作图片标题,标题文字和背景可以设置半透明,鼠标经过图片时边框换色. 代码预览 代码如下 复制代码 <head> <meta http-equiv="Content-Type" content="text/html; charse

CSS中的高度和宽度

1.简单的说,常规流向的块级元素,width为auto时,会尽量充满父元素的内容宽度,而height为auto时,则是由其内部的不浮动的子元素的高度决定(无浮动,绝对定位). 2.width:100%;width:auto <div>    <p>1</p></div><style type="text/css">div{ width:600px; overflow:auto;}p{ width:100%;      padd

(转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)

一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 24px;font-weight: bold; margin: 0 auto;} 6 </style> 7 <div id="big">

在div中使用css让文字底部对齐的方法

css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐,并且靠近的距离可以调节,精确到像素,在网上搜集到三段代码如下.由www.169it.com 搜集整理 代码1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.01 Transit

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS中让布局居中_背景图片居中_文字内容居中

CSS中的高度

https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight Element.clientHeight是只读属性,以像素为单位,返回的是元素内部的高度,包括padding但是不包含水平滚动条的高度,元素边框(border),及margin clientHeight 可以计算为:CSS height+ CSS padding – 水平滚动条的高度(如果存在水平滚动条) 注意:这个属性会四舍五入为整数,如果你需要含有小数的

css中的文字

CSS 字体系列 在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace") 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier") 除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列: Serif 字体 Sans-serif 字体 Monospace 字体 Cursive 字体 Fantasy 字体 字体