CSS 字体 文本 过渡 盒子初步

12.17 学习笔记
主要内容：
1.CSS字体样式
2.CSS文本样式
3.CSS使用过渡
4.盒子初步

一.CSS字体

1 font-size :字体大小
2.font-family:样式（后加字体名称）
3.font-style:倾斜
4.font-weight:加粗


将文本字体设置成大小为50px,加粗，倾斜，字体为times new roman.

---

二.CSS 文本

1.color:文本颜色
2.text-align：对齐
3.text-decoration:文本线【underline:下划线，line-through:中划线，overline:上划线，none:无】
4. text-indent： 首行缩进
5. letter-spacing:字与字之间的距离
6. word-spacing:单词与单词之间的距离
7. line-height:行高（让行高和高度相同，内容会垂直居中。）

p.s ：
1.text-align用于左右居中，line-height用于上下居中


设置一个宽度为200px,高度为300px的边框，文本内容用text-align：center;设置为居中，发现文本只是左右居中。

再用line-height: 300px;语句，将行高设置成和文本框一样的高度，即可实现上上下居中。
2.由于文本内容本身就不带划线，因此语句text-decoration:none;主要用于 标签中将下划线去掉。

三.CSS过渡效果

   div:hover{
        width: 200px;
        height: 200px;
        background: cornflowerblue;
        transition-delay: 250ms;
        transition-duration: 500ms;
        transition-property:all
    }

这段代码中的作用是用冒号选择器的hover，实现鼠标放到div标签的绿色区域内时，此区域逐步曾大成下图的蓝色区域。
transition-delay表示当鼠标放到div的区域内时，要过250ms后才开始变化，有一个延迟。
transition-duration表示变化总时长为500ms.
transition-property:all 表示长宽和颜色所有参数都是逐渐变化。

（这个是由小变大的一个逐步过程，截图无法实现，只能展示开始和最终的效果）

四.盒子初步

能放内容的就是盒子。盒子就是一个元素（标签）的管辖范围。简单来说，就像是一个矩形区域。我们说网页中的东西都是矩形的。

一个网页也就是由无数的盒子构成的，一个大的盒子可以划分成若干个小盒子构成.

盒子模型主要是用于网页的排版的一种思维模型

1.盒子的属性

盒子的构成：
内容区域（content）
内边距区（padding)
边框（border）
外边距区（margin）

特别注意：
1.一般情况下，一个盒子中放置内容或其他元素（元素也是盒子），实际是放在内容区的。
2.平时我们浏览网页时看不到内边距，边框和外边距，是因为他们大部分默认都是0（宽度或厚度）。
3.平时我们说的盒子大部分时候指代的是

.

2.盒子的宽高属性

设置盒子的宽高属性，实际上设置的是盒子内容区的宽高。

padding指的是内容到boder的空白距离，四个数值分别是上，右，下，左（顺时针顺序）。
margin是border到四周的距离。

---

将div设置成整个文档的大小。（把div，body和HTML标签的width都设置成100%，表示占满。）

注解：

1. 默认body的内容（content）为0，随着里面内容的添加，内容一点点变大。
   1.HTML标签比body标签的范围大，中间会有外边距区（margin），因此要设置body标签中的width:100%，并且设置margin，padding：0px
   2.比HTML标签更大的是文档，可以理解成整个页面，因此要设置HTML的width：100%。
   3.行内元素不可以设置宽高。
   
   

• 盒子所占宽：
  margin-left+border-left+padding-left+width+padding-right+border-right+margin+right
• 盒子所占高：
  margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom