zoukankan      html  css  js  c++  java
  • css盒子模型

    height 的% 号,设置高度是没用的, 没有参照物.

    height的px 是可以的

    自适应

        auto;height:auto;

    一个css里面 俩个相同的属性,后面的会冲突调前面的.

    padding是内边距

       padding-top:10px; //height以及设置100px, 则在原基础上添加10px,

     padding-bottom:10px;//

    padding-left:10px;//

    padding-right:10px/

    简写:padding:10px

         padding:10px;20px//上下10,,,左右20

       padding:10px; 20px;30px;  //上10    左右20   下30p

     padding:10Px  20px 30px  40px   上右下左

    margin 不占用内容的总宽度

    margin-top: 50px; margin-letf:50px;margin-right:50;margin-bottom:50;

     元素的可见性,超出盒子的部分

       属性:visibility   

        值:visible  默认,  hidden 元素不可见,但会占据空间  , collapse  隐藏表格的行与列不占位,如果不是表格,和hidden一样.

         

    元素盒类型

      盒模型的display属性, 可以更改本身和类型.  

        1块级元素 设置元素尺寸  隔离元素  div   p

        2行内元素,  span  可以设置背景,但不能设置尺寸,自适应,不能隔离元素

        3行内-块元素  img   可以设置大小  无法隔离其他元素

    之间相互转换

     (display:inline)    块级元素转换为行 ,   在代码区 div 和文字挨在一起,则转换成行没有空格,是连在一起的;但是彼此之间换行了,有时为了代码间的直观美化,会换行但是之间会加个注释表示连接在一起. 去掉空格.

    (  display:block  )  行转换为快  ,  span元素后换行,同其他元素之间会有空格,挨在一起则不会有空空格.(可以用<!--  -->),转换成块,原来行元素间的空格或多个空格换行会被压缩掉

    (display:inline-block; )   案例 快和行同时转换为行内块, 之间有回车,所以在转换成行内块时之间有空格(间隔),两个元素连在一起就不会有间隔.

     (display-none) 盒子不可见,也不占位. 用于隐藏,显示等等.

     浮动 float

         float :letf //这是左浮动, 使用后当前(块1)层会悬浮到上面, 下一个块(块2)的样式如背景会到该层的后面,因为是块所以底下块的文字不会悬浮上来. 块2如果悬浮,则文字也悬浮;

                      如果,块2没有浮动, 背景会上移, 也就是位置移动了, 块3也向上移动文字,会与块2的文字重合.

                      如果 块1 浮动  1和2之间有文字,文字单独站一行, 在块1的旁边,(也就是说高度塌陷,但是有宽度.),而文字底下的块则上移,因为块1没有高度了,但是靠左在文字的下面(换行了),

                     如果 块1浮动   1和2之间有文字, 块2在浮动,  则文字会在块2的旁边,也就是文字围绕图片,  文字的优先级要落后于float. 块3的背景上移到1块下,但背景上面有一行文字宽度的距离.

    clear

      clear:both;//如果想继续呆在原位置, 就添加clear:both; 或clear:left;   clear:right

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                border-left:solid 10px red;
            }
            #a{
                /*background:maroon;*/
                float:left;}
            #b{background:green;
                float:left;
                }
            #c{background:blue;}
        </style>
    </head>
    <body>
    <div id="a">我是a</div>
       1111111
    <div id="b">我是b</div>
    <div id="c">我是c</div>
    </body>
    </html>
  • 相关阅读:
    利用DTrace实时检测MySQl
    改进MySQL Order By Rand()的低效率
    RDS for MySQL查询缓存 (Query Cache) 的设置和使用
    RDS For MySQL 字符集相关说明
    RDS for MySQL 通过 mysqlbinlog 查看 binlog 乱码
    RDS for MySQL Mysqldump 常见问题和处理
    RDS for MySQL Online DDL 使用
    RDS MySQL 表上 Metadata lock 的产生和处理
    RDS for MySQL 如何使用 Percona Toolkit
    北京已成为投融资诈骗重灾区:存好骗子公司黑名单,谨防上当!
  • 原文地址:https://www.cnblogs.com/ningjie/p/9610405.html
Copyright © 2011-2022 走看看