zoukankan      html  css  js  c++  java
  • CSS简单布局总结

    display 

    block       块级元素,占据一行

    none       隐藏

    inline      允许同一行显示,但不再有宽和高

    inline-block   允许在一行的块级元素,可以有宽和高

    例如,把所有a元素设置成100×50的块级元素:

    a{
    	display: block;
    	 100px;height: 50px;
    }
    

    float 

    none   默认 不浮动

    left     向左浮动

    right   向右浮动

    例如,设置a1 a2向右浮动:

    a1{float: right;}
    a2{float: right;}
    

    *注意:浮动有先后顺序,第一个向右浮动的在最右侧,如上即是a1在a2右边

    *浮动有覆盖属性,将浮动元素统一放在一个容器内能避免覆盖其他元素

    clear

    none    默认值,允许两边有浮动元素

    left       不允许左边有浮动元素

    right     不允许右边有浮动元素

    both     不允许两边有浮动元素

    若要使一组浮动元素每隔N个就清除一次浮动,可以在这之间加入清除两边浮动的空div:

    .clear{clear: both;}
    

    position 

    static    默认,无定位

    absolute   相对于body的绝对位置,若父元素有relate属性,则以父元素为参照点

    relative     相对于元素本来位置的偏移位置

    fixed          固定定位,相对于浏览器窗口的位置,适合做置顶等按钮

    *通过top,left,right,bottom定位,表示离这个方向的距离,左右二选一,上下二选一

    *relative偏移位置后,仍然占据原位置空间

    例如,设置div位置为绝对位置,距离左边20px;距离上边30px

    a{position: absolute;left: 20px;top: 30px;}
    

      

  • 相关阅读:
    git升级
    redis集群
    redis安装
    escript
    git搭建仓库与服务器
    svnsync
    post_commit.sh
    nvm安装和使用
    quartz 定时器
    Oracle flashback恢复误删的数据或表
  • 原文地址:https://www.cnblogs.com/deoem/p/5779203.html
Copyright © 2011-2022 走看看