/*
<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. Grunt 实战

    专题截图:(注:这个截图没啥意义) 项目截图: 目录讲解: app/        //开发目录; c/     //开发编译完成css文件夹; i/     //开发img文件夹; j/     / ...

  2. Gitlab_ansible_jenkins三剑客⑥Jenkins和ansible集成

    ip 角色 备注 10.11.0.215 jenkins服务器 通过deploy运行jenkins服务,deploy用户做了免秘钥登录ansible服务器 10.11.0.210 ansible服务器 ...

  3. 帆软认证BI工程师FCBA-部分题目

    1.安装32位系统的FineBI,最多只能支持2G内存. 正确 错误 2.Spider数据引擎中适合内存化的表通常为数据量小且更新频率较低的表. 正确 错误 3.Spider数据引擎支持跨数据源进行数 ...

  4. Navicat之MySQL连接（二）

    1.下载Navicat软件包及相应的破解补丁: 2.双击navicat120_premium_cs_x64.exe开始安装,修改安装位置,一般选择安装在非系统盘! 注意:安装完成后,解压破解补丁文件拷 ...

  5. ASP.NET Core + Vue.js 开发

    1.新建 项目文件夹 pro,在 VS CODE 打开终端,输入dotnet new mvc 命令,新建asp.net core项目. 2.在Startup.cs添加webpack的引用与配置 usi ...

  6. spring-mybatis的整合

    1.导入包 2.创建一个请求文件发送请求 <%@ page language="java" contentType="text/html; charset=UTF- ...

  7. 网络流24题——魔术球问题 luogu 2765

    题目描述:这里 这道题是网络流问题中第一个难点,也是一个很重要的问题 如果直接建图感觉无从下手,因为如果不知道放几个球我就无法得知该如何建图(这是很显然的,比如我知道 $1+48=49=7^2$ ,可 ...

  8. Python-数据类型之字典

    一: 概述 字典是有大括号,逗号分隔,有k/v组成 字典的键必须hashable,如数字,字符串,布尔值,元组 二: 操作 2.1 增 2.1.1  直接赋值 如果键不存在,则增加 dic = {'n ...

  9. node 和 npm 常用命令

    npm node 简述 快速入门 安装npm和管理npm版本 npm安装 更新npm npm -v npm install npm@latest -g npm install npm@next -g ...

  10. React使用Mobx管理数据

    React 和 Vue一样都属于单向数据流,为了更好的进行状态和数据管理官方和第三方也有配套的Redux等插件,本文介绍一个个人觉得更易用使用的组件 Mobx 核心概念 MobX 处理你的应用程序状态 ...