盒子模型

padding-border-margin模型，也叫盒子模型。
padding:为内边距； border:边界； margin：外边界；
举个例子吧：

<html>
<head><title>div</title></head>
<style type="text/css">
body{
 border:1px black solid;
}
h3{
 margin:10px;
 width:800px;
 height:200px;
 padding:30px;
 border:1px black dotted;
}
div{
 margin:10px;
 width:300px;
 height:50px;
 padding:50px;
 border:1px blue double;
}
</style>
</head>
<body>
<h3>div基础总结</h3>
<div>网页的基础就是一个个盒子的有序排列</div>
</body>
</html>

可以看到，body也是具有边界的。
一个独立的盒子可以看作由四个部分:1.content 2.border 3.padding 4.margin
一个盒子的宽度：content+padding+border+margin
其中content的宽度和高度由width,和height控制
一个盒子的四条边全部都可以设置border,padding,margin属性


从图上可以看到，margin代表的就是块与块之间的距离，padding代表的就是content和border之间的距离。

关于边框的设置

三个属性width color style
可以分别使用border-width border-color border-style来分别设定
这里的width的值和文本的之有所不同：
文本：normal bold lighter 100-900
边框:thin medium thick 具体的数值( 5px 2in等)
color属性和文本的完全一致。
重点是style属性

  1. none:无边界
  2. hidden:边界隐藏,效果类似于none
  3. dotted dashed solid double
  4. groove inset outset(这三种在浏览器上显示不出来)

还有一种简单的关于边框的设置方法
border ___ ____ _____(三个空上分别填上width color style的值)当然这样只能设置整个边框的属性。(四个边框style一致)

当有多个边框设置相互冲突时，按最后一个设置边框的值来处理

当使用不同个数的数据时，代表的含义也不一样

如：margin:12px(代表四个方向的margin值都为12px)==margin:12px 12px 12px 12px
margin:12px 15px(代表上下方向的margin的值为12px,左右的margin的值为15px)
margin:12px 15px 16px(代表top的margin为12px,左右的margin值为15px,bottom的值为16px）
margin:12px 15px 16px 17px(上 右 下 左)
当设置背景颜色时候有一些特殊的地方
body是一种比较特殊的盒子，当使用设置背景时会将margin区域也进行覆盖
除了body之外的盒子，当设置背景时，只会覆盖content+padding(一部分ie中会覆盖到border）

标准文档流（标准流）

是指在不使用其他与排列和定位有关的特殊css规则时，各种元素的排列规则。

块级元素：同级的块级元素之间，竖直排列。如：body,ul,li,ol,p等
行内元素：类似于文字元素，和一些本身不占有区域，只是在其他元素的基础上指定了范围。如：strong标记，a标记。等

两种常见的容器标志div标签和span标签

div标签属于块状标签，只是相对于一些具有特殊含义的块状元素，div是一个通用的块状元素，可以容纳各种元素
span标签和div标签一样都是隔离出一定的块状区域，只是span是属于行内元素。
div标签中可以包含span标签，但是span标签中不可以包含div标签

margin在盒子位置中的作用与注意

在这里插入图片描述
当两个盒子相邻时，水平之间的间距时margin-right+margin-left
但是当两个盒子竖直排列时就不同了
在这里插入图片描述
之间的竖直距离取决于，两者之间的较大者，较小的塌陷到了较大的里面。
盒子在宽度上自动延伸，在高度上自动收缩(能够容纳下内容的最小值)。

在排版中盒子最重要的两种属性position和float

float属性

left right两种选项

<html>
	<head><title>div浮动</title></head>
	<style type="text/css">
	body{
 margin:15px;
 font-family:Arial;
 font-size:12px;
 border:1px blue solid;
}
.father{
 background-color:#FFFF99;
 border:1px #111 solid ;
 padding:5px;
}
.father div{
 padding:10px;
 margin:15px;
 border:1px #111 dashed;
 background-color:#FF90ba;
}
.father p{
 border:1px #111 dashed;
 background-color:#FF90ba;
}
.son1,.son2{
 float:left;
}
.son3{
 float:right;
}
	<body>
	<div class="father">
 <div class="son1">Box-1</div>
    <div class="son2">Box-2</div>
    <div class="son3">Box-3<br />Box-3</div>
    <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
    这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字。</p>
</div>
</body>
</html>

在这里插入图片描述
这里值得注意的是box2和box3的左边界都是box1的左边界，当把容器对象设置为浮动类型的话，就脱离了标准流，可以先忽略。
一个div的范围是由它里面的标准流内容决定的，与其里面的浮动的内容无关。
当把p标签删除之后:

在这里插入图片描述图中可以看到，body标签的边框缩小而且不包含三个div容器。

盒子的定位Position

具有四个属性：static(标准流下),relative,absolute,fixed.

<html>
<head><title>div的position</title>
<style type="text/css">
body{
 margin:20px;
 font:Arial 12px;
}
#father{
 background-color:#a0c8ff;
 border:1px black dashed;
 padding:15px;
}
#block1{
 background-color:#FFF0ac;
 border:1px black dashed;
 padding:10px;
</style>
</head>
<body>
	<div id="father">
		<div id="block1">Box-1</div>
	</div>
</body>
</html>

在这里插入图片描述
1.relative
是相对于本来box的位置的偏移
在style标签的最后添加
position:relative;
left:30px;
top:30px;
在这里插入图片描述
使用相对位置的容器仍在标准流中，而且不会对父块产生影响，既然还在标准流中，就不会对兄弟块产生影响。

绝对定位absolute

绝对定位是以离盒子最近的一个已经定位的祖先元素为基准进行便宜的，如果没有定位的祖先元素，那么会以浏览器的窗口为基准定位。
这里已经定位的含义是position属性被设置为不是static的别的属性。

<html>
	<head><title>绝对定位</title>
body{
 margin:20px;
 font:Arial 12px;
}
#father{
 background-color:#a0c8ff;
 border:1px black dashed;
 padding:15px;
}
#father div{
 background-color:#FFF0ac;
 border:1px black dashed;
 padding:10px;
}
#block2{
 position:absolute;
 top:30px;
 right:30px;
}
</style>
</head>
<body>
 <div id="father">
     <div id="block1">Box-1</div>
        <div id="block2">Box-2</div>
        <div id="block3">Box-3</div>
    </div>
</body>
</html>

在这里插入图片描述由于block2没有祖先元素进行过定位，所以以当前浏览器为基准，移动到据top30px,和据right30px的位置
若想要个某个块完全脱离标准流又想保持原来的位置，只需要设置position为absolute，而不指定偏移量。

确定盒子的属性display

display:inline(行内元素)
display:block(块状元素)
display:none(块状消失)
前面我们已经知道了span为行内元素，div为块状元素，但是如果我们对span设置dispaly属性为block,则span就变成了块状元素，对于div也是一样。

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生