css09浮动属性

转载

mb5ffd6fed5661e 2017-06-29 14:09:00

文章标签 css html 块元素行内元素默认值 文章分类 Html/CSS 前端开发

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style type="text/css">
    #a,#b,#c{
        height: 80px;
        width:120px;
        border: solid 1px pink;
        float: left;  /*左浮动*/
       /* float: right;  /!*右浮动*!/*/
    }
    #main{
        width: 350px;
        height: 150px;
        border: solid 1px red;
        overflow: scroll;
         /*内容溢出的默认属性值
         visible:默认值  溢出部分显示
         scroll：溢出部分滚动条显示
         hidden:溢出部分隐藏
         auto:自动调整
         */
    }
    </style>
</head>
<body>
<div id="main">
    <div id="a">这是第1个盒子</div>
    <div id="b">这是第2个盒子</div>
    <div id="c">这是第3个盒子</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display</title>
    <style type="text/css">
        span{
            /**
            display：属性
            block：块元素
            none:不显示
            inline：行内元素
            inline-block：块元素 在一行显示
            */
            display: block;/* 块元素*/
            height: 20px;
            width: 200px;
            border: 1px solid red;
        }

        div{
            height: 20px;
            width: 200px;
            border: 1px solid red;
            display: inline;/*行内元素*/
        }
    </style>
</head>
<body>
 <div>这是一个div1</div>
 <div>这是一个div2</div>
 <span>这是一个span1</span>
 <span>这是一个span2</span>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防止父级边框塌陷</title>
    <link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father" class="clear"><!--04.使用after伪类-->
    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    </div>
    <!-- 01. 空div  防止父级边框塌陷
    <div ></div>-->
</div>
</body>
</html>

div {
    margin:10px;
    padding:5px;
}
#father {
    border:1px #000 solid;
    /*02.给父级设置高度防止边框塌陷
    height: 350px;*/
    /*03.overflow防止边框塌陷
    overflow: hidden;*/
}
.layer01 {
    border:1px #F00 dashed;
    float: left;
}
.layer02 {
    border:1px #00F dashed;
    float: left;
}
.layer03 {
    border:1px #060 dashed;
    float: left;
}
.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: left;
}
/*04.after伪类防止父类边框塌陷*/
.clear:after{
    content: ''; /*在clear元素之后添加一个空内容*/
    display: block;/*把添加的内容转换成了块元素*/
    clear: both;/*清除这个元素所有的浮动*/
}

/* 01.空div标签
.clear{
    clear: both;
    margin: 0px;
    padding: 0px;
}*/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style  type="text/css">
       #main{
           width: 200px;
           height: 150px;
           border: 1px solid orange;
           /**
           visible：默认值！内容不会隐藏，但是会在盒子之外显示！
           hidden：溢出的部分会隐藏！
           scroll:显示横向和纵向的滚动条
           auto:显示纵向的滚动条
           */
           overflow:hidden ;
       }



    </style>
</head>
<body>
  <div  id="main">
      <img src="image/wine.jpg">
      <p>这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片
          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片
          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片
          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片</p>
  </div>
</body>
</html>