2020-11-09

CSS基础知识2

1. 行高
   ——什么是行高？
   他是一行文字实际占用的高度。
   取值方式：px，百分比。
   百分比：按照默认的字体大小取值。

特殊用法：
要让一行文字垂直居中，可以将行高设置为盒子高。（多行文字失效）
行高，字号一般都是偶数。

2. 字号字体
   ——网页中，中文主要使用的字体：微软雅黑，宋体，黑体。
   英文：Arial，Consolas

   英文在前，中文在后。

   微软雅黑：Microsoft Yahei
   宋体：SimSun
   黑体：SimHei
   —取值方式：数字，单词
   数字：100-900；
   单词：lighter normal,bold,bolder
   fwb:font-weight: bold;
   fw:font-weight: normal;
   italic :跟字体样式有关系，oblique斜体
   font: 30px/60px “Consolas”;
   必须写的两个值 字号 字体

3. 字体大小
   font-size: 32px;
   }
   p{
   /* 取值：单词，em，px，百分比 /
   / font-size: xx-small; /
   / font-size: xx-large; /
   / font-size: 48px; /
   / font-size: 1em; */
   font-size: 200%

4. 段落
   ——— /* 设置文本居中方式 */
   text-align:center;

   /* 首行文本缩进 em px 百分比 /
   text-indent: 2em;
   / 文本修饰
   none，正常，默认值。
   underline:下划线。
   overline:上划线。
   line-through:中划线。
   /
   / text-decoration: line-through; /
   color: green;
   / 单词间间距： 中文无效。 /
   / word-spacing: 48px; /
   / 单个字母间的间距 /
   / letter-spacing: 48px; /
   / 大小写转换 */
   text-transform: lowercase

5. 基线
   ——margin: 0;
   padding: 0;
   }
   div{
   border: 1px solid red;
   }
   img{
   /* 基线对齐 */
   vertical-align: bottom;

6. 盒模型
   ————标准盒模型
   什么叫盒子？
   一个元素在页面中真实占据的位置。
   五个部分：内容的宽，内容的高，内边距，边框，外边距。

宽：width px；
高：height px；
定义的内容的宽和高。

padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的
11. padding
——padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的。

可以给单边设置内边距:
padding-left: 50px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 60px;

四值法：
单值：上下左右。
双值：上下 左右。
三值：上 左右 下
四值：上 右 下 左 顺时针。

12. 边框
    ————width: 300px;
    height: 300px;
    background-color: pink;
    margin: 40px;
    三要素写法：
    宽度，样式，颜色

    单一方向设置

13. 倒三角
    ————width: 0px;
    height: 0px;
    border: 20px solid white;
    border-bottom: none;
    border-top-color: green;
    }
    /* 1.设置边框，然后将内容宽高设置为0
    2.取消底部边框。
    3.将左右边框的颜色改为white。（透明色）

14.margin
————外边距
两个盒子之间的距离。

15. 补充
    ————假如有一个padding/border/margin 与其他的三条边不同，其他三条边一样，这个时候我们设置总体样式，再单独去设置它的样式

水平居中（必须有宽度）
有一些标签会有默认的样式，比如默认的margin。