CSS-盒子模型（div）_div盒子模型-程序员宅基地
## CSS-盒子模型（div)
对于有了一定HTML基础的人而言所谓盒子也就是块元素，其中< div >盒子模型就是具有代表性的。
1——让我们来认识一下盒子的基本构成：
如图就是盒子的基本组成，最外层的蓝色虚线即浏览器边界，橙色和灰色部分就是边框和内容与边框间的填充，而白色部分即内容（网页主要是显示的部分）。
有图不难看出来盒子是有宽和高的，则需要通过css设置而在设置之前需要对你所定盒子命名。
例如：
下图为效果图——
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#aa
{
width:100px;
height:100px;
background-color: pink;
}
/* #bb
{
top:50px;
left:50px;
width:100px;
height:100px;
background-color: red;
}*/
</style>
</head>
<body>
<div id="aa"></div>
<div id="bb"></div>
</body>
</html>
其中粉红色区域就是盒子 “aa”。
以上就是盒子基本内容。
接下来我们介绍盒子模型的两大布局方式；
1 --浮动 2-- 定位
首先我们来了解一下什么是浮动；
浮动布局方式——通过设置html元素的float属性显示；
代码格式：float：left/right/none;（向左浮动/向右浮动/不浮动）
这是没加浮动是的代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#aa
{
width:100px;
height:100px;
background-color: pink;
}
#bb
{
width:100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<div id="aa"></div>
<div id="bb"></div>
</body>
</html>
这是效果图——
很显然出现两块不同的区域，而这也充分体现了盒子模型作为块元素的特点默认情况下各自占一行。
接下来加入浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#aa
{
width:100px;
height:100px;
background-color: pink;
float:left;
}
#bb
{
width:100px;
height:100px;
background-color: red;
float:left;
}
</style>
</head>
<body>
<div id="aa"></div>
<div id="bb"></div>
</body>
</html>
很显然当我们加入浮动后，两块区域明显由两行变成一行并相继排列；
以此类推，可以分别对不同盒子施加不同指令，可以同时多个盒子向同一方向浮动，也可以同时向不同方向浮动。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#aa
{
width:100px;
height:100px;
background-color: pink;
float:left;
}
#bb
{
width:100px;
height:100px;
background-color: red;
float:right;
}
</style>
</head>
<body>
<div id="aa">aa</div>
<div id="bb">bb</div>
</body>
</html>
以上就是浮动的用法。
定位——
属性：positon
描述：设置对象的定位方式
值：
static 静态定位：页面中的每一个对象的默认值。
absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative 相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位
以下介绍“相对定位”和“绝对定位”；
我们以粉色大区域为母区域，将红色区域进行定位；
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#aa
{
position:relative;
width:100%;
height:500px;
background-color: pink;
}
#bb
{
position: absolute;
margin-top:50px;
margin-left:50px;
width:100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<div id="aa">aa</div>
<div id="bb">bb</div>
</body>
</html>
当我们加入定位标签后，可以看出红色区域发生移动，这就是定位。
而定位中还有其他定位；
margin-left/right/top/bottom(边框距左/右/上/下的距离)
而我们想把红色区域定位到粉色区域上去则需要去掉margin，直接left/right/top/bottom:XXpx;即可。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#aa
{
position:relative;
width:100%;
height:500px;
background-color: pink;
}
#bb
{
position: absolute;
top:50px;
left:50px;
width:100px;
height:100px;
background-color: red;
}
</style>
</head>
<body>
<div id="aa">aa</div>
<div id="bb">bb</div>
</body>
</html>
这样我们就掌握了基本的浮动和定位布局的使用方法。
——Miziguo
智能推荐
VisionPro工具与命名空间对照表-程序员宅基地
文章浏览阅读5.4k次，点赞10次，收藏100次。VisionPro工具对应的命名空间项次 分类 名称 命名空间 1 无分类 CogAcqFifoTool Cognex.VisionPro.CogAcqFifoTool 2 CogBlobTool Cognex.VisionPro.Blob 3 CogCaliperTool Cognex.VisionPro.Caliper 4 CogCNLSearchTool C..._visionpro工具与命名空间对照表
认清现实吧 中国大数据产业的痛点和困难-程序员宅基地
文章浏览阅读167次。大数据作为一个新兴的产业，一直在处于舆论的风口浪尖。就像互联网＋的概念一样，大数据被神话了，被送上了“宗教”的神坛。大数据企业总是有一个担心，生怕大数据被捧得的太高，将来可能会被摔的很惨。2015年中国大数据产业的热度从贵阳大数据交易所开始，到9月国务院的2015第50号文《促进大数据发展行动纲要》进入高峰，相信10月份的乌镇互联网大会上，大数据还会..._大数据的行业痛点
本周六与您相约 | 计算未来轻沙龙：让机器拥有理解语言的能力-程序员宅基地
文章浏览阅读477次。国庆长假转眼就过去了你是不是死活找不回学习状态？惊闻！有人在你畅饮肥宅快乐水之际已经默默投出了又一篇论文……短短短的假期，也在不停赋能充电怎么样，是不是有点心慌？要是还不..._王炳宁 中科院自动化所
【华为OD机试 2023 B卷 | 200分】We Are A Team（C++ Java JavaScript Python）_华为od we are a team-程序员宅基地
文章浏览阅读9.6k次。总共有 n 个人在机房，每个人有一个标号（1_华为od we are a team
常见文件格式的文件头数值-程序员宅基地
文章浏览阅读390次。常见文件格式的文件头数值JPEG (jpg)，文件头：FFD8FFPNG (png)，文件头：89504E47GIF (gif)，文件头：47494638TIFF (tif)，文件头：49492A00Windows Bitmap (bmp)，文件头：424DCAD (dwg)，文件头：41433130Adobe Photoshop (psd)，文件头：38425053..._常见文件格式的文件头数值
安装leach-234，./configure出现‘Installation of tcl seems incomplete or can't be found automaticall'怎么办_configure: error: installation of tcl seems incomp-程序员宅基地
文章浏览阅读1.5k次。# ./configurechecking for gcc... gccchecking whether the C compiler works... yeschecking for C compiler default output file name... a.outchecking for suffix of executables... checking whether we are c..._configure: error: installation of tcl seems incomplete or can't be found aut
随便推点
H3C防火墙-安全域配置举例_h3c防火墙配置实例-程序员宅基地
文章浏览阅读9.2k次，点赞4次，收藏59次。1. 组网需求某公司以 Device 作为网络边界安全防护设备，连接公司内部网络和 Internet。公司只对内部提供Web 服务，不对外提供这些服务。现需要在设备上部署安全域，并基于以下安全需求进行域间策略的配置。• 与接口 GigabitEthernet1/0/1 相连的公司内部网络属于可信任网络，部署在 Trust 安全域，可以自由访问 Web 服务器和外部网络。• 与接口 GigabitEthernet1/0/3 相连的外部网络属于不可信任网络，部署在 Untrust 安全域，不能访问公司内_h3c防火墙配置实例
京东薅羊毛详细教程（Ubuntu系统）保姆级_jd新人撸羊毛-程序员宅基地
文章浏览阅读4k次，点赞6次，收藏40次。京东薅羊毛详细教程（Ubuntu系统）小白新手皆宜文章目录京东薅羊毛详细教程（Ubuntu系统）小白新手皆宜前言：前期准备：step1：环境需求宝塔：docker开放端口step2：环境搭建开放端口：宝塔的搭建 :安装docker：step3：脚本部署安装脚本修改后台账户密码！！！脚本使用和配置进入系统cookie获取前言： 偶然看见一个京东自动化执行的脚本，可以获得京豆，大感兴趣，在部署的时候出现了一些问题，解决后做个记录，能帮到大家是最好了。ps：服务器系统为：Ubuntu18前期准备： _jd新人撸羊毛
unity热更新框架Xlua--自定义Loader方式_xlua 使用两次自定义loader-程序员宅基地
文章浏览阅读1.8w次。本博客根据51CTOscholl刘国柱老师网课编写，小白笔记，侵权必删创建C#脚本：using System.Collections;using System.Collections.Generic;using UnityEngine;using XLua;using System.IO;public class RunluaBySelfDefloader : MonoBeha..._xlua 使用两次自定义loader
grasshopper for rhino 6下载_Grasshopper做分形图案-程序员宅基地
文章浏览阅读280次。【长文多图预警】大家对于“分形”这个词并不陌生。一般来说，拥有“自相似”性质的图形属于分形。简而言之，如果你把一个图形放大，看到和它本身一模一样的形状，那么可以认为这个图形是“分形”的。它们还拥有无限多的细节，堪称最美丽的几何图形。虽然分形最初是用来测量和表述自然界中有粗糙边界的物体（比如海岸线），而且有严谨的定义，但本文不讨论这些，仅讨论使用迭代方法绘制分形。在Grasshopper中，绘制分形..._grasshopper for rhino 6
Java定时任务-ScheduledExecutorService_scheduledexecutortask-程序员宅基地
文章浏览阅读1.1k次。1.ScheduledExecutorService的接口介绍package java.util.concurrent;public interface ScheduledExecutorService extends ExecutorService { //单次执行，在指定延时delay后运行command任务 public ScheduledFuture<?> schedule(Runnable command,long delay, TimeUnit unit);_scheduledexecutortask
处理Oracle中杀不掉的锁-程序员宅基地
文章浏览阅读147次。一些ORACLE中的进程被杀掉后，状态被置为"killed"，但是锁定的资源很长时间不释放，有时实在没办法，只好重启数据库。现在提供一种方法解决这种问题，那1.就是在ORACLE中杀不掉的，2.在OS一级再杀。 1.下面的语句用来查询哪些对象被锁： select a.object_name,a.object_type,s.osuser,s.username,s.status,machine,s.s..._locked mode 为6杀不掉