• CSS定位走一波(定位学习续)


        又是新的一周过去了,时间到了,春天绿了,关于HTML5的学习进步了,今天博客更新一些CSS定位的内容,小的一些细节也要牢记,方便做一个更完美的项目。

    如何让垂直方向居中,解决方式:在父元素添加overflow:hidden
                                 为父盒子添加border
                                 为父盒子添加border
                                 上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可

    CSSbox-sizing
         content-box:采用标准模式解析计算,也是默认模式
         border-box:将采用怪异模式解析计算

    采用相对定位的元素,会相对于它原来的位置进行定位并且,元素原始占用的空间不会被其他元素占用
    采用绝对定位的元素,会寻找离它最近的采用了定位的父元素,并以它为坐标进行定位。如果所有的父元素都没有使用定位,则以body为坐标进行定位。并且,元素占用的空间会被其他元素占用

    CSS中的文档机制
            普通文档流
            浮动
            定位
            除非专门指定,否则所有框都在普通流中定位。
            块级框从上到下一个接一个地排列。
    CSS 定位属性position
            static
            relative
            absolute
            fixed
    CSS其他定位属性
            top
            right
            bottom
            left
            z-index
    CSS相对定位position取值为relative
        CSS相对定位是元素与元素原来的位置
        CSS相对定位元素仍占据原来的空间
    CSS绝对定位position取值为absolute
        CSS绝对定位的元素是相对最近的已经定位的祖先元素,如果没有定位的祖先元素,那么相对于初始包含块(body)

    CSS固定定位position取值为fixed
    CSS负边距是布局中常用的技巧,合理的运用会有意想不到的效果

    垂直居中=绝对定位+负边距
    负边距会增加元素的宽度,该元素会省略宽度

     

    并集选择器#left,#center,#right

    水平排放的盒子,水平间距是margin的累加

    垂直排放的值,垂直间距是合并的(取最大值)

  • 相关阅读:
    HDU 1116 Play on Words(并查集和欧拉回路)(有向图的欧拉回路)
    PHP 错误与异常 笔记与总结(8)自定义错误处理函数 set_error_handler()
    【VR】Leap Motion 官网文档 FingerModel (手指模型)
    2014年辛星解读Javascript之DOM之事件及其绑定
    java.util.logging.Logger使用具体解释
    技术走向管理一些思考(8)-适合的人才
    rac_grid自检提示缺少cvuqdisk包
    C++第15周(春)项目3
    交换a、b的值temp = a; a = b; b = temp;比a = a^b;b = a^b;a = a^b;快
    BZOJ 1089 SCOI2003 严格n元树 动态规划+高精度
  • 原文地址:https://www.cnblogs.com/aixing/p/13327816.html
Copyright © 2020-2023  润新知