本文的内容有关css盒模型
盒模型
在css中，所有的元素都被一个个的“盒子”包围着。
广泛的使用两种盒子，块级盒子和内联盒子。这两种盒子会在页面流和元素之间的关系
block
绝大部分情况下盒子会和父容器一样宽。每个盒子都会换行。width和height属性都可以发挥作用。
内边距padding，外边距margin，边框border会将其他元素从当前的盒子周围推开。
inline
盒子不会产生换行
width和height属性将不会起作用。垂直方向的内边距、外边距以及边框会应用，但是不会把其他处于inline 状态的盒子推开。水平方向会应用但是会把其他inline 状态的盒子推开。
这真的太抽象了。所以什么是CSS盒模型？
CSS盒模型
主要分为几个内容，分别是Content box , Padding box , Border box , Margin box。由内到外。
content是可以设置width和height。padding是通过padding来设置，border是通过border设置。margin是通过margin来设置。
我理解是padding是内边距，margin是外边距，border就是内外边距的界限的宽度。width和height指的是conent的长和宽。
标准盒模型
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
替代盒模型
.box {
box-sizing: border-box;
}
ie标准的盒子模型
这个盒子就是border-box。默认的box-sizing是content-box
那么这个border-size做了什么呢？
bordersize的width = content-width + padding-width(left+right) + border-width(left+right)
height = content-height + padding-height(top+bottom) + border-height(top+bottom)
例子：下面的两个盒子是一样大的
.box {
border: 5px solid rebeccapurple;
background-color: lightgray;
padding: 40px;
margin: 40px;
width: 300px;
height: 150px;
}
.alternate {
box-sizing: border-box;
width: 390px;
height: 240px;
}
那么利用套娃的盒子模型，可以搞出来很多骚操作。比如外边距套起来，看上去是一个盒子，就能形成一个外边的盒子套着里面的两个盒子。
边框也可以由不同的样式构成不一样的结构
.container {
border-top: 5px dotted green;
border-right: 1px solid black;
border-bottom: 20px double rgb(23,45,145);
}
.box {
border: 1px solid #333333;
border-top-style: dotted;
border-right-width: 20px;
border-bottom-color: hotpink;
}
<div class="container">
<div class="box">Change my borders.</div>
</div>
内边距
内边距不能有负数量的内边距。所以值必须是0或正的值。
盒子模型和内联盒子
由span元素创建的哪些内联盒子。
特点就是他的content是忽略的，只能对他的padding，border，margin进行修改。但是不会对其他内容与内敛盒子的关系，所以内边距和边框会和其他的单词重叠。
使用display： inline-block
在使用了这个语句之后，width和height将会生效。padding和marginborder会推开其他元素。
背景与边框
background-color将会对css中进行背景着色。
.box {
background-color: #567895;
}
h2 {
background-color: black;
color: white;
}
span {
background-color: rgba(255,255,255,.5);
}
<div class="box">
<h2>Background Colors</h2>
<p>Try changing the background <span>colors</span>.</p>
</div>
背景图像
background-image 属性可以在一个元素的背景中显示一个图像,这个里面就显示了一个图片。
.a {
background-image: url(balloons.jpg);
}
.b {
background-image: url(star.png);
}
发现是可以在这个上面加载color的，但是有些可以有些不行。
控制背景平铺的行为
background-repeat
no-repeat阻止背景重复的平铺
repeat-x仅仅在水平方向上重复y…
repeat两个方向。
.box {
background-image: url(star.png);
background-repeat: repeat-y;
}
可以尝试这只有左边的一个star的照片，但是可以使用repeat进行重复。
调节背景图像的大小
background-size 设置长度或者百分比，来调节图像的大小来适应背景。
cover表示完全覆盖了盒子的区域。
contain：表示会调节合适的尺寸
.box {
background-image: url(balloons.jpg);
background-repeat: no-repeat;
background-size: 100px 100px;
background-size: 100px 10em;
background-size: cover;
background-size: contain;
}
背景图像定位
选择背景图片出现在他所应用的盒子位置上，使用了一个坐标系统，其中方框的左上角是（0，0），方框沿水平和垂直y轴定位。
默认的position是0，0
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: 60px 50px;
如果不讲那么这个是x第一个是从左边开始第二个是从上到下
等价：left 60px top 50px;
background-position: top 20px right 10px;在距顶部 20px 和右侧 10px 处：
}
渐变背景
使用的是gradient标签。具体到用的时候再看。
.a {
background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}
.b {
background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
background-size: 100px 50px;
}
多个背景图像
.box {
background-image: url(star.png), url(big-star.png);
}
先写进去的在上层。
背景附加
backgroud-attachment
scoll 背景图片一致不变，scolled内容的时候，还是保持不变。fixes，被fixed到viewport上面了，所以不会进行改变，当element进行scoll的时候，这个图片还是不会改变，始终保持在同一个位置。local绑定到元素上只有在滚动页面的时候才会滚动，绑定到这个元素上后，随着元素的scoll而scoll
边框
border-top border-width border-style
圆角border-radius:10px
border-top-right-radius:右上角的半径
.box {
border: 10px solid rebeccapurple;
border-radius: 1em;
border-top-right-radius: 10% 30%;
}
border-radius 是让四个角都做了一个圆角的效果。后面的对右上角进行了细调。
当使用了两个半径的时候是定义了一个椭圆。这个椭圆和边框的交集形成圆角。
测试
技能测试：背景与边框 - 学习 Web 开发 | MDN (mozilla.org)
任务1：
令这个盒子的边框宽度为 5px，且为黑色实心（solid）的，圆角半径为 10px。
添加背景图片（使用 balloons.jpg URL），调整它的大小，令其覆盖整个盒子。
给予 <h2> 一个半透明的黑色背景颜色，并使文本为白色。
answer:
.box {
border: 5px solid black;
border-radius: 10px;
background-image: url(../images/balloons.jpg);
background-size: cover;
}
h2 {
background-color: black;
color: white;
}
任务2
给这个盒子加一个 5px 的淡蓝色（lightblue）边框，设定左上角圆角半径为 20px，右下角圆角半径为 40px。
标题使用 star.png 图像作为背景图像，左边是一颗居中的星星，右边是重复的星星图案。
确保标题文本不覆盖图像，并且居中——你将需要使用在以前的课程中学到的技术来实现这一点。
没有完成，首先是一个和三个的star，不知道如何去做。还有如何让标题在background下面，无法去做，想到使用layer，但是还是会覆盖background的图像。
第二天想到了就不适用repeat 了，直接加四个星星，然后设置位置。后面测试了一下我们使用层是完全可以实现字体不被覆盖掉的。
@layer one {
h2 {
text-align: center;
}
}
@layer two {
.box {
border: 5px lightblue solid;
border-top-left-radius: 20px;
border-bottom-right-radius: 40px;
background-image: url(star.png), url(star.png),
url(star.png), url(star.png);
background-repeat: no-repeat;
background-position: left, right, right top 25%, right bottom 25%;
}
}
/* 给这个盒子加一个 5px 的淡蓝色（lightblue）边框，设定左上角圆角半径为 20px，右下角圆角半径为 40px。
标题使用 star.png 图像作为背景图像，左边是一颗居中的星星，右边是重复的星星图案。
确保标题文本不覆盖图像，并且居中——你将需要使用在以前的课程中学到的技术来实现这一点。 */
