盒模型，CSS文本字体属性

时间：2020-12-21 22:33:10 收藏：0 阅读：52

基础选择器

通配符选择器

* {
     width: 200px;
     height: 200px;
     
}

标签选择器

div {
     width: 200px;
     height: 200px;
     
}

class选择器
- ```
.box {
    
}
```
- 可以包含多个类选择器，用空格分开
id选择器
- ```
#div1 {
    font-size:20px;
}
```
- 同一个文本唯一
优先级
- id选择器>class选择器>标签选择器>通配符选择器*

文本字体属性

css字体属性
- font-size
  - 设置字体的大小，浏览器默认是16px, 最小设置不能小于12px (1px-11px跟12px的大小是一样的)
- font-family
  - 设置文本的字体系列，如果属性值包含中文或者空格，要加引号，回退系统（备用字体），假如浏览器不支持第一个字体，第二个字体可以生效。
  - serif -- 衬线字体
    - 宋体（SimSun）
      - Windows 下大部分浏览器的默认中文字体，是为适应印刷术而出现的一种汉字字体。笔画有粗细变化，是一种衬线字体，宋体在小字号下的显示效果还可以接受，但是字号一大体验就很差了，所以使用的时候要注意，不建议做标题字体使用。
    - Times New Roman
      - Mac 平台 Safari 下默认的英文字体，是最常见且广为人知的西文衬线字体之一，众多网页浏览器和文字处理软件都是用它作为默认字体。
  - sans-serif -- 无衬线字体
    - 微软雅黑（Microsoft Yahei）
      - 大名鼎鼎的微软雅黑相信都不陌生，从 windows Vista 开始，微软提供了这款新的字体，一款无衬线的黑体类字体，显著提高了字体的显示效果。现在这款字体已经成为 windows 浏览器最值得使用的中文字体。
    - 华文黑体（STHeiti）、华文细黑（STXihei）
      - 属于同一字体家族系列，MAC OS X 10.6 之前的简体中文系统界面的默认中文字体，正常粗细就是华文细黑，粗体下则是华文黑体。
    - 黑体-简（Heiti SC）
      - 从 MAC OS X 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体，苹果生态最常用的字体之一，包括 iPhone、iPad 等设备用的也是这款字体。
    - 冬青黑体（Hiragino Sans GB）
      - 又叫苹果丽黑，Hiragino 是字游工房设计的系列字体名称。是一款清新的专业印刷字体，小字号时足够清晰，Mac OS X 10.6 开始自带有 W3 和 W6 。
    - Helvetica
      - 被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica 是苹果电脑的默认字体，微软常用的Arial 字体也来自于它。
    - Arial
      - Windows 平台上默认的无衬线西文字体，有多种变体，比例及字重（weight）和 Helvetica 极为相近。
    - Verdana
      - 无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。
    - Tahoma
      - 十分常见的无衬线字体，字体结构和 Verdana 很相似，其字元间距较小，而且对 Unicode 字集的支持范围较大。许多不喜欢 Arial 字体的人常常会改用 Tahoma 来代替，除了是因为 Tahoma 很容易取得之外，也是因为 Tahoma 没有一些 Arial 为人诟病的缺点，例如大写“i”与小写“L”难以分辨等。（这里故意反过来写）。
  - monospace -- 等宽字体
    - Consolas
  - fantasy(梦幻)
  - cursive(草体)
- font-style
  - 设置文字字体样式
    - normal 正常显示
    - italic 斜体显示
- font-weight
  - 设置字体的粗细
    - lighter 细体 100
    - normal 默认，标准的字体 400
    - bold 粗体 700
    - bolder 粗体 900
    - 100-900
- line-height
  - 设置行高
    - normal 默认，合理的行高
    - length 设置固定的行间距
    - number 设置数字，此数字与当前字体尺寸相乘的结果
  - 单行文本垂直居中
    - ```
    .box {
                width: 300px;
                height: 200px;
                background-color: red;
                font-size: 30px;
                /* 设置文本水平居中 */
                text-align: center;
                /* 设置行高和盒子高度一致，单行文本垂直居中 */
                line-height: 200px;
            }
```
- font: font-style font-weight font-size/line-height font-family
  - 注意：只有同时具有font-size和font-family的值时，简写才生效
css文本属性
- color
  - 设置文本的字体颜色
- text-align
  - 设置文本的水平对齐方式，默认都是左对齐，相对于标签本身的宽度来对齐的
    - left 默认多对齐
    - center 居中对齐
    - right 右对齐
    - justify 设置文本两端自动对齐
- text-decoration
  - 设置文本的装饰
    - none 默认，没有装饰
    - underline 定义文本下的一条线
    - overline 定义文本上的一条线
    - line-through 定义贯穿文本的一条线
- text-indent
  - 设置文本的首行缩进

css长度单位和颜色表示

css长度单位：
- px
  - 像素值，绝对长度单位
- em
  - 相对长度单位，相对于当前元素本身的font-size
  - 如果作用于font-size, 那就相对于父标签的font-size
- %
  - 百分比，相对于父标签
- rem
  - 相对于根元素（html）的font-size, 一般作用于移动端
css颜色表示 :
- 英文单词 (red blue green)
- 六位的十六进制数 #RRGGBB
  - 如果 #aabbcc 可以简写为 #abc
    - 可以设置为8位，最后两位代表透明度 (00 - ff)
- rgb(r,g,b)
  - 三种整数 0 - 255
  - 三个百分比
  - rgba(r,g,b,alpha)
    - alpha 可是设置 0 到 1的小数，代表透明度

盒模型的概念

概念：css盒模型本质是一个盒子，封装周围的html标签，它包括：外边距，边框，填充（内边距）和实际内容
内容 content :
- width: 设置宽度
- height: 设置高度
内边距（填充区域）padding ：
- 单边内边距：padding-top padding-bottom padding-left padding-right
- 简写 :
  - 一个值：表示四个方向的内边距值。
  - 两个值：分别表示上下，左右的内边距值
  - 三个值：分别表示上，左右，下的内边距值
  - 四个值：分别表示上，右，下，左的内边距值
边框 border :
- border-width
- border-style :
  - none 定义无边框
  - dotted 定义点状边框
  - dashed 定义虚线边框
  - solid 定义实现边框
  - double 定义双线。双线的高度等于border-width的值
- border-color
border: 1px solid red;
外边距 margin :
- 单边外边距： margin-top margin-bottom margin-left margin-right
- 简写：
  - 一个值：表示四个方向的外边距值。
  - 两个值：分别表示上下，左右的外边距值
  - 三个值：分别表示上，左右，下的外边距值
  - 四个值：分别表示上，右，下，左的外边距值
外边距传递和塌陷
- 给父级设置边框或内边距
- 给父级设置溢出隐藏 overflow:hidden,实际上是触发BFC

实用小技巧

    <style>
        .div1 {
            width: 100px;
            height: 100px;
            border-width: 50px;
            border-style: solid;
            border-color: red yellow green blue;
        }
        .div2 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: red yellow green blue;
        }
        .div3 {
            width: 0;
            height: 0;
            border-width: 200px 200px 0 0;
            border-style: solid;
            border-color: red yellow green;
        }
        .div4 {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: red transparent transparent transparent;
        }
    </style>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>

原文：https://www.cnblogs.com/zxy37/p/14168171.html

盒模型，CSS文本字体属性

基础选择器

文本字体属性

css字体属性

css文本属性

css长度单位和颜色表示

css长度单位：

css颜色表示 :

盒模型的概念

实用小技巧