css的盒子模型与布局漂浮

 

css与html的结合方式:
　　常用方式 : <link rel="stylesheet" type="text/css" href="css文件路径"/>

 

在进行布局前需要把数据封装到div区域内

  • 边框
    • border : px solid red;
    • border : 统一设置
    • border-top
    • border-bottom
    • border-left
    • border-right
  • 内边距
    • padding : 20px
    • 使用padding同一设置
    • 或分别设置四周的内边距
  • 外边距
    • margin : px ;
    • 可以统一设置
    • 或分别设置四周的外边距

css的布局漂浮

  • float : 
    • none : 默认值, 对象不漂浮
    • left : 文本流向对象的右边
    • right : 文本流向对象的左边

css的布局定位

  • position:
    • static : 默认值, 对象遵循HTML设置
    • abslute : 将对象从文本流中拖出, 使用left, right, top, bottom等属性相对于其进行绝对定位
    • relative : 对象不可层叠, 但将依据left, right, top, bottom等属性在正常文档流中偏移位置

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.d11{
            width: 100px;
            height: 100px;
            border : 10px solid blue;
            padding: 10px;
            margin: 10px;
            background: fuchsia;
            position: absolute;
            top: 75px;
            left: 75px;
        }

        div.d22{
            width: 100px;
            height: 100px;
            border : 10px solid orange;
            padding: 10px;
            margin: 10px;
        }

        div.d33{
            width: 100px;
            height: 100px;
            border : 10px solid deepskyblue;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="d11"></div>
<div class="d22"></div>
<div class="d33"></div>
</body>

 

 

 

　　　　　　　　

 
 
 

 

posted @ 2018-12-19 19:32  让我读个条  阅读(8)  评论(0)    收藏  举报