/*
<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. struts2 学习01

    知识补充: Java 平台有三个版本,这使软件开发人员.服务提供商和设备生产商可以针对特定的市场进行开发: * Java SE(Java Platform,Standard Edition).Java ...

  2. ollydbg入门记录

    1.软件窗口说明 OllyDBG 中各个窗口的名称如下图.简单解释一下各个窗口的功能, 反汇编窗口:显示被调试程序的反汇编代码,标题栏上的地址.HEX 数据.反汇编.注释可以通过在窗口中右击出现的菜单 ...

  3. Zabbix中获取各用户告警媒介分钟级统计

    任务内容: 获取Zabbix各用户告警媒介分钟级统计,形成趋势图,便于观察各用户在每分钟收到的告警数量,在后续处理中,可以根据用户在某时间段内(例如3分钟内)收到的邮件总数,来判断是否有告警洪水的现象 ...

  4. lombok @Accessors用法

    @Accessors 翻译是存取器.通过该注解可以控制getter和setter方法的形式. fluent 若为true,则getter和setter方法的方法名都是属性名,且setter方法返回当前 ...

  5. 饮冰三年-人工智能-Python-28 企业官网（组合搜索）

    1 2:组合搜索 2.1 创建model类 from django.db import models class Direction(models.Model): """ ...

  6. python爬取安居客二手房网站数据（转）

    之前没课的时候写过安居客的爬虫,但那也是小打小闹,那这次呢, 还是小打小闹 哈哈,现在开始正式进行爬虫书写 首先,需要分析一下要爬取的网站的结构: 作为一名河南的学生,那就看看郑州的二手房信息吧! 在 ...

  7. Lua脚本在redis分布式锁场景的运用

    目录 锁和分布式锁 锁是什么? 为什么需要锁? Java中的锁 分布式锁 redis 如何实现加锁 锁超时 retry redis 如何释放锁 不该释放的锁 通过Lua脚本实现锁释放 用redis做分 ...

  8. thinkphp查询某个字段为空的数据

    $where['name'] = ['exp', 'is null']; //为空的 $where['name'] = ['exp', 'is not null']; //不为空的

  9. 不可不知的表达式树（1）Expression初探

    说起Lambda表达式,大家基本都很熟悉了,而表达式树(Expression Trees),则属于80%的工作中往往都用不到的那种技术,所以即便不是什么新技术,很多人对其理解都并不透彻.此文意图从表达 ...

  10. 平滑升级nginx到新版本

    这里测试一下nginx的平滑升级,以备不时之需 查看nginx版本号: [root@zklf-server01 ~]# /application/nginx/sbin/nginx -V nginx v ...