PHP从入门到精通,024第三章CSS之DIV+CSS标准化布局display属性(DAY5第1课)

四、DIV+CSS标准化布局 (一)、DIV+CSS布局
说明:在网页开发制作中,需要对页面内容进行“模块化标准布局”,把内容放入到某个位置,让页面形成固定规律展示出来。 模块化:在网页中所有的内容都是以块来展示的。 标准化:在开发网站时是有一定的标准的,W3C给的。 好处:为了把HTML页面和CSS代码进行分离,方便以后的维护和合作开发、有利于搜索引擎的抓取。 (二)、无意义的“div”和“span”
说明:在HTML标记中一般都是有自带“名称”,如:h1是加标题的,a是加超链接的。 只有div和span是没有意义的,所以布局就使用div和span,div一般是给大块的内容布局,span是给行内的内容布局。 块元素:不管内容多少,都会占一行,可以改变大小但是还是独占一行。 行内元素:内容多少占多少 (三)、块元素和行内元素的转换

属性名 描述 属性值
display 块元素和行内元素的转换 block(块)、inline(行内)、inline-block(行内块)
dispaly 显示和隐藏 none(隐藏)、block(显示)
a{ border:1px solid red; width:100px; /*dispaly:block; //转换成块元素*/ display:inline-block; //转换成行内块 text-align:center; } a.a4{ display:none; //显示和隐藏 display:block; }

    推荐阅读