【南大软院大神养成计划:第三天】与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天的课程吧,今天先到这,老规矩学习进度图结束一天。


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



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

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

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

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

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

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

学习心得    今天又学到了一部分新的知识,其中,智能提示功能是我学的新知识的一部分,比如HTML标签,CSS标签,在CSS标签中,打div,在点空格之后,就会有智能提示出来,属性列表就会出来,就如...
  • z15179324968
  • z15179324968
  • 2015年11月18日 23:48
  • 129

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

一开始是打算花两天时间学完《HTML+CSS基础课程》的,结果时间线被知乎和张大妈污染了一部分,导致没有按时完成任务(共15章,还剩最后一章),厕所面壁10分钟。。。。 今天开始学CSS,内容很多...
  • Sonshines
  • Sonshines
  • 2015年11月18日 00:29
  • 366

【南大软院大神养成计划:第一天】种下21天,收获不一样的自己——前端养成启程!

在第一天的学习小节前,想先说一说自己的经历,所谓回顾历史,面向未来....     高考完,知道自己被南大软院录取时,心里被两股情绪塞满,那股红色的是欣喜,欣喜从初中就铸下学IT的理想的我终于可以做...
  • Sonshines
  • Sonshines
  • 2015年11月16日 20:52
  • 723

大神养成计划第二天 --南大软院大神养成计划

今天是大神养成计划第二天,看了慕课网的div+css页面布局,明白了一个网页都是有一个个的盒模型布局构成。所以我们做一个网页前,必须先对页面进行布局。我们可以把一个网页大致分为头部header,中间部...
  • u013175229
  • u013175229
  • 2015年11月17日 21:33
  • 588

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

今天一直在做练习,妄想把毕生所学全都纠集在一个页面上,可想而知,我失败了啊啊啊,不知道是哪里出错了,好伤心。                      这告诉我,网页设计不是把所有东西拼在一起没那么...
  • jx370
  • jx370
  • 2015年11月22日 23:20
  • 161

南大软院大神养成计划--php

今天学了一些php和sql相关的部分,虽然时间挺长,但是真正印象深刻的只有第一步mysql_connect,第二步mysql_select_db,第三步mysql_query然后建立连接,可以在网页上...
  • hiiiji
  • hiiiji
  • 2015年11月17日 23:30
  • 117

南大软院大神养成计划第十四天

 今天继续对象的返回方法,简单写了个代码,包含了Math和Array中个元素的使用,代码如下: Matn和Array    var myarr1= new Array...
  • jx370
  • jx370
  • 2015年11月29日 13:06
  • 226

南大软院大神养成计划--day13

我要做的是一个点击商品的购物栏,实现点击商品可以获得商品的详情信息,并且可以保存浏览记录。这里面用的是Model1:JSP+Javabean来实现。 首先,这里面有三个类,DBHelper,实体类和业...
  • TimeSea
  • TimeSea
  • 2015年11月28日 09:19
  • 199
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【南大软院大神养成计划:第三天】与CSS度过的充实的一天(二)
举报原因:
原因补充:

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