[css] line boxes

原文链接:http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/ <p>这是一行普通的文字,这里有个 <em>em</em> 标签.</p> 这段HTML代…

css 简析folat

1.float?? 不知道大家是否还记得之前我们讲过页面是文档流,具体什么是文档流,我就不说了?于是我们页面布局如果用div的话,那么块状的元素是怎么排列的,什么叫块状自己去看? 如果我们呢用div布局的话,可能会遇到一个问题? 大家见没有.如果我想把xxxxx放到和Box-1排在一起,我应该怎么搞啊?可能你会说前面我们已经说了用定位可以解决,但是今天我们讲的是用float,来实现大家来看看我们如果加上float是不是就实现了? 真可以啊?开心完全满足了我们的要求.其实我们在实际里面也经常使用f…

CSS line-height与vertical-align:baseline

一.当line-height与vertical-align相遇,会发生很多匪夷所思的现象首先,请看如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { background-color: red; line-height: normal; } </style> <…

@寒冬winter 大神的css作业问题

块级元素 ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度. ④它可以容纳内联元素和其他块元素行内级元素 ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素替换元素替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容. 比如:<input /> type="text" 的是,这是一个文本输入框,换一…

【web前端面试题整理03】来看一点CSS相关的吧

前言昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了,各位也可以作答题目一览 1.<img>标签上title属性与alt属性的区别是什么?2.分别写出以下几个HTML标签:文字加粗.下标.居中.字体3.写出一个文本输入框,属性为只读,最大输入字符为20个4.CSS左边固定,右边可变的布局实现方法:要求在源码顺序中左边必须在前.5.图片和文字一起如何…

CSS魔法堂：说说Float那个被埋没的志向

前言定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Float的特性和行为特征,若有纰漏望各位指正. 被埋没的志向--文字环绕回忆一下我们一般什么时候会想用浮动呢?是多列布局还是多列布局呢:)?其实它向往的却是这个它想干的就是这个--文字环绕,而且CSS2中除了浮动外没有其他属性可实现上述的效果. 那到底如何理解它的实现原理呢?下面我们采取分步…

CSS魔法堂：你真的懂text-align吗？

前言也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The 'text-align' CSS property describes how inline content like text and inline-level element etc. is aligned in its parent block element.Does not control…

CSS行高line-height的理解

一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基线,是a,c,z,x等字母的地边线. ————————顶线(top line)———————————————— ——————————中线(middle line)———————————— ————————————基线(base line)——————————— ———————————————底线(b…

草珊瑚的css基础

首先要了解如下概念: viewport,窗口大小,containing block,block formatting context,inline formatting context,dirction和unicode-bidi,display和float以及postion的三者关系,盒子模型. 一.viewport viewport是你所看到的窗口.它有两个重要属性,一个是css像素,另一个是设备像素. 设备像素由分辨率决定,css像素由开发者决定. 设备像素和css像素的关系有 1.重叠,即…

[css] line-height

原文:http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/ css中起高度作用的应该就是height以及line-height了吧!如果一个标签没有定义height属性(包括百分比高度),那么其最终表现的高度一定是由l…

[CSS]理解line-height

字面意思 "行高"顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线.下图的红色线即为基线. vertical-align中有top,middle,baseline,bottom与之是由关联的,但具体细节如何,浏览器差异怎样,我还不是很清楚. 但是由于中文跟英文长得不一样,所以基线的说法就像老太太穿线--对不上眼.您理解为底线之差也不为…

理解CSS中BFC

BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系属于常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-blocks , table-cells , table-captions ,和overflow 的值不为 visible 的元素,(除了这个值已经被传到了视口的时候)将创建一个新的块级格式化上下文 . 上面的引述几乎总结了一个 BFC 是怎样形成的.但是让我们以另一种方式来重新定义以便能更好的去理解.一个…

css 内联元素inline 行框全解

首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起一行框看图说话上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元素时 ,它定义了该元素中基线之间的最小距离而不是最大距离. line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部. 可以包含这些内容的最小框就是行框line box.[来源] 二框模型继续看图上图代表了CSS中…

CSS深入理解之line-height

以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什么是基线? 为何是基线? 需要两行? 如图红色线即为基线基线(baseline),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下端沿.基线乃*线定义之根本! 基线的扩展知识,稍作了解.如图: 第3个问题,一行文字难道就没有行高吗?非也,一行文字也是有行高的,两行的定义已经决定了一…

转 - CSS深入理解vertical-align和line-height的基友关系

一.想死你们了几个星期没有写文章了,好忙好痒:个把月没有写长篇了,好忙好想:半个季度没在文章中唠嗑了,好痒好想. 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦,突然想起来,我就是住在上海郊外的小乡镇上. 刚刚买了几十股京东的股票,第一次玩这个,看好京东的发展.其实股价21的时候就打算入手了,但是,转外汇的时候,提示,要工作时间.然后一忙二忘,等现在入的时候,已经涨了20%多了,科科,肥皂弄人啊!写到这里的时候,忍不住拿出手机一看,哎呦,不错哦,盈利28刀…

How to center anything with css

1. 绝对居中定位技术我经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS 优点: 缺点: 1.支持跨浏览器,包括IE8-IE10. 1.必须声明高度(查看可变高度Variable Height). 2.无需其他特殊标记,CSS代码量少 2.建议设置overflow:auto来防止内容越界溢出.(查看溢出Overflow) 3.支持百分比%属性值和min-/max-属性 3.在Windo…

2015第10周五CSS—2

经常遇到的浏览器兼容性有哪些?如何解决? 1.浏览器默认的margin和padding不同.解决方案是加一个全局的*{margin:0;padding:0;}来统一. 2.IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大.解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性.测试代码如下: <html> <head> <title>Demo</title> &…

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

一.一些字面意思. “行高”大约是指:一行文字的高度.具体来说是指两行文字间基线之间的距离.基线是在英文字母中用到的一个概念,我们刚学英语使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a.c.z.x等字母的底边线.下图的红色线即为基线. vertical-align中有top,middle,baseline,bottom与之是有关联的,但具体细节如果,浏览器差异怎样,还不是很清楚. 但是由于中文跟英文长得不一样,所以基线的说法就像老太太穿线,对不上眼.定义是一回事,表现则是另一回事…

CSS line-height概念与举例

本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/37 定义两行文字基线之间的距离. 基线的大体位置基线的位置可以看成x字母下边缘的位置. 不同字体的基线位置会有微小的差别. 文本中的几条线: 行高示意图: 一行文本的行高为:上间距 + 文本的高度+下间距,并且上间距是等于下间距的. 我们还可以基本上这样认为:行高是两行文字基线之间的距离,也是两行文字顶线之间的距离,两行文字中线之间的距离. 行内框盒子模型…

css中的行高line-height

“行高”顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线.下图的红色线即为基线. vertical-align中有top,middle,baseline,bottom与之是由关联的,但具体细节如何,浏览器差异怎样,我还不是很清楚. 但是由于中文跟英文长得不一样,所以基线的说法就像老太太穿线——对不上眼.您理解为底线之差也不为不可.只是定义一回事…

css之line-height及图片文字垂直居中

css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的高度(两行文字间基线的距离)就像英文本子里的倒数第二条线. line-height与line boxes高度 css中起着高度作用的heigh以及line-height,如果一个便签没有定义height属性,那么最终表现的高度一定是line-height起作用. 一个空的<div></di…

css中的线及vertical-align

行内元素格式化顺序: 相关概念: leading(行间距):指填充在两行文字间的铅条,等于line-height 和 font-size之差,其中一半leading加到文字上方,另一半leading加到文字下方,只用于非替换元素. em框:em框指示没有行间距时基线之间的距离,不指定字符间的边界,实际的字形可能比其em框更高或更矮. font-size :确定给定字体的em框(em box)的高度,但不能保证实际显示的字符就是这种大小.font-size属性和实际字体大小的具体对应关系由字体的…

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

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

CSS之BFC详解

What:了解该知识点的概念,本质以及有关牵扯到的相关知识概念 BFC这个东西说常见的话你可能不觉得,但是你肯定会常用,也许你在用的时候也没想到BFC这东西.网上也有很多写这些东西的文章,但是自己写一遍印象更深一点. 首先我们看看w3c对BFC是怎么定义的: http://www.w3.org/TR/CSS2/visuren.html#block-formatting Floats, absolutely positioned elements, block containers (such a…

CSS视觉格式化模型

CSS视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.这是CSS 2.1的一个基础概念.视觉格式化模型根据CSS盒模型为文档的每个元素生成0,1或多个盒.每个盒的布局由如下内容组成: 盒尺寸:明确指定,受限或没有指定盒类型:块级盒(block-level box),行内级别盒(inline-level box),行内盒(inline-box),原子行内级别盒(atomic inline-level box) 定位方案(position…

CSS定位与布局：普通流

CSS定位与布局属于CSS的基础,也是CSS布局影响很大的一部分,具体主要包括三种定位与布局机制( Positioning schemes):普通流,浮动,绝对定位. 其实除了这三种之外,还有一些定位机制,但是这三种可以说在网站的应用是最多的,随便打开一个网站搜索一下这些属性,少则出现几十次,多则上百,官方文档也有对这三个属性的辨析<Comparison of normal flow, floats, and absolute positioning>,这篇博文很多内容是受葵中剑@剑空前辈…

理解CSS中的BFC(块级可视化上下文)[译]

开篇一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素.它们将会建立一个新的块级格式化上下文. 上述定义已经非常具体的描写叙述了块级格式化上下文(Block Formatting Context)是怎样形成的,为了方便起见.文中均用BFC取代. 如今,让我们用一种简单的方式对其进行又一次定义: BFC也是HTML中的一个盒子(看不见而已),仅仅有满足…

css中高度比img多出4px的问题

一句话概括:为什么<a>标签比里面的img高度多出4px 的问题,主要还是由于 img是inline element, it's height is caculated differently as related to the default line-height value. On inline elements, the line-height css property specifies the height that is used in the calculation of th…

CSS行高line-height的学习

一.定义和用法 line-height 属性设置行间的距离(行高). 可能的值 normal默认.设置合理的行间距. number设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length设置固定的行间距. %基于当前字体尺寸的百分比行间距. inherit规定应该从父元素继承 line-height 属性的值. 注释:不允许使用负值. 浏览器支持所有浏览器都支持 line-height 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "…

真正的能理解CSS中的line-height，height与line-height

https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较height与line-height的区别. 基本概念行高与行距从字面的意思是非常容易理解的,但是对布局和样式来说,我们应该更深入的理解各个属性之间的关系,比如line-height与font…

【[css] line boxes】的更多相关文章