转载请注明出处：http://blog.csdn.net/iwanghang/article/details/76618473

觉得博文有用，请点赞，请评论，请关注，谢谢！~

盒子模型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        /*盒子模型*/
        body{border: 1px solid black;}
        div{border: 1px solid red;margin: 20px;padding: 20px;}
        div{border: 1px solid red;margin: 0px 0px 20px 20px;padding: 20px;}
    </style>
</head>
<body>
    <div>
        我是盒子
    </div>
</body>
</html>

内联元素与块级元素 ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>内联元素与块级元素</title>
    <style type="text/css">
        /*内联元素与块级元素*/
        *{border: 1px solid red;}
        div{border: 1px solid black;}
    </style>
</head>
<body>
    <a href="#">百度一下</a>
    <i>1</i>
    <u>23</u>
    <b>456</b>
    <div>div</div>
</body>
</html>

内联元素与块级元素 ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>内联元素与块级元素</title>
    <style type="text/css">
        /*内联元素与块级元素*/
        /*块级元素独占一行，可以设置宽高、内外边距等，比如div。内联元素不能设置宽高、内外边距等，比如span。*/
        /*.box01{border: 1px solid red;width: 300px;height: 300px;padding:30px;margin: 30px;}*/
        body{border:1px solid red; }
    </style>
</head>
<body>
    <div class="box01">
        我是第一个盒子
    </div>
    <span>第一个span</span>
    <span style="width:200px;height:200px;margin-left:100px;padding-bottom:100px;margin-top:100px;">第二个span</span>
    <span>第三个span</span>
</body>
</html>

相对定位与绝对定位 ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>相对定位与绝对定位</title>
    <style type="text/css">
        /*相对定位与绝对定位*/
        .div01{border: 1px solid red;width: 200px;height: 100px;}
        .div02{
            border: 1px solid blue;
            width: 200px;
            height: 100px;
            background: yellow;
            position: relative;    /*相对定位*/
            top: 30px;
            left: 50px;
        }
        .div03{border: 1px solid green;width: 200px;height: 100px;}
    </style>
</head>
<body>
    <div class="div01">第一个div</div>
    <div class="div02">第二个div</div>
    <div class="div03">第三个div</div>
</body>
</html>

相对定位与绝对定位 ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>相对定位与绝对定位</title>
    <style type="text/css">
        /*相对定位与绝对定位*/
        body{border: 2px solid black;}
        .div01{border: 1px solid red;width: 200px;height: 100px;}
        .div02{
            border: 1px solid blue;
            width: 200px;
            height: 100px;
            background: yellow;
            position: absolute;    /*绝对定位*/
            top: 30px;
            left: 50px;
        }
        .div03{border: 1px solid green;width: 200px;height: 100px;}
        /*.box{margin-left: 200px;border: 2px solid pink;position: relative;}*/
        .box{margin-left: 200px;border: 2px solid pink;}
    </style>
</head>
<body>
    <div class="box">
        <div class="div01">第一个div</div>
        <div class="div02">第二个div</div>
        <div class="div03">第三个div</div>
    </div>
</body>
</html>

相对定位与绝对定位 ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>相对定位与绝对定位</title>
    <style type="text/css">
        /*相对定位与绝对定位*/
        .box{border: 1px solid red;width: 500px;height: 200px;position: relative;}
        .box01{
            background: green;
            width: 50px;
            height: 50px;
            position: absolute;
            right: 0;bottom: 0;
            z-index: 9999    /*z-index 属性设置元素的堆叠顺序。*/
            }
        .box02{background: blue;width: 50px;height: 50px;position: absolute;right: 40px;bottom: 40px;}
    </style>
</head>
<body>
    <div class="box">
        <div class="box01">第一个div</div>
        <div class="box02">第二个div</div>
        <div class="box03">第三个div</div>
    </div>
</body>
</html>

浮动：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>浮动</title>
    <style type="text/css">
        /*浮动*/
        .box{border: 1px solid red;}
        .box01{border: 1px solid blue;width: 100px;height: 100px;float: left;}
        .box02{border: 1px solid green;width: 200px;height: 100px;float: left;}
        /*.clear{clear: both;}*/    /*清除浮动both*/
        /*.clear{clear: block;overflow: hidden;} */   /*清除浮动*/
        .box01:after{content: "haha";}
        /*下面这个，很NB的清除浮动方法，兼容99.99%浏览器*/
        .clear:after{display: block;clear: both;content: ".";visibility: hidden;height: 0;}
        .clear{zoom:"1";}
    </style>
</head>
<body>
    <div class="box clear">
        <div class="box01">第一个div</div>
        <div class="box02">第二个div</div>
        <div>第三个div</div>
    </div>
</body>
</html>

转载请注明出处：http://blog.csdn.net/iwanghang/article/details/76618473

欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android，请与我联系
联系方式

微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com

觉得博文有用，请点赞，请评论，请关注，谢谢！~


Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime的更多相关文章

  1. Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...

  2. Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...

  3. Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...

  4. Android程序员学WEB前端(5)-HTML(5)-框架集-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576279 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 框架集: index7. ...

  5. Android程序员学WEB前端(4)-HTML(4)-注册页面-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576031 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 注册页面1: <! ...

  6. Android程序员学WEB前端(3)-HTML(3)-表单嵌套-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522586觉得博文有用,请点赞,请评论,请关注,谢谢!~ 表单嵌套: <!DO ...

  7. Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522417觉得博文有用,请点赞,请评论,请关注,谢谢!~锚点 链接 列表 表单 &l ...

  8. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  9. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. 《Java程序设计》实验1实验报告

    20145318 <Java程序设计>实验1实验报告 实验题目 通过对500个数据进行操作,实现快速排序.选择排序.直接插入排序算法时间复杂度的比较:并在排序数据中快速查找某一数据,给出查 ...

  2. 20145333《Java程序设计》第3次实验报告

    20145333<Java程序设计>第3次实验报告 实验内容 使用 git 上传代码 使用 git 相互更改代码 实现代码的重载 实验步骤 git设置用户名邮箱,ssh公钥 用git上传代 ...

  3. 20135302魏静静——linux课程第七周实验及总结

    linux课程第七周实验及总结 实验及学习总结 1. 编译链接的过程和ELF可执行文件格式(以hello为例) GNU编译系统编译源码: 首先,运行C预处理器(cpp),将.c文件翻译成.i文件——g ...

  4. 在使用Vue.js中使用axios库时，遇到415错误（不支持的媒体类型(Unsupported media type)）

    知识点:vue2.0中使用axios进行(put,post请求时),遇到415错误 解决办法:在axios的第三个参数config中,设置请求头信息'Content-Type': 'applicati ...

  5. Feign PathVariable annotation was empty on param 0.

    使用Feign的时候,如果参数中带有 @PathVariable形式的参数,则要用value=""标明对应的参数,否则会抛出IllegalStateException异常 如 @P ...

  6. Hdu 1455

    #include <iostream> #include <cstdio> #include <cstdlib> #include <algorithm> ...

  7. C++中的指针和数组

    最近看C++编程思想,看到第十三章动态内存管理的时候把自己给绕进去了,主要是在数据和指针这块弄混了.现在把找到的一些资料总结如下: 1. 数组是数组,指针是指针,两者并不等价: 2.数组在作为左值的时 ...

  8. nginx web服务器详解1(转)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://freeloda.blog.51cto.com/2033581/1285332 大 ...

  9. nagios监控3306端口

    1.修改 /usr/local/nagios/etc/objects/commands.cfg  添加一个服务名 # check port define command{ command_name c ...

  10. GridControl 史上最全的资料(一)

    GridControl详解(一)原汁原味的表格展示 Dev控件中的表格控件GridControl控件非常强大.不过,一些细枝末节的地方有时候用起来不好找挺讨厌的.使用过程中,多半借助Demo和英文帮助 ...