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 ...
随机推荐
- flume从log4j收集日志输出到kafka
1. flume安装 (1)下载:wget http://archive.cloudera.com/cdh5/cdh/5/flume-ng-1.6.0-cdh5.7.1.tar.gz (2)解压:ta ...
- nfs挂载
安装: yum install nfs-utils rpcbind 配置共享目录:vim /etc/exports /xxx/cloudcms *(insecure,rw,async,no_root_ ...
- goland 使用简单配置-不断更新
1.格式化代码 Ctrl+Alt+L 格式化代码 2.快捷键可能被占用 用tools-file watchers file->setting->tools->file watche ...
- Python Matplotlib简易教程【转】
本文转载自:https://blog.csdn.net/Notzuonotdied/article/details/77876080 详情请见:Matplotlib python 数据可视化神器 简单 ...
- SpringBoot ApplicationRunner/CommandLineRunner
CommandLineRunner.ApplicationRunner 接口是在容器启动成功后的最后一步回调(类似开机自动启动). CommandLineRunner.ApplicationRunne ...
- Hibernate抽取BaseDao
package com.cky.dao; import org.hibernate.Query; import org.hibernate.Session; import org.hibernate. ...
- 事务的学习，从jdbc开始：jdbc对事务的支持与实现
在使用spring对项目进行开发时,所有的事务都是由spring来管理的.这样一来我们就可以不需要操心事务,可以专心的处理业务代码. 但是,事务的底层究竟是如何实现的呢?那就从jdbc开始学习. 在使 ...
- outline详解
outline这个属性平时用的不太多,最近被问及专门研究一下这个属性的作用. CSS2加进来的outline属性,中文翻译过来是外轮廓. 神马是轮廓? 轮廓,指边缘:物体的外周或图形的外框. 那这样的 ...
- target 标签
<!DOCTYPE html><html><head><style>:target{border: 2px solid #D4D4D4;backgrou ...
- JavaScript权威指南--表达式与运算符
本章要点 表达式是javascript中的一个短语,javascript解释器会将其计算出一个结果. 程序中的常量.变量名就是一种简单的表达式.复杂的表达式是由简单的表达式组成的,比如数组访问表达式. ...