关闭

【南大软院大神养成计划:第三天】与CSS度过的充实的一天(二)

495人阅读 评论(0) 收藏 举报

今天把昨天落下的《HTML+CSS基础课程》的第15章补完了,下面贴出学习笔记:


========================================学习笔记(三)=========================================

当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
这种水平居中的方法两个2个条件缺一不可

【不定宽度的块状元素居中的三种方法】

(1).加入 table 标签:
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

(2).设置 display;inline 方法
改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果
(这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。)

(3).设置 position:relative 和 left:50%;
通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。
(这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。)

(注意:text-align是元素里的内容居中,margin:0 auto是元素居中)


【垂直居中-父元素高度确定的单行文本】
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。


【垂直居中-父元素高度确定的多行文本】

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:

css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。

方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
css代码:
table td{height:500px;background:#ccc}
(因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了)

方法二:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但 IE6、7 并不支持这个样式。

========================================学习笔记(三)=========================================


一个星期从周三开始便忙了起来,每天几乎都满课,自然少不了作业,高数数电大英一个不能落下,还有新生杯篮球赛,也是尽量能抽出时间就抽出时间来坚持完成21天的课程吧,今天先到这,老规矩学习进度图结束一天。


(和昨天相比没什么变化,心里有点塞)



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5575次
    • 积分:232
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    最新评论