盒子嵌套盒子行高问题

行高=两个文字基线的距离

行高

1.浏览器默认文字大小：

浏览器默认文字大小 16px
默认行高： 18px（inline-height）

2.行高

行高=文字大小+上间距+下间距

3.行高的作用：

当行高值为父容器的高度时，可以让父容器中的文字垂直显示

div{height:100px;width: 300px;background-color:pink;font-size:20px;line-height:100px;
}

4.行高单位问题:

单独给一个元素设置行高

总结：

当给一个独立的元素设置行高值的时候，除了以px为单位的行高值与文字大小无关，其他都与文字大小有关（与文字大小的积）

5.盒子嵌套，给父元素设置行高值，子元素的行高问题：

行高可以实现继承

总结：

当父元素设置的行高值(除不带单位情况下)，都是先与父元素的文字大小相乘最后的结果，被子元素继承。

盒子嵌套盒子行高问题相关推荐

margin塌陷现象div盒子嵌套盒子外边距合并现象
问题描述:原型大概是"一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background="red&qu ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
div css文字字体行高行距深入理解css行间距设置
div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性. 要使得每行的 ...
CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型: 边框(border) 表格的细线边框边框会影响盒子的实际大小内边距(paddin ...
html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
css行高和盒子高区别
行高什么是行高在css中所有的行都有自己的行高. .box1 {border: 1px solid black;width: 200px; } <div class="box1&q ...
CSS行高等于盒子的高度，能让文字在盒子里面垂直居中的原理
CSS行高等于盒子的高度,能让文字在盒子里面垂直居中的原理:用pink老师的一张ppt就成让人一下子明白过来.
html盒子嵌套居中,css在盒子中垂直居中和固定居中
顶部固定居中我是固定的 .w960{ width: 960px; margin:0 auto; } .fixed{ position: absolute; top:0; left: 0; right ...
2.HTML、CSS初识盒子模型详解行高理解
什么是语言? 1. 语言是一个沟通工具: 2. 人与人之间的沟通交流我们会用到语言,比如: 汉语.英语-- : 3. 作为前端工程师,要与浏览器沟通交流,就要用到浏览器所能识别的语言. 浏览器 3大语 ...

盒子嵌套盒子行高问题

行高

盒子嵌套盒子行高问题相关推荐

最新文章

热门文章