您的位置：首页 > 职场人生

Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime

2017-08-03 14:02 781 查看

转载请注明出处：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

盒子模型：

内联元素与块级元素 ：

内联元素与块级元素 ：

相对定位与绝对定位 ：

相对定位与绝对定位 ：

相对定位与绝对定位 ：

浮动：

内联元素与块级元素：

内联元素与块级元素：

相对定位与绝对定位：

相对定位与绝对定位：

相对定位与绝对定位：