美文网首页走在路上
网页布局学习笔记

网页布局学习笔记

作者: 还能更欢乐吗 | 来源:发表于2015-11-28 16:32 被阅读58次

    1-自动居中:

    -----给父元素设置宽度(百分比或者固定宽度都行),设置父元素margin属性的左右值为自动,既是:{width:80%; margin:0 auto;}。

    2-清除浮动影响的其中两种方法:

    -----1-给父元素设置overflow:hidden;

    -----2-给受影响的元素设置clear属性,值可以是both,left,right。

    3-定位分为3种:

    -----1-static静态定位,就是默认的状态;

    -----2-relative相对定位,没有脱离文档流;

    -----3-absolute绝对定位,脱离了文档流,如果没有已经定位的祖先元素,就参照根元素html进行绝对定位,如果有已经定位的祖先元素,就参照最近的并且已定位的祖先元素进行绝对定位;

    -----4-fixed固定定位,脱离了文档流,参照浏览器的可视窗口进行绝对定位;

    -----其中fixed也是属于绝对定位的,所以定位分为3种:静态,相对,绝对。

    4-用绝对定位进行一横两列的布局案例:

    -----1-给包裹层mainbody设置相对定位relative属性,作为需要设置绝对定位的子元素的参照层;

    -----2-给第二列no2层设置绝对定位absolute属性,并设置top属性为0,使它与包裹层顶部齐平,再设置left或者margin-left属性,使它与兄弟元素no1分成两列并有一定的间隔。

    相关文章

      网友评论

        本文标题:网页布局学习笔记

        本文链接:https://www.haomeiwen.com/subject/fondhttx.html