今天是我在乐字节学习的第四天，今天也是元气满满的一天。
我们一起来回顾下今天的学习的内容，今天学习的内容比较基础，我学的也比较轻松。下面给大家分享下我一天的学习成果吧！！！！
第一个重头戏是标签的类型(显示模式)
第二个是css三大特性
第三个是css背景
一 ：标签的显示模式：display
块级元素：block
行内元素：inline
行内块级元素：inline-block
快元素：通常都会独占一行或多行，可以对他进行设置长，宽，对齐等属性，用于网页布局和网页结构的搭建
常见的快元素
-,
,
,- ,
-
- ,div是最常见的快元素
行内元素：不占独立的 区域，一般靠自身的文字大小和图像尺寸来支撑结构，一般不可用设置长，宽，对齐等属性，常用于控制页面中文字的样式
常见的行内元素： , ,,,sapn是最典型的行内元素
下面我们来对比一下行内元素和快元素
块元素特点：
1：总是从新开始
2：可以设置宽高，内边距，外边距等属性
3：默认宽度是浏览器的宽度
4：快元素可以容纳行内元素和其他快元素
行内元素的特点：
1：和相邻行内元素在一行上
2：不可用设置宽高，但是可以设置padding，margin，但是在垂直方向无效
3：默认宽度就是他自身内容宽度
4：行内元素只能容纳文本或其他行内元素，a除外
5：链接里面不能再放链接
这里着重看一下第4点：
在行内元素p里面放了一个快元素
但是在浏览器解析的时候，就会变成这样
其实行内元素和块元素也不是一成不变的，他们之间存在转化关系：
我们先来看一下几个标准的行内块元素： ,,,
行内块元素的特点：
1：和相邻行内元素（行内块）在一行上，但是之间会出现空白缝隙
2：默认宽高就是他本身内容的宽高
3：宽高，行高，内外边距都可以控制
之前做的一个网页，这里出现差错，当时不知道为什么现在通过系统的学习，终于知道了，看原博文
https://blog.csdn.net/qq_38845858/article/details/83050656
标签显示模式的转化(display)
行内转快 ： display:block;
快转行内：display:inline;
快,行内转行内块：display:inline-block；
我们先看一下行高：行高的作用就是让盒子里面的文字垂直居中，做法就是让文字的高度等于盒子的高度
我们先了解一下什么是行高
二：CSS三大特性
层叠性，继承性，优先级
层叠性：层叠性就是多个css样式重叠
原则是就近原则
继承性：当两个标签具有父子关系的时候，儿子一般会继承父亲的属性
优先级：这里涉及到权重问题，权重大的，优先级高，优先执行
如果标签有自己的属性，先执行自己的，此时权重，优先级,继承都靠边站
三：css背景
下面w3c复制来的
背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
背景定位
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
我们来看一个利用背景定位的小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a {
width: 60px;
height: 49px;
display: block;
background: url(img/a.png) no-repeat left top;
}
a:hover {
background-position: left bottom;
}
</style>
</head>
<body>
<a href=""></a>
</body>
</html>
本来是一张很大的图，但是给了他固定的匡高，他就会只显示一部分。当鼠标经过的时候，变换他的位置。很好的做到了切换
4：背景透明css3属性
background ： raba（0,0,0,0.1）取值范围在0-1之间
5：盒子模型：
css三大模块：盒子模型，定位，浮动，其他都是细节。
盒子模型：边框，内边距，外边距
边框： border: 1px solid black; 记住书写顺序就ok
表格细线边框：当我们表格挨表格，很容易出现表格叠加，这时候，很粗，很难看，怎么让他变细呢，
cellpadding=“0” cellspacing=“0”
直的边框太难看，学一个圆角边框
border-radius: 50%;
内边距
padding：边框和内容的距离，设置padding，是从内往外撑开的
外边距
margin：边框和边框的距离
下面看个小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<style type="text/css">
body {
background: #f4f4f4;
}
.nav {
width: 570px;
height: 360px;
border: 1px black solid;
margin: 0 auto;
margin-top: 230px;
border: 1px solid #000;
}
.title {
margin-left: 15px;
margin-right: 15px;
}
h1 {
margin-bottom: 0px;
}
h3 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px black dashed;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="nav">
<div class="title">
<h1>最新文章/New articles</h1>
<hr />
<h3>招聘网页设计</h3>
<h3>招聘全栈工程师</h3>
<h3>招聘大数据研发</h3>
</div>
</div>
</body>
</html>
效果图：