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

原创 2015年11月18日 23:06:34

今天把昨天落下的《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天的课程吧,今天先到这,老规矩学习进度图结束一天。


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



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

南大软院大神养成计划第三天

今天学习的是html和CSS的基础课程,习题做起来很顺手。对于各种属性、代码的掌握程度在练习中会越来越熟练,不得不说再学习一遍的感觉太好了。当然,对于开发网页来说,之后的路还很长。毕竟网页的开发需要将...
  • jx370
  • jx370
  • 2015年11月18日 12:44
  • 232

南大软院大神养成计划——第三天

今天是11月18号,离南大软院大神养成计划实施已经过去了三天,在这三天里,我仍然在复习基础教程。今天我学习的课程是“如何用CSS进行网页布局”和“网页布局基础”。两个课程都是讲解CSS的基础部分,内容...

南大软院大神养成计划--HTML和CSS基础课程(二)

今天主要学习了关于CSS样式的一些基本知识。CSS全称为“层叠样式表(Cascading Style Sheets)“,它主要用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。使...

南大软院大神养成计划——最后一天

今天是南大软院大神养成计划最后的一天,回眸过去的二十天,觉得时间确实过的非常,仿佛刚刚加入这个计划还在昨天,今天就不介绍知识重点了,主要讲讲学习体会和收获。 在加入这个计划之前,我就决定要坚持每天写...

南大软院大神养成计划--第一天学习HTML+CSS的基础归纳

其实前天晚上注册开始学的,大一网页算辅修课,玩了几下只,现在忘得差不多了,现在有机会把它捡起来了,哈哈!! 从头慢慢看过来,与去年相比,发现老师讲还不如在这个网站自学。老师开课直接跳过基础,发个PP...

南大软院大神养成计划--第二天学习CSS的基础归纳

总算学完了基础,虽然以前学过,但还是认真看完了每一章,加深了各个基本元素的认知程度。 以前做网页作业总喜欢建立一个div标签在css里设置div{display:block; position:abs...

【南大软院大神养成计划:第十天】久违了,JavaScript——入门篇(二)

今天把《JS入门篇》课程完成了,今早取快递路上思考人生时,粗略算了算,前端工程师课程总共700+节,21天学完需要每天完成37节,这样算当然不是很科学,但是也一定程度上体现了学习任务的并不轻松。  ...

【南大软院大神养成计划:第七天】DW开发环境初探(二)

不行了,从今天开始要重新装上24PI来监视自己手机的使用频率,时间就是在一次次的张大妈推送中被扼杀的.... 今天被彪彪学长表扬了,很开心,对我就是那种别人一句鼓励能让我像打了鸡血且持久有效的人(缺...

南大软院大神养成计划 第一天

和很多人不一样,我在此之前是并没有过接触过任何web设计的编程语言的。可能就是因为这样,当今天看见imooc上的代码时,会有点不太适应。是的,我没想到过,居然可以在浏览器里写程序,这确是打破了我之前的...

南大软院大神养成计划——第九天

今天是南大软院大神养成计划实施的第九天,今天学习的主要内容是DOM探索之基础详解篇的剩余两章内容,最后两章内容主要讲解的是“如何判断节点元素类型”和“继承层次和嵌套规则”。 先讲讲“如何判断节点元素...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【南大软院大神养成计划:第三天】与CSS度过的充实的一天(二)
举报原因:
原因补充:

(最多只允许输入30个字)