css 等高补偿法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.wrap{
overflow:hidden;
}
.box{
margin-bottom:-9999px;
padding-bottom:9999px;
width:200px;
float:left;
}
.box1{
background:red;
}
.box2{
background:green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box box1">1222</div>
<div class="box box2">1222221111111111111111111111111111111111111111111112<br><br><br><br><br></div>
</div>
</body>
</html>

时间： 2025-01-10 14:13:19

css 等高补偿法的相关文章

【转】css行高line-height的一些深入理解及应用

一.前言前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考.另外,将结合实际,展示line-height的一些特性和一些常见应用,帮助您对css行高line-height的理解.所讲述的并不一定都是正确的,欢迎指正欢迎交流. 二.一些字面意思“行高”顾名思意指一行文字的高度

css行高line-height的一些深入理解及应用

by zhangxinxu from http://www.zhangxinxu.com,原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.一些字面意思"行高"顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线.下图的红色线即为基线. vertical-align中有top,middle

CSS行高line-height解释

"行高"顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线.下图的红色线即为基线. vertical-align中有top,middle,baseline,bottom与之是由关联的 css中起高度作用的应该就是height以及line-height了吧! 如果一个标签没有定义height属性(包括百分比高度) 1.单行文字的垂直居中对

css 宽高自适应的div 元素如何居中垂直居中

在我们编写css 样式的时候经常会遇见一个问题那就是一个宽高未知的元素要让他垂直居中如何实现这个呢下面是我常用的两种方法上代码下面的是结构代码 <div class="wrap">//此处为父组件我们会设置父级的宽高并让其居中 <div class="center">//子组件我们要实现它的垂直居中不设置他的宽高宽高都由下面的img引入的图片撑开 <img width="100px" src

css行高line-height的用法（转）

本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离.所有浏览器都支持 line-height 属性. 一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比

CSS行高——line-height

初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知识,就此总结一下. 所谓行高是指文本行基线间的垂直距离.要想理解这句话首先得了解几个基本知识: 顶线.中线.基线.底线 <!DOCTYPE html> <html> <head> <title>Test</title> <style type=

css行高line-height的用法

一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit 说明: line-height 属性设置行间的距离(行高),不能使用负值.该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离.line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和

CSS 行高和对齐

文本垂直对齐行高 line-height属性是制定文本行基线之间的距离,而不是字体的大小,它确定了将各个元素框的高度增加或减少多少.line-height控制了行间距,这是文本行之间超出字体大小的额外空间.换句话说,line-height值和字体大小之差就是行间距. 在应用到块级元素时,line-height定义了元素中文本基线之间的最小距离.注意它定义的是最小距离,而不是一个绝对数值,文本基线拉开的距离可能比line-height值更大.line-height并不影响替换元素布局,不过确实可

css图片高清适配

同一张图片,在普通屏显示正常,但高清屏出现模糊.原因是原来一个像素的点分成的四个像素的点进行了显示. 解决方案:在高清屏中把图片变成二倍图,前提是二倍的高清图已经存在. .icon{ background: url(bg.png) no-repeat; /* 宽200px; */ } @media screen and (-webkit-min-device-pixel-ratio:1.5){ .icon{ background-image: url(bgx2.png); /* 宽400px;