-
1、内容区域（content area），是一种围绕文字看不见的盒子。内容区域（content area）的大小与font-size大小相关 2、内联盒子（inline boxes），内联盒子不会让内容成块显示，而是排成一行。如果外部含inline水平的标签（span，a，em等），则属于内联盒子。如果是个光秃秃的文字，则属于匿名内联盒子。 3、行内盒子（line boxes），每一行就是一个行框盒子，每个行框盒子又是由一个一个内联盒子（inline boxes）组成。 4、<p>标签所在的包含盒子（containing box），此盒子由一行一行的行框盒子（line boxes）组成。查看全部
-
line-height:行高 基线：规范字母、文字高度底线的一条线。 垂直居中查看全部
-
多行文本的水平垂直居中： text-align：center和vertical-aligh：middle这个和图片的是一样的，剩下的就是把整段文字加标签变为图片格式（图片默认inline-block元素），接下来把文字继承的不需要的属性去掉：line-height：noraml（不然继承了250px，三行那太高了）；text-align：left；max-width:100%。 适用于IE8+查看全部
-
图片近似垂直居中，（图片默认是inline-block）“vertical-align:middle”实际是基线往上1/2X高度； 适合IE8+查看全部
-
小图片和大文字基本受行高控制（蚍蜉撼不动大树）查看全部
-
消除图片底部间隙的三种方法： 1.图片块状化display:block.vertical-align作用于inline或者inline-block水平元素，block化后没法基线对齐； 2.vertical-align：bottom.使得底线对齐，因为默认基线对齐，修改后则无空; 3.line-height：0.行高足够小，基线上移查看全部
-
行高不会影响图片实际占据的高度查看全部
-
20px/font-size=1.42857≈1.4286这样的话body大环境默认行高20px 缩写也ok查看全部
-
①子元素另外计算1.5*60=90,两行内联框的像素是180px ②父级环境字体24px,24px*150%=36px 子元素直接继承父级的36px，行高只有36px,行间距不够为负值所以重叠 所以，推荐使用数值，不太使用%/em查看全部
-
line-height支持的属性值 ① normal 与浏览器相关，在同一浏览器中也和元素字体相关（font-family），所以考虑到兼容性，会设置默认值 ② <number> 根据当前的font-size计算 ③ <length> em,px,rem,pt ④ <percent> 根据font-size计算 ⑤ inherit--行高继承（input默认的行高是normal） 1.5/1.5em(150%)的区别： --1.5是根据自己的font-size计算line-height --1.5em是根据父级元素font-size计算，相当于继承了父元素的line-height -------------- 经验： --阅读 1.5 --网页开发 匹配20像素（20/font-size）计算结果取大不取小查看全部
-
多行文本高度=单行文本高度累加查看全部
-
内容区域高度只与字号以及字体有关，与line-height无关查看全部
-
content area+vertical spacing=line-height查看全部
-
内联元素的高度是由行高决定的即line-height查看全部
-
4包含3,3包含2查看全部
举报
0/150
提交
取消