Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime
转载请注明出处：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的更多相关文章
- Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...
- Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...
- Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...
- Android程序员学WEB前端(5)-HTML(5)-框架集-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576279 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 框架集: index7. ...
- Android程序员学WEB前端(4)-HTML(4)-注册页面-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576031 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 注册页面1: <! ...
- Android程序员学WEB前端(3)-HTML(3)-表单嵌套-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522586觉得博文有用,请点赞,请评论,请关注,谢谢!~ 表单嵌套: <!DO ...
- Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522417觉得博文有用,请点赞,请评论,请关注,谢谢!~锚点 链接 列表 表单 &l ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
随机推荐
- hadoop yarn HA集群搭建
可先完成hadoop namenode HA的搭建:http://www.cnblogs.com/kisf/p/7458519.html 搭建yarnde HA只需要在namenode HA配置基础上 ...
- 20145312 实验四《Andoid开发基础》
20145312 实验四<Andoid开发基础> 实验内容 1. 安装Android Studio 2. 运行安卓AVD模拟器 3. 使用Android运行出模拟手机并显示自己的学号 实验 ...
- 20144303 《Java程序设计》第一周学习总结
20144303 <Java程序设计>第一周学习总结 教材学习内容总结 下载.安装.调试了JDK. JavaSE是各语言个应用平台的基础,分为四个主要的部分:JVE,JRE,JDK,和ja ...
- 20145231熊梓宏 《网络对抗》 实验9 Web安全基础实践
20145231熊梓宏 <网络对抗> 实验9 Web安全基础实践 基础问题回答 1.SQL注入攻击原理,如何防御? •SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面 ...
- Duilib + wke 设置wke背景透明
WkeWebKit.cpp 新增 wkeSetTransparent(m_pWebView, true); void CWkeWebkitUI::DoInit() { CControlUI::DoIn ...
- Job流程：提交MR-Job过程
1.一个标准 MR-Job 的执行入口: //参数 true 表示检查并打印 Job 和 Task 的运行状况 System.exit(job.waitForCompletion(true) ? 0 ...
- arp攻击的处理方法
http://www.hacking-tutorial.com/tips-and-trick/4-steps-to-prevent-man-in-the-middle-attack-arp-poiso ...
- 关于C#中的垃圾回收
http://cnn237111.blog.51cto.com/2359144/1343004 GC.Collect如何影响垃圾回收 主要是 //GC.Collect(); //GC.WaitF ...
- springboot部署在云服务器上
1.window云服务器上 在本地的SpringBoot的根目录下 mvn clean package 打包jar 在云服务上安装jdk 将jar拷贝到云服务器上 在jar包所在的相应的位置,执行ja ...
- nwafu - java实习 JDBC练习 - 学生信息系统界面
学生信息系统界面的实现 - JDBC writer:pprp 登录界面的实现: 分为两个部分: 1.LoginFrame.java : 用windowbuilder进行快速搭建界面,构建好登录的界面, ...