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 ...
随机推荐
- getJson同步
$.ajaxSettings.async = false;//在执行之前加$.ajaxSettings.async = false; (同步执行) function get_no_order_ar ...
- sqlite的Top筛选
select [CollectDateTime] as '时间',[Channel_34] as '通道34',[Channel_54] as '通道54' from [DataTable] wher ...
- 从0开始 数据结构 AC自动机 hdu 2222
参考博客 失配指针原理 使当前字符失配时跳转到另一段从root开始每一个字符都与当前已匹配字符段某一个后缀完全相同且长度最大的位置继续匹配,如同KMP算法一样,AC自动机在匹配时如果当前字符串匹配失败 ...
- 梅森素数 判定总结 - Lucas-Lehmer算法 & Miller-rabin算法
梅森素数 定义: if m是一个正整数 and 2^m-1是一个素数 then m是素数 if m是一个正整数 and m是一个素数 then M(m)=2^m-1被称为第m个梅森数 if p是一个素 ...
- 2017ACM/ICPC广西邀请赛-重现赛1005 CS course
2017-08-31 16:19:30 writer:pprp 这道题快要卡死我了,队友已经告诉我思路了,但是做题速度很缓慢,很费力,想必是因为之前 的训练都是面向题解编程的缘故吧,以后不能这样了,另 ...
- Ignatius and the Princess III - 拆分数-动态规划（dp）
---恢复内容开始--- 2017-08-10 20:00:45 writer:pprp 拆分数: 把正整数n拆分成k个正整数之和的方案数: 问题转换:将1转化为2 1.把n表示成m个正整数之和的方案 ...
- Linux 安装rabbitmq 遇到的一些问题
Linux下防火墙开启相关端口及查看已开启端口 https://www.cnblogs.com/pizitai/p/6518987.htmlhttps://www.cnblogs.com/blog-y ...
- 机器学习经典书籍&论文
原文地址:http://blog.sina.com.cn/s/blog_7e5f32ff0102vlgj.html 入门书单 1.<数学之美>PDF6 作者吴军大家都很熟悉.以极为通俗的语 ...
- JS的scrollIntoView
scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶 ...
- double int char long 等数据类型所占的字节数-----待整理