码迷,mamicode.com
首页 > Web开发 > 详细

第七天-css基础(行高,盒子模型,边距)

时间:2017-05-12 20:31:50      阅读:338      评论:0      收藏:0      [点我收藏+]

标签:bsp   练习   学习   不难   元素   inner   距离   ott   add   

摘要: 基础知识-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基础(行高,盒子模型,边距)

标签:bsp   练习   学习   不难   元素   inner   距离   ott   add   

原文地址:http://www.cnblogs.com/wdz1/p/6846793.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!