CSS字体、文本属性以及盒模型

最新推荐文章于 2022-09-16 09:50:08 发布

程序媛Render

最新推荐文章于 2022-09-16 09:50:08 发布

阅读量318

点赞数 2

分类专栏： css 前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_46492364/article/details/114633056

版权

前端学习同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

前言

今天学习第二模块啦，今天的任务和内容比较多的啊，主要包括css的常用样式和盒模型。接下来见证我的学习过程吧！

一、css常用样式字体属性

1.font-weight

作用：设置文字是否加粗
属性名：font-weight，属于font属性的一个单一属性
属性值：单词类型，数字类型。
（1）单词类型：
normal，默认值定义标准的字体
bold，定义粗体字符（b，strong是粗体显示）
bolder，定义更粗的字体
lighter，定义更细的字体
代码如下（示例）：

.ps1 {
            /* font-weight: bold; */
            font-weight: lighter;
        }

（2）数字类型：
100~900间的整百数字，数字越大文字越粗。400=normal 700=bold。
代码如下（示例）：

.ps1 {
            font-weight: 700;
        }

2.font-style

作用：是否斜体或者倾斜显示
属性名：font-style，属于font的单一属性。
属性值：normal，正规字体
italic，设置斜体，主要针对英文（手写字体设置）
oblique，设置倾斜的文字，将文字倾斜显示，与字体无关。

代码如下（示例）：

.normal {
    font-style: normal;
}
.italic {
    font-style: italic;
}
.oblique{
    font-style: oblique;
}

3.line-height

作用：设置一行文字实际占有的高度。在行高中是垂直居中显示的。
属性值：px像素值，设置行高具体像素
百分比数值，设置本身字号像素的百分比。
例：自身像素14px；则100%=14 200%=28
代码如下（示例）：

div {
            font-size: 14px;
            line-height: 26px;
            line-height: 200%;
        }

实际应用：行高的数值是通过设计图获取，量取数值时需要使用一些辅助工具软件。这里使用（FW，firework）
量取行高的步骤：
1.确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。
2.根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值。

4.font综合属性

字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性五个属性可以进行和写，属性值可以有2到多个，值之间用空格进行分隔。
写法1：
font进行综合书写时，必须有字号和字体参与，并且必须字号在前，字体在后，不能颠倒顺序。
写法2：
按字号、行高、字体顺序书写，字号和行高之间必须用/尽心分隔。
写法3：
加粗和斜体只能写在最前面，两个值之间可以互相换位置。后面的字号、行高、字体不能更改位置。
代码如下（示例）：

p {
        /* font: 14px "宋体"; */
        /* font: 14px/28px "宋体"; */
        font: bold italic 14px/28px "宋体";
    }

二、文本属性

1.水平对齐text-align

作用：设置文本水平方向的对齐。
在盒子中不论是单行还是多行，都会对应方向对齐。
属性值：三个方向的单词
left，居左对齐；center，居中对齐；right，居右对齐
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 300px;
            height: 300px;
            background-color: aqua;
            text-align: right;
        }
    </style>
</head>
<body>
    <p>
        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
        这是一段文字这是一段文字这是一段
    </p>
</body>
</html>

2.文本修饰text-decoration

作用：设置文本整体是否有线条的修饰效果。
属性值：none，没有修饰，默认值
overline，上划线
line-through，中划线，删除线，del标签的默认值
underline，下划线，a标签的默认值
代码如下（示例）：

.none {
            text-decoration: none;
        }
        .overline {
            text-decoration: overline;
        }
        .line-through {
            text-decoration: line-through;
        }
        .underline {
            text-decoration: underline;
        }

显示效果：
在这里插入图片描述

3.文本缩进text-indent

作用：设置段落首行是否进行缩进。
属性值：px单位，数值是多少表示向右缩进多少像素。
em单位，参考一个文字的宽度，首行缩进几个中文字符的位置。
百分比，表示所缩进文字所在的标签的父级标签的width属性的百分比。
代码如下（示例）：

/* text-indent: 100px; */
text-indent: 2em;
/* text-indent: 50%; */

实际工作中使用em更加多。属性值区分正负数的，正数表示向右缩进，负数表示向左方向。

三、盒模型

盒模型又叫做框模型，包含了五个用来描述盒子位置、尺寸属行，分别是width、height、padding、border、margin。
在这里插入图片描述
常见盒模型的区域：
书写元素内容区：width height
盒子实体化区域：width height padding border
盒子实际占位置：width height padding border margin

1.宽度width

作用：设置添加元素内容区域的宽度
属性值：auto，默认值，浏览器可自动计算出实际宽度
px，像素值定义宽度
百分比，参考父元素宽度的百分比宽度。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* width: auto; */
            width: 200px;
            background-color: aqua;
        }
        p {
            width: 80%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>这是一个段落标签</p>
    </div>
</body>
</html>

特殊应用：
1.如果一个元素不添加width属性，默认就会为auto，不同的浏览器会根据其特点自动计算出实际宽度，例div元素独占一行，其width属性的值会自动撑满父元素的width区域，如果是span元素等不需要独占一行，其width会按内部内容的尺寸而撑开的。
2.body元素不需要设置width，宽度会自适应浏览器窗口的宽度。

2.高度height

作用：添加元素内容的区域的高度。
属性值：auto，默认值，浏览器可自动计算出实际宽度
px，像素值定义宽度
百分比，参考父元素宽度的百分比宽度。
代码如下（示例）：

.box {
            /* width: auto; */
            width: 200px;
            height: 200px;
            /* height: auto; */
            
            background-color: aqua;
        }
        p {
            /* width: 80%; */
            height: 50%;
            background-color: blue;
        }

特殊应用：
如果一个元素不添加width属性，默认就会为auto，不同的浏览器会根据其特点自动计算出实际高度，元素的高度自适应内部内容的高度。

3.内边距padding

作用：设置的是元素边框内部到宽高之间的距离。
特点：可以去加载背景，不能书写前套内容。
属性值：常用px为单位
padding是一个复合属性，可根据内边距的方向不同划分4个不同方向的单一属性。
padding-top
padding-right
padding-bottom
padding-left
写法1（示例）：

padding-top: 40px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 40px;

写法2（示例）：

padding: 40px 20px 30px 40px;

四值法：padding: 40px 20px 30px 40px;上右下左
三值法：padding: 40px 20px 30px;上左右下
二值法：padding: 40px 20px；上下左右
单值法：padding: 40px；上下左右都分配40像素。

4.边框border

作用：内边距外面的边界区域，作为盒子实体化的最外层。
属性值：三个值组成，线宽度、形状、颜色。
是一个复合属性，有多种单一属性的写法。
代码如下（示例）：

 border: 10px solid blue;

（1）border-width
设置边框线的宽度，四个值
（2）border-style
设置线形状，属性值如下。
在这里插入图片描述
代码如下（示例）：

 border-style: dashed solid dotted double;

（3）border-color
作用：设置边框颜色
属性值：颜色名或颜色值。整体类似padding
代码如下（示例）：

border-color: blue red yellow gray;

每个单一属性都与复合属性一致，三个属性值。
代码如下（示例）：

border-top: 10px solid blue;

单一属性的再次划分，border-方向-类型
代码如下（示例）：

 border-top-color: red;

5.外边距margin

作用：设置盒子和盒子之间的距离。
特点：不能渲染背景。常用px作为单位，设置方式与padding是一模一样的。
在这里插入图片描述
代码如下（示例）：

 margin: 50px;

四、盒模型扩展

1.清除默认样式

在这里插入图片描述
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        body,div,h1,h2,ul,ol,li {
            margin: 0;
            padding: 0;
        }
        ul,ol {
            list-style: none;
        }
        a {
            color: black;
            text-decoration: none;
        }
        /* 设置初始化公共样式 */
        body {
            color: black;
            font-size: 14px;
            font-family: Arial, "宋体";
        }
    </style>
</head>
<body>
    <div>这是div</div>
    <h1>一级标题</h1>
    <p>段落</p>
    <ul>
        <li>列表结构</li>
        <li>列表结构</li>
        <li>列表结构</li>
        <li>列表结构</li>
    </ul>
    <a href="">超级链接</a>
</body>
</html>

2.height应用

根据不同的需求，高度属性可以设置，也可以不设置。
（1）必须设计高度：设计图中高度占位是固定的，后面同级元素在高度下面加载。
自身盒子内部内容过多会溢出盒子区域。
overflow属性，如果溢出，可以对溢出的部分进行显示效果。
overflow属性值，visible，可见可视的，默认值。
hidden，将超出边框范围的进行隐藏。
scroll，溢出的部分出现滚动条。
auto，没有溢出就显示正常，一旦有溢出会在溢出的方向出现滚动条。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 1px solid red;
            /* overflow: hidden; */
            /* overflow: scroll; */
            overflow: auto;
        }
    </style>
</head>
<body>
    
    <div> 这是一个div这是一个div这是一个div这是一个div这是一个div这是一个divv这是一个div这是一个div这是一个div</div>
    
    <span>这是一个span</span>
</body>
</html>

必须不设置高度：
要求盒子高度自适应内容高度，或者height的属性值是自动的。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            /* height: 200px; */
            height: auto;
            padding: 20px;
            border: 1px solid red;
            /* overflow: hidden; */
            /* overflow: scroll; */
            /* overflow: auto; */
        }
    </style>
</head>
<body>
    
    <div> 这是一个div这是一个div这是一个div这是一个div这是是一个div这是一个div这是一个div这是一个div这是一是一个div这是一个div这是一个div这是一个div这是一是一个div这是一个div这是一个div这是一个div这是一是一个div这是一个div这是一个div这是一个div这是一是一个div这是一个div这是一个div这是一个div这是一是一个div这是一个div这是一个div这是一个div这是一是一个div这是一个div这是一个div这是一个div这是一一个div这是一个divv这是一个div这是一个div这是一个div</div>
    
    <span>这是一个span</span>
</body>
</html>

3.居中

（1）文本的水平居中：text-align
（2）文本的垂直居中：
单行文本垂直居中：让文字行高line-height等于盒子高度height。
多行文本的垂直居中：让元素高度自适应，设置上下padding。
（2）元素垂直居中：让元素高度自适应，子元素撑开父级元素高度，给父元素设置padding。
（3）元素水平居中：上下随意，左右auto，margin： 0 auto；
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            width: 300px;
            /* height: 300px; */
            border: 1px solid black;
            text-align: center;
            /* line-height: 200px; */
            padding: 20px;

        }
        .box {
            width: 300px;
            border: 1px solid green;
            /* padding: 30px 0; */
            
        }
        .demo {
            width: 100px;
            height: 100px;
            background-color:  pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <p>文字yiduana </p>

    <div class="box">
        <div class="demo"></div>
    </div>
</body>
</html>

4.父子盒模型

一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够(不考虑溢出情况)，需要遵循一个设置尺寸的规律:所有子元素的宽度加在一起不能大于父元素的宽度width.
代码如下（示例）：

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 1000px;
      height: 100px;
      border: 1px solid #f00;
    }
    .box1 p {
      float: left;
      width: 200px;
      height: 100px;
      margin-right: 50px;
      background-color: pink;
    }
    .box2 {
      width: 200px;
      height: 200px;
      border: 10px solid #f00;
    }
    .box2 p {
      /* width: 160px; */
      /* height: 200px; */
      padding: 20px;
      border: 20px dashed #00f;
      margin-right: 20px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div>
  <div class="box2">
    <p>5</p>
  </div>
</body>
</html>

5.margin塌陷现象

（1）同级元素:如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
（2）父子元素:让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开;更加常用的方法，父子盒模型之间的距离就不要用儿子的margin分隔开;更加常用的方法，父子盒模型之间的距离就不要用儿子的margin而是父级的padding 挤出来。
代码如下（示例）：

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 100px;
      height: 100px;
      margin-bottom: 150px;
      background-color: skyblue;
    }
    .box2 {
      width: 100px;
      height: 100px;
      /* margin-top: 100px; */
      background-color: skyblue;
    }
    .box3 {
      width: 100px;
      height: 70px;
      padding-top: 30px;
      /* border: 1px solid #f00; */
      /* margin-top: 50px; */
      background-color: pink;
    }
    .box3 p {
      width: 50px;
      height: 50px;
      /* margin-top: 30px; */
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box1">
    1
  </div>
  <div class="box2">
    2
  </div>
  <div class="box3">
    <p></p>
  </div>
</body>
</html>