1. 程式人生 > >第七天-css基礎(行高,盒子模型,邊距)

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

昨天 固定 整理 .com add 多行 png 居中 lin

摘要: 基礎知識-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基礎(行高,盒子模型,邊距)