美文网首页PHP学习笔记
PHP从入门到精通,024第三章CSS之DIV+CSS标准化布局

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