自学——一个月入门前端④

本文的内容有关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 图像作为背景图像，左边是一颗居中的星星，右边是重复的星星图案。
确保标题文本不覆盖图像，并且居中——你将需要使用在以前的课程中学到的技术来实现这一点。 */