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 ...
随机推荐
- [pixhawk笔记]5-uORB消息传递
本文主要内容翻译自官方文档:https://dev.px4.io/en/middleware/uorb.html 在前一篇笔记中使用uORB完成消息传递,实现了一个简单示例程序,本文将对uORB进行系 ...
- keepalived结合lvs
ip划分: RS1:192.168.223.135 RS2:192.168.223.137 节点node1和node2的keepalived(node1:192.168.223.136,node2:1 ...
- ARTS Week 002
Algorithm Leetcode 2. Add Two Numbers You are given two non-empty linked lists representing two non- ...
- 总结的一些json格式和对象/String/Map/List等的互转工具类
总结的一些json格式和对象/String/Map/List等的互转工具类,有需要的可以看看,需要引入jackson-core-asl-1.7.1.jar.jackson-jaxrs-1.7.1.ja ...
- ubuntu18.04安装ssh服务
1.安装openssh-server sudo apt-get install openssh-server 2.启动ssh服务 sudo service ssh start 3.检测是否启动了ssh ...
- backstopJS 参数详解 CN
最近需要进行前端UI验证,详细研究了下backstopJS.官方文档为En,手动翻译了下.相关参数信息如下: 如需转载引用,请保留原文出处,支持原创,感谢.
- 正则表达式-RegExp-常用正则表达式
正则表达式-RegExp-常用正则表达式 作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源 ...
- AD 域中给AD 用加登录本地计算的权限
说明:一般新添加的AD 用户没有登录计算机电脑的权限,如果需要添加登录权限. 步骤:1.打开Active Directory 用户和计算机 步骤:2.打开某个用户 步骤3; 如下图.
- pathway一些网站
1.BioCarta_Pathways https://cgap.nci.nih.gov/Pathways/BioCarta_Pathways
- 配置servlet支持文件上传
Servlet3.0为Servlet添加了multipart配置选项,并为HttpServletRequest添加了getPart和getParts方法获取上传文件.为了使Servlet支付文件上传需 ...