css基础知识：字体和文本相关属性以及框模型（盒模型）基础概念 - web前端学习

首页 > 博客列表 > css基础知识：字体和文本相关属性以及框模型（盒模型）基础概念

博主信息

博文 145

粉丝 7

访问量 202253

专题推荐

更多>

笔记整理-知识点

一、字体相关属性(font)
1、字体族：font-family:设置字体族，可以设置多个用空格分开，多个单词的字体族需要加双引号分界符；通用字体族：衬线字体、无衬线字体、等宽字体、草书字体、艺术字体
2、font-size:设置字体大小，单位px、%、em(相对于父级)、rem（相对于根）
3、font-weight:设置字体粗细，值：normal、bold、bolder、lighter；
4、font-style:设置字体样式：normal、italic、oblique；
5、font-variant:设置字体变形，值：normal、small-caps;
5、font：字体相关熟悉缩写：font-size、font-family必选值，顺序固定，在最后；前面的值为可选，顺序任意
6、@font-face{}:自定义字体，属性值于字体相同，src为必选（新增），font-family也是必选；src属性中常用关键字：url|local、format;

@font-face{
font-family:"字体名"；
src:local("检测本地字体有无，友则优先加载")，url("字体路径可以支持远程加载")format("是否允许跳过不支持下载的字体opentype|truetype");
}

7、font-size:还可以同时设置行高，例如：font-size:12px/1.2;

二、文本相关属性
1、文本常用属性：text-indent:设置文本块首行缩进，允许负值常见单位：em、rem、%；
2、text-align:设置文本行内对其方式：right center left css3新增start end justify;
3、vertical-align:设置文本垂直对齐：super、top、bottom、baseline、sub、middle、text-top|buttom(元素与父级元素顶|底部对齐)
4、line-height:设置行高，不设置依据父级font-size自动计算；值与font-size相同；
5、word-spacing:设置单词间距；normal px
6、text-decoration:设置文本修饰

属性	描述
none	默认。定义标准的文本
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
blink	定义闪烁的文本
inherit	规定应该从父元素继承 text-decoration 属性的值。

7、overflow-wrap:文本溢出换行

属性	描述
normal	允许内容顶开或溢出指定的容器边界
break-word	内容将在边界内换行

8、中文文本书写方式：
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr：垂直方向内内容从上到下，水平方向从左到右
sideways-rl：内容垂直方向从上到下排列
sideways-lr：内容垂直方向从下到上排列

三、盒子模型相关属性
1、框模型：

序号	名称	描述
1	内容区`content`	必须要有,它的四周区域是可选的width，height
2	内边距`padding`	内容与边框之间的填充区域；透明；控制盒子大小
3	边框`border`	边框可以将内容区与外界进行隔离；可以设置样式和颜色，一般颜色和前景色和文字颜色一致
4	外边距 `margin`	多个盒子之间的间隙透明；可以设置负值，最大的为准

2、box-sizing:content-box（撑大盒子）|border-box（content自适应盒子大小）;设置盒子的边界
3、轮廓outline: 位于 border 与 margin 之间,因为不占空间；
4、通过margin：auto;可以设置盒子水平居中，但无法设置垂直居中；margin设置上下外边距auto,浏览器会转换为0；
5、浮动和定位：

a、float:left|right|设置盒子浮动
b、postion:fixed|relative|absolute|static默认值：设置盒子位置
代码练习：
1、代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body p {
        writing-mode: vertical-lr;
        background-color: red;
        /* text-orientation: mixed; */
      }
      .box1 {
        width: 400px;
        height: 400px;
        background-color: #ff00ff;
        margin: 10px auto;
        position: relative;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: #ffff00;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      .box3 {
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        margin: auto;
      }
      .box4 {
        width: 50px;
        height: 50px;
        background-color: #00ff00;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <p>中华任命共和国</p>
    <div class="box1">
      <div class="box2">
        <div class="box3">
          <div class="box4"><p>中</p></div>
        </div>
      </div>
    </div>
  </body>
</html>

2、运行效果图

总结：

1、字体和文本相关属性在使用过程容易忽视，但使用起来效果也非常nice!例如中文，竖版排列；
2、盒子模型是网页布局的基础知识，需要重点理解
3、float和position虽然以后不经常使用，但在有些方面微调使用起来还是非常方便的例如{position：relative;top:10;left:10;}

批改老师：

天蓬老师

批改状态：合格

老师批语：很好

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

12月29日练习：php中文网footer案例（组件footer）

2019-12-29 13:35:19

笔记整理-知识点

代码练习：

总结：