首页 > 代码库 > 第七天-css基础（行高，盒子模型，边距）
第七天-css基础（行高，盒子模型，边距）
摘要: 基础知识-css第七天，昨天因为同学的婚礼，所以没有整理，今天继续，今天是css基础的最后一天，知识点不多也不难，主要是后期多练习，巩固前面学习的知识。还有2个案例的时候视频，下周学习。下周也要开启js基础的模式，敬请期待吧……
line-height 行高
行高是基线与基线的距离(浏览器默认字体16px)
行高=文字高度+上下边距
单行文字垂直居中
设置容器高度和line-height值相等
多行文字垂直居中
1、高度固定容器：自己设置上下padding值相等就ok了
2、高度未知容器：借助line-height
<style type="text/css"> .out{line-height:100px; font-size:0; width:400px; background:#ccc;border:1px botted #333;} .inner_01{font-size:12px; line-heigth:24px; display:inline-block; vartical-align:middle;} </style> <div class="out"> <span class="inner_01">这下我们就明白了，这个高度是怎么来的了，max(行内框的高度)->行框的高度->inline box 高度->影响父元素的高度</span> </div> //多行文字居中span在这的用法很重要
文字单位
总结：单位除了像素以外，行高都是与文字大小乘积
a{ font-size:20px; line-height:2em}//行高就是40，字大小20*行高2=40
总结：不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
padding内边距
可取的值
% 基于父元素的宽度的内边距的长度
auto 浏览器计算内边距
inherit 规定应该从父元素继承内边距
margin外边距
可取的值
% 基于父元素的宽度的内边距的长度
auto 浏览器计算内边距
inherit 规定应该从父元素继承内边距
第七天-css基础（行高，盒子模型，边距）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。