/*
<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. 【Linux】常见基础命令之文件操作

    vi:编辑文件 lilip@ubuntu:~/test/page$ vi test.txt i         切换到输入模式,以输入字符. x        删除当前光标所在处的字符. :      ...

  2. 彻底搞懂 C# 的 async/await

    前言 Talk is cheap, Show you the code first! private void button1_Click(object sender, EventArgs e) { ...

  3. 面向对象之组合VS继承：继承过时了？

        在阅读Effective Java中的第16条时发现了一个有趣的机制或者说是模式,那就是组合(文中翻译为复用,但是作者认为组合更能体现这种模式的精神),并且文中建议使用组合.  那什么是组合, ...

  4. linux常用命令使用方法

    一.常用的分析服务器日志命令 1.查看有多少个IP访问: awk '{print $1}' log_file|sort|uniq|wc -l 2.查看某一个页面被访问的次数: grep "/ ...

  5. layer.open()利用代码实现伪阻塞

    今天在项目中遇到需要弹框处理的问题,,当用户点击某个单选框时,需要进行确认操作,,常规的情况下,因为layer.open()和layer.confirm()都是异步执行的, 在点击单选框之后单选框会立 ...

  6. Angular Material design设计

    官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...

  7. __builtin_expect — 分支预测优化

    1.引言 在很多源码如Linux内核.Glib等,我们都能看到likely()和unlikely()这两个宏,通常这两个宏定义是下面这样的形式. #define likely(x) __builtin ...

  8. python第七天（字符编码，字符与字节，文件操作）

    一.字符编码: 定义:将人识别的字符转换成计算机能识别的0和1,转换的规则就是字符编码表. 常见编码表:ascii.unicode.GBK 编码表: 1.采用的都是unicode编码表 2.unico ...

  9. CheckedTextView文字不居中的问题

    问题:CheckedTextView设置了android:gravity="center",但是不居中 解决方法:添加属性android:textAlignment="c ...

  10. 图解CSS3核心技术与案例实战（1）

    前言: 我买了一本<图解CSS3核心技术与案例实战>大漠写的,为了提高自己的自觉性呢,抓紧看书,把读书笔记放在这上面,跟大家一起分享,也为督促自己完成读书计划. 文末有微信公众号,感谢你的 ...