CSS 盒模型详和盒子的浮动与定位和行级,快级元素

第一节:盒模型基本概念

 

 

盒模型:
相框边框 - > border
画和相框边框的距离 -> padding
相框之间的距离 -> marg

 

 

border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式

 

用 padding 设置内边距
 

用 margin 设置外边距
 

第二节:网页布局与盒模型

第三节:盒子在标准流中的定位

 

 

 

  盒子的浮动与定位

        

 

 

盒子浮动float

<style type="text/css">
    .parent{
        padding:5px;
        background-color: yellow;
        border: 1px solid red;
    }
    
    .d1{
       
        margin:5px;
        background-color: gray;
        border: 1px solid gray;
    }
    
    .d2{
    
        margin:5px;
        background-color: blue;
        border: 1px solid blue;
    }
    
    p{
        margin:5px;
        background-color: green;
        border: 1px solid green;
    }
</style>
 

 

<div class="parent">
    <div class="d1">盒子A</div>
    <div class="d2">盒子B</div>
    <p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台(即JavaSE, JavaEE, JavaME)的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性,广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网,同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下,Java更具备了显著优势和广阔前景。</p>
</div>

 

默认   float:none  d1和d2float没设置或者设置为none

 .d1{
        float:none;
        margin:5px;
        background-color: gray;
        border: 1px solid gray;
    }
    
    .d2{
        float:none;
        margin:5px;
        background-color: blue;
        border: 1px solid blue;
    }

效果图如下

 

 .d1{
        float:left;
        margin:5px;
        background-color: gray;
        border: 1px solid gray;
    }
    
    .d2{
        float:none;
        margin:5px;
        background-color: blue;
        border: 1px solid blue;
    }

 

效果图:

 

 .d1{
        float:left;
        margin:5px;
        background-color: gray;
        border: 1px solid gray;
    }
    
    .d2{
        float:right;
        margin:5px;
        background-color: blue;
        border: 1px solid blue;
    }

 

使用clear清除浮动

clear:none 默认,左右浮动都不会清除

clear:left   清除左边浮动

clear:right  清除右边浮动

clear:both  左右浮动都清除

 

p{
        clear:left;
        margin:5px;
        background-color: green;
        border: 1px solid green;
    }

    .d2{
        float:right;
        margin:5px;
        height:50px;
        background-color: blue;
        border: 1px solid blue;
    }

改下高度,效果明显一些


效果图:

改为

    p{
        clear:right;
        margin:5px;
        background-color: green;
        border: 1px solid green;
    }

改下d1的高度

.d1{

        float:left;
        margin:5px;
        height:100px;
        background-color: gray;
        border: 1px solid gray;
    }

 

效果图

 

   p{
        clear:both;
        margin:5px;
        background-color: green;
        border: 1px solid green;
    }

效果图:

 

第三节:盒子定位position

<style type="text/css">
    .parent{
        padding:15px;
        background-color: green;
        border: 1px solid red;
    }
    
    .son{
        position:static;//按照标准流定位
        padding:10px;
        background-color: blue;
        border: 1px solid gray;
    }
    
</style>

 

<div class="parent">
    <div class="son">儿子</div>
</div>

效果图:

 

 

.son{
        position:relative;//相对定位    (相对于原来的标准位置偏移一定距离)
        left:30px; //son这个div的相对于前面那个标准流的位置像右移动30px
        top:30px;    //son这个div的相对于前面那个标准流的位置像下移动30px
        padding:10px;    
        background-color: blue;
        border: 1px solid gray;
    }

效果图:

.parent{
        position:relative;  //包含框中定位一定要是relative
        padding:15px;
        background-color: green;
        border: 1px solid red;
    }

.son{
        position:absolute;//绝对定位
        left:0px;    //以它的包含框进行偏移
        top:0px;
        padding:10px;
        background-color: blue;
        border: 1px solid gray;
    }

注意:绝对定位是以它的包含框进行偏移,包含框中定位一定要是relative,不是的话继续向上找

 

 

.parent{
        position:relative;
        padding:15px;
        background-color: green;
        border: 1px solid red;
    }
    
    .son{
        position:fixed;  //固定定位,以浏览器窗口为基准进行偏移,与包含框没任何关系
        left:0px;
        top:0px;
        padding:10px;
        background-color: blue;
        border: 1px solid gray;
    }

 

 

实例: 把苹果这个图片至于文字下面

<style type="text/css">
    img{
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: -1;
    }
    
</style>

 

<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<img src="../apple.jpg"/>

 

 

行内元素

<div>d1</div>
<div>d2</div>
<div>d3</div>
<span>s1</span>
<span>s2</span>
<span>s3</span>

效果图:

 

 

<div  style="display: inline;">d1</div>
<div  style="display: inline;">d2</div>
<div  style="display: inline;">d3</div>
<span style="display: block;">s1</span>
<span style="display: block;">s2</span>
<span style="display: block;">s3</span>

效果图:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值