zoukankan      html  css  js  c++  java
  • Css实战第二天小结

    1. 清除浮动的四种方式:

                 1.1    给父盒子设置一个高度;

                 1.2    Clear:both;

                 1.3    Overflow:hidden;

                 1.4    使用伪元素

                     .clearfix:before, .clearfix:after{

                       content:” ”;

                       display:table;

                        }

                     Clearfix:after{

                    Clear:both;

                        }

                    Clearfix{         /*兼容ie6*/

                         Zoom:1;

                      }

           2.对定位元素的层级理解:如果我们只给一个元素定位,而不设置它的trbl(上,右,下,左)的值,那么该元素仍然在原来的位置显示。

                    绝对定位(absolute)与相对定位(relative)都有一个层级的属性与概念。如果我们定位了,相邻的多个元素,而且它们在同一个位置的话,后面的元                 素会覆盖前面的元素。

                     同样定位的元素,默认它们的层级都是0,如果想要改变它们的层级关系的话,可以使用z-index(范围0-9999999)来实现。

                3.border-radius的使用:

                       border-radius:左上值 右上值 右下值 左下值;

                       四个值为元素的宽度的时候或为高度一半的时候,元素将变成圆形或是椭圆形;

                       注:峰值只能达到元素的宽度或者高度的一半。

                 4.font连写

                       Font的连写必须要有字体大小(font-size)和字体样式(font-family),且两者的顺序不能够颠倒。

               5.   padding和margin的使用:

                   5.1 在布局的时候,优先考虑使用padding,但是使用padding的时候,要考虑这个padding会不会影响其他地方的布局

                   5.2 其次考虑margin,但是使用margin的时候,要考虑到合并现象

            合并现象:

               两个合并现象

              垂直合并:

                  两个垂直分布的盒子,设置了相对的margin值的时候,他们之间的距离总是取决于最大的margin值  --  垂直合并   无法解决,只能避免

              包含合并:

               发生嵌套的时候,如果给子盒子设置margin-top,有可能会把父盒子带跑

            解决办法:

               (1) 给父盒子加边框

                (2)父盒子设置属性:overflow:hiddent

  • 相关阅读:
    报错:Message is larger than modules
    报错:常量字符串过长
    C#监控WinCE手机用户操作的程序,并通过usb连接发送到pc监听服务
    .Net Compact Framework coredll.dll API列表
    Oracle任意日期得到该周第一天的日期
    ORACLE查看锁表进程及杀死进程的语句
    客户端js与服务端通过BASE64进行交互
    为什么在powerdesigner成功将表生成到oracle,用sql操作提示表或视图不存在
    gprof的简单实用
    学习笔记fputs与printf
  • 原文地址:https://www.cnblogs.com/xinjianheyi/p/5701823.html
Copyright © 2011-2022 走看看