/*
<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下定时备份文件

    一. 编写脚本 编写一个脚本文件,使脚本可以执行备份命令. 例如,将文件目录 /home/backups/balalala 备份到/home目录下,并压缩. 1. 创建脚本 命令格式: touch 路 ...

  2. IDEA中执行MAVEN命令打jar包

    SpringBoot Jar包打包 1.工程POM配置packaging为jar. <packaging>jar</packaging> 2.增加MAVEN运行配置 添加MAV ...

  3. P2255 [USACO14JAN]记录奥林比克

    P2255 [USACO14JAN]记录奥林比克 题目描述 农民约翰热衷于所有寒冷天气的运动(尤其是涉及到牛的运动), 农民约翰想录下尽可能多的电视节目. 为moolympics电视时间表由N个不同的 ...

  4. elment-ui中 修改el-table表头的颜色

    可以直接在table上添加: :header-cell-style="{background:'#f5f7fa'}" 也可以使用绑定方法来修改 :header-cell-style ...

  5. day20包

    https://www.cnblogs.com/Eva-J/articles/7292109.html 一.模块: 1.什么是模块:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名 ...

  6. podman(libpod)---github简单记录

    这个应该集成了Skopeo 和Buildah. 用于代替docker的工具包,且和cri-o共享后端代码,迟早集成进K8S~~~. (docker肿么办????) github地址: https:// ...

  7. Javascript数据结构与算法--栈的实现与用法

    栈数据结构 栈是一种遵从后进先出(LIFO)原则的有序集合.新添加的或者待删除的元素都保存在栈的同一端,称作栈顶,另一端就叫栈底.在栈里,新元素都靠近栈顶,旧元素都接近栈底. 我们在生活中常能看到栈的 ...

  8. 「LibreOJ Round #9」CommonAnts 的调和数

    题解: 对于subtask3:可以把相同的归在一起就是$nlogn$的了 对于subtask4: 可以使用高维前缀和的技术,具体的就是把每个质因数看作一维空间 那么时间复杂度是$\sum \limit ...

  9. sqlserver给用户配置存储过程查看权限

    对应的数据库->安全性->用户名右键属性-->安全对象-->指定所有对象-->选择服务器,里边有一个 查看定义(view any definition) 选项,勾上.

  10. 《ServerSuperIO Designer IDE使用教程》- 5.树形结构管理设备驱动，小版本更新。发布：v4.2.3.1版本

    v4.2.3.1 更新内容:1.选择和管理设备驱动,增加树状结构显示.2.优化ide代码,核心代码没有改动.下载地址:官方下载 5. 树形结构管理设备驱动,小版本更新 5.1    概述 此次升级主要 ...