一.背景属性
1.1背景颜色
通过background-color:[指定颜色]
1.2背景图片
通过background-image:url(...); 括号里面写的是括号的地址
- 默认是repeat。
- 背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方
图1
图2
那么在图1的第8~10行是将body作为选择器，那就意味着是设置整个页面的背景！
第12行是"背景图片设置"
1.3背景平铺
使用background-repeat:这里写下图内容
什么是平铺？
举例说明：
注意红框那里换图片了！
图3
那么图3所示就是平铺。那么接下来我们就给它设置 不平铺
如果要它水平平铺：
1.4背景位置
通过使用background-position : x,y;来修改图片的位置
图4
注意这个坐标是如下图所示计算的：
举例说明：
那如果设置成top呢？
那如果是right呢？
浏览器中：
这里的右边只能到上图所示的位置了，其余部分不属于div了！（见上图）
还有一种是图3的第3种：混合单位
上图中14行的意思是在x轴方向是100px，在y轴方向上是位于中间，结果显示如下图：
上图显示确实是在y轴方向位于中间
1.5背景尺寸
这里先试一下第1种：填写具体的数值 即可
上图这里是将背景设置成了和图片一样大小了
如果使用cover呢？
二.圆角矩形
通过使用 boder-radius: 这里写长度是多少px 然后这里的"长度"是内切圆的半径，数值越大，弧线越强烈
上图11行是设置边框大小为2px，颜色为绿色，solid表示是实线，12行是内切圆半径是20px
那如果想画出一个圆呢？那就通过设置好边框的宽度和高度，内切圆半径为其一半即可
上图中的12行也可以把100px换成是50%
那么这个圆形在生活中很常见：
它就可以通过boder-radius来实现
举例说明：
那么还有一种简写的方式：
三.元素显示模式
通过使用display:block即可
像h1~h6，p标签，div标签就是 块级元素。他们是可以单独占据一行的。
像a标签，strong标签就是行内元素。他们是不能单独占据一行的，在实际应用开发中，我们会把行内元素转化成块级元素，使之能单独占据一行
举例：
注意：第10行第11行：如果双引号里什么都不写或者只写一个#号，那就代表的是什么都不让它跳转，只是在这里举例子，所以先不写链接！
上图发现他俩并没有单独占据一行
所以：
四.盒模型
4.1边框border
++基础属性++
- 粗细：border-width
- 样式：默认没边框是border-style
然后属性值有：实线边框是solid 虚线边框是dashed 点线边框是dotted
- 颜色：border-color
但是按下f12之后发现：
这个盒子的高度和宽度好像是220x120了，可是我在代码中设置的是200x100啊。
因为边框的上下高度是10嘛，一共20。
那么我们该如何操作不用让boder把盒子撑大呢？
通过使用box-sizing，它是可以修改浏览器的行为，是边框不再撑大盒子
那么此时我们再来看浏览器中结果：
图5
那么除此之外还有一种简写的方式：
将12~14行简写成第15行。结果依然是和图5一样！
4.2内边距 padding
通过使用padding来设置内容和边框之间的距离
基础写法：
默认内容是顶着边框来放置的，用padding来控制这个距离
可以给4个方向都加上边框
- padding-top
- padding-botton
- padding-left
- padding-right
图6
图7
注意啊，上图6的红框部分，设置的是盒子的高度和宽度，并不是字体大小。如果还是不明白，下面给你举例：如果删除红框部分，
则浏览器中显示：
继续回到图6和图7，如果我现在，想要让这行文字左边距离边框是留白，上面距离边框是留白，如下图8所示，红框区域内是留白，只在梅粉色区域内显示文字，该如何？可通过padding
图8
padding的话，根据图8要求，设置padding-left和padding-top：
那么除了这种写法，还有一种复合写法：
复合写法：
padding:5px;代表四个方向都是5px
padding:5px 10px;代表上下是5px 左右是10px
padding:5px 10px 20px;代表上下是5px 左右是10px 下是20px
padding:5px 10px 20px 30px;代表上5px 右是10px 下是20px 左是30px
但是上图你会发现它的大小又变成了是大概230x120，所以这时候加上box-sizing
4.3外边距
基础写法
外边距是用来控制盒子和盒子之间的距离
可以给4个方向都加上外边距
- margin-top
- margin-botton
- margin-left
- margin-right
上图代码中我写了3个div，则浏览器：
根据上图浏览器中显示的结果可知，写的3个div全都挤在一起了，相当于是外边距为0，因为浏览器里面是默认外边距为0，那么我们可以自己来设置外边距
复合写法：
margin:10px;四个方向都设置
margin:10px 20px;上下是10 左右是20
margin:10px 20px 30px;上是10 左右是20 下是30
margin:10px 20px 30px 40px;上是10 右是20 下是30 左是40
块级元素水平居中：
浏览器中显示：
这个边框并没有居中，所以我们就需要通过：
margin:auto;来将这个边框居中！
但是它只是让边框居中了，并不会让文字居中：
那么如何让文字居中呢？
通过使用text-align:center
那么还可以写margin-left:auto和margin-right:auto，如下图所示14 15行内容可替代12行内容
去除浏览器默认样式：
浏览器会给元素加上一些默认的样式，尤其是内外边框，不同浏览器的默认样式存在差异，为了保证代码在不同的浏览器上都能按照统一格式显示，往往会通过去除默认样式这个方法：
使用通配符选择器即可完成此事：
五.弹性布局
1.
但是这个红色区域的高度宽度和我设置的不一样：
原因是span会根据元素内容的大小而进行改变
那么通过在div中加上：display:flex
2.常用属性（写在div中，因为规定这些属性一定要加在子标签的父级元素上）
（1）使用justify-content来设置主轴上元素排列方式
（2）通过使用align-items来设置侧轴上的元素排列方式
六.广告板实现
图9
注意：图9中老师的++思路++是：可以将广告板外面的边框看作为是一个div，然后广告版这3个字那一行也可以看作为是一个div，下面的四行"赔钱......优惠"也可以看作为是一个div
然后还提供人家测量好的数据：
图10
- 图10第3行，文字大小font-size，文字颜色color，行高line-height，上方边距padding-top
- 图10中的第2点，标题区域高度40px，代表标题距离边框为40px，也就是内边框距离。至于圆点的英文不知道，可以打开W3cschool网站进行查询：
当然，在写这个页面之前有2个注意事项：
开始写代码：
首先注意上图的12行的.item，这里注意，写了它之后点击回车，就会是：
所以这种写法也算是个快捷键，当然上图的第9行~11行也是诸如此类的方法获得！
基本框架代码：
上图是基本框架，接下来给他加对应的css让他去实现预期结果！（根据图10）
全部代码：
七.百度热榜实现
预期效果:
图11
图11当中第2点，加粗，其实不用，因为在代码中是将它这一行设置成表头，而表头是自动加粗的，如果你想加粗也可以写font-weight:bolder
第3点上下边距就是 line-height，下边框就是每行句子下面那个浅灰色的线，
图12
本题中新加一个知识点：
展示属性 display:inline-block;
如果设置了上面这行内容，意味着这样一个元素是行内块级元素，那么就可以针对它进行样式设置了
最初代码框架：
其中第36行需要注意单词之间要有空格
浏览器中：
现在通过复制部分内容，完成下面内容：
则浏览器中显示：
