PHP从入门到精通,024第三章CSS之DIV+CSS标准化布局
作者:
极客研习社 | 来源:发表于
2018-11-22 06:23 被阅读3次
四、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(显示) |
<style type="css/text">
a{
border:1px solid red;
width:100px;
/*dispaly:block; //转换成块元素*/
display:inline-block; //转换成行内块
text-align:center;
}
a.a4{
display:none; //显示和隐藏
display:block;
}
</style>
本文标题:PHP从入门到精通,024第三章CSS之DIV+CSS标准化布局
本文链接:https://www.haomeiwen.com/subject/juzzfqtx.html
网友评论