/*
<div></div>没有任何功能,不属于功能标签
可以放文字，图片以及各种元素的块标签
常常用来布局
span标签属于行内标签，无法设置宽高

*/

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>div标签</title>

<style>

/*

	<div></div>没有任何功能,不属于功能标签

	可以放文字，图片以及各种元素的块标签

	常常用来布局

	span标签属于行内标签，无法设置宽高

*/

	#qf1{

		background-color: #00FFFB;

		width: 50px;

		height: 150px;

		float: left;

	}	

	#qf2{

		background-color:#E8FF00;

		width: 100px;

		height: 100px;

		float: right;

	}

	#qf3{

		background-color:#00FF15;

/*		width: 100px;*/

		height: 100px;

		/*清除浮动* both是都的意思,清除两边 飞起来：float 地上；clear*/

		clear: both;

	}

</style>

</head>

<body>

	<div id="qf1">我是左边div</div>

	<div id="qf2">我是右边div</div>

    <div id="qf3">我是第三个div</div>

</body>

</html>　　

益处处理：

/*如果内容超出div则隐藏*/
/*overflow: hidden;*/
/*不管div内容是否超出都会给div一个滚动条*/
/*overflow: scroll;*/
/*如果内容不超出div 则没有滚动条，如果超出，则自动添加滚动条*/
overflow: auto;

盒子模型：

/*盒子模型
1.外边距:margin
2.内边距:padding
3.边框:border
margin重叠现象：
只要有一个元素没有float属性就会出现重叠现象，margin取相邻元素margin最大值
CSS初始化：
*{
marhin:0px;
padding:0px;
}
*/

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>盒子模型</title>

<style>

	*{

	 	margin:0px;

	 	padding:0px;

	}

	#big{

		width:500px;

		height: 500px;

		background-color:#00B7EF;

	}

	#small1{

		width: 100px;

		height: 100px;

		background-color: pink;

		float: left;

		margin: 10px;/*上右下左*/

		border: 20px solid black;

		padding: 10px;

	}

	#small2{

		width: 100px;

		height: 100px;

		background-color: yellow;

		float: left;

		margin: 10px;

	}

	#small3{

		width: 100px;

		height: 100px;

		background-color:#F700FD;

/*清除浮动* both是都的意思,清除两边 飞起来：float 地上；clear*/

		clear: both;

		margin:10px;

	}

	#small4{

		width: 100px;

		height: 100px;

		background-color:#FF0000;

		clear: both;

		margin: 20px;

	}

</style>

</head>

<body>

	<div id="big">

		<div id="small1">戒指</div>

		<div id="small2"></div>

		<div id="small3"></div>

		<div id="small4"></div>

	</div>

</body>

</html>

　　

盒子模型/div标签/益出处理的更多相关文章

  1. html学习第三天—— 第11章 盒子模型 div

    盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...

  2. html+css一些简单案例：爱心点击，盒子模型，2d动画

    canvas绘制爱心 效果预览 上代码 <!doctype html> <html> <head> <title>HTML5 Canvas爱心飘动动画特 ...

  3. DIV+CSS两种盒子模型（W3C盒子与IE盒子）

    在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...

  4. CSS复合选择器和div盒子模型

    一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...

  5. CSS 小结笔记之盒子模型

    网页标签可以看成是一个个盒子,页面设计就像垒积木一样,在网页中将盒子摆好显示出来.在浏览器中可以很清楚的去看到一个标签的盒子,具体方法如下: 打开浏览器的开发人员工具,在Elements中选中一个标签 ...

  6. CSS布局(一) 盒子模型

    一.盒子模型 标准盒子模型 从下图可以看到标准 w3c 盒子模型的范围包括 content.padding.border.margin,并且 content 部分不包含其他部分. 怪异盒子模型 从下图 ...

  7. CSS——（2）盒子模型与标准流

    上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...

  8. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  9. js中的盒子模型

    说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin ...

随机推荐

  1. Blocking Cross Origin API request for /api/contents Creating Notebook Failed An error occurred while creating a new notebook.

    anacoda安装的jupyter,使用nginx进行了转发,远程访问可以进去,但是创建文件和创建目录都会报错 浏览器页面报错: 第一次使用jupyter创建python时错误:Creating No ...

  2. sqlite3 学习

    安装sqlite: [ sqlite]$ wget http://www.sqlite.org/sqlite-3.6.16.tar.gz[ sqlite]$ tar -xzvf sqlite-3.6. ...

  3. vertx模块DeploymentManager部署管理器

    DeploymentManager public DeploymentManager(VertxInternal vertx) { this.vertx = vertx; loadVerticleFa ...

  4. servlet九大内置对象和监听器

    对象名称 类型 描述 作用域 request javax.servlet.ServletRequest 表示一次用户请求 Request response javax.servlet.SrvletRe ...

  5. vue交互

    1)如果vue想做交互,本身的框架是不支持的,需要引入vue-resurce库交互方式:get.post.jsonp 1.get方式methods: {    get: function () { / ...

  6. Linux基础-远程管理

    shutdown  选项  时间    关机/重新启动 -r 重新启动 不指定选项和参数,1分钟后关闭电脑 重启必须加-r 示例:  shutdown   -r now    now表示现在 shut ...

  7. jQuery概念

  8. .net core 利用日志查看ef生成的SQL语句

    EF Core 没有直接提供像 EF6 那样方便的在日志中记录最终生成的 SQL 的功能,可以通过官方提供的日志记录(Microsoft.Extensions.Logging)实现. 一. 使用 Mi ...

  9. linux系统监控工具

    Linux性能监控工具 top   提供运行系统的动态实时视图.显示系统摘要信息以及任务列表 uptime    显示系统平均负载 ps.pstree    提供当前进程列表 free  显示系统中空 ...

  10. android---EditText的多行输入框

    <EditText android:id="@+id/edt_order_note_text" android:layout_width="match_parent ...