字体相关CSS属性
字体相关CSS属性介绍
font-family
字体系列。
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
简单实例：
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
如果设置成inherit，则表示继承父元素的字体。
font-weight
字重（字体粗细）。
取值范围：
font-size
字体大小。
p {
font-size: 14px;
}
color
设置内容的字体颜色。
支持三种颜色值：
- 十六进制值 如: ＃FF0000
- 一个RGB值 如: RGB(255,0,0)
- 颜色的名称 如: red
p {
color: red;
}水平对齐方式
text-align 属性规定元素中的文本的水平对齐方式。
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
文本其他操作
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
背景属性
常用背景相关属性：
background-repeat取值范围：
background-attachment取值范围：
background-position取值范围：
示例：
body {
background-color: red;
backgraound-image: url(xx.png);
background-size: 300px 300px;
background-repeat: no-repeat;
background-position: center
}
简写：
body {
background: red url(xx.png) no-repeat fixed center/300px 300px;
}盒子模型
content：也就是实际的内容的[文字、图片](实际指的是内容的高度和宽度)
border：是边框，也就是包裹盒子的边，或边缘（边框包裹内容和内边距，它可以有宽度他也有4个方向）
padding：是内容到边框的距离，可以有上、下、左、右（内容距离盒子内边缘的举例它有4个方向）
margin：外边框可以理解为，边框的扩展还需要占用多大的空间，也是上、下、左、右（不同的盒子边框外边缘距离另一个盒子边框外边缘的距离）
模型兼容性问题
1、margin值：如果两个盒子是上下排布，上面的盒子给margin-bottom值，下面盒子给margin-top值那么盒子之间的实际值不是它们相加的和而是取最大值，这里有个特殊的当它们float起来后其值为和
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
border: 2px solid red;
margin-bottom: 30px
}
.box2 {
border: 2px solid blue;
margin-top: 10px
}
</style>
</head>
<body>
<div class="box1"> Box1 </div>
<div class="box2"> Box2 </div>
</body>
</html>
padding
padding有四个方向，分别描述4个方向的padding。
描述的方法有两种
1、写小属性,分别设置不同方向的padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
2、写综合属性，用空格隔开
/* 上 右 下 左 */ padding: 20px 30px 40px 50px ; /* 上 左右 下 */ padding: 20px 30px 40px; /* 上下 左右 */ padding: 20px 30px; /* 上下左右 */ padding: 20px;
一些标签默认有padding
比如ul标签，有默认的padding-left值。
那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
我们现在初学可以使用通配符选择器
*{
padding:0;
margin:0;
}
But，这种方法效率不高。
所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）
https://meyerweb.com/eric/tools/css/reset/
边框
border:边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色
border: solid
如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
按照3要素来写border
border- 3px; border-style: solid; border-color: red; /* border- 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow; */
按照方向划分
border-top- 10px; border-top-color: red; border-top-style: solid; border-right- 10px; border-right-color: red; border-right-style: solid; border-bottom- 10px; border-bottom-color: red; border-bottom-style: solid; border-left- 10px; border-left-color: red; border-left-style:solid;
上面12条语句，相当于 bordr: 10px solid red;
另外还可以这样：
border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10px solid red;
margin
margin：外边距的意思。表示边框到最近盒子的距离。(兄弟之间)
/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; margin-bottom: 100px;
float属性
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
标准文档流下 有哪些微观现象？
1.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，
如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
2.高矮不齐，底边对齐
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
3.自动换行，一行写不满，换行写
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
只有绝对定位absolute和浮动float才会脱离文档流。
---部分无视和完全无视的区别？需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)
浮动的表现
定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
注意 当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
清除浮动
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
html效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
1126px;
/*子元素浮动 父盒子一般不设置高度*/
/*出现这种问题，我们要清除浮动带来影响*/
/*height: 300px;*/
}
.box1{
200px;
height: 300px;
float: left;
background-color: red;
}
.box2{
300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
400px;
float: left;
height: 100px;
background-color: blue;
}
.father2{
1126px;
height: 400px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
</body>
</html>
清除浮动的方法
- 给父盒子设置高度
- 伪元素清除法
- overflow：hidden
给父盒子设置高度
这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
400px;
/*给父盒子设置高度，这种方式不灵活。如果哪天公司产品突然要改，要求父盒子高度变大，
而且不仅一个地方哦，那么我们不可能去找源码去手动修改*/
/*固定导航栏*/
height: 40px;
}
ul{
list-style: none;
height: 40px;
}
div ul li {
float: left;
100px;
height: 40px;
background-color: red;
}
.box{
200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<ul>
<li>Python</li>
<li>web</li>
<li>linux</li>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
伪元素清除法(常用)
.clearfix:after{
/*必须要写这三句话*/
content: '.';
clear: both;
display: block;
}
/*
新浪首页清除浮动伪元素方法
*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
水平居中盒子
div{
780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
善于使用父亲的padding，而不是margin
下面这个代码应该是大家都会去写的代码。
*{
padding: 0;
margin: 0;
}
.father{
300px;
height: 300px;
background-color: blue;
}
.xiongda{
100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
因为父亲没有border，那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了，一旦给父亲一个border发现就好了。
那么问题来了，我们不可能在页面中无缘无故的去给盒子加一个border，所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。
雪碧图技术（精灵图技术）
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分
CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？
其实就是 截取 大图一部分显示，而这部分就是一个小图标。
使用雪碧图的好处：
1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便
不足：
1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印
通天banner
什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，
那么我们可以此属性来制作通天banner。
background: red url('./images/banner.jpg') no-repeat center top;
background-attach
设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动