2020-11-09

最新推荐文章于 2023-11-16 13:36:27 发布

Amaya_Angel

最新推荐文章于 2023-11-16 13:36:27 发布

阅读量103

点赞数

分类专栏： css基础知识总结文章标签： css

本文链接：https://blog.csdn.net/Amaya_Angel/article/details/109583570

版权

css基础知识总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

字体样式

一.行高：

1.性质：

一行文字实际占用的高度。

2.取值方式：

px，百分比。

百分比：按照默认的字体大小取值。

3.特殊用法：

要让一行文字垂直居中，可以将行高设置为盒子高。（多行文字失效）

(行高，字号一般都是偶数。谷歌min16px，iemin无限)

二.字号字体

font-size: 48px;
font-family: "宋体";
line-height: 60px;

按上述排列

1.字体大小

取值：单词，em，px，百分比

font-size: xx-small;
font-size: xx-large; 
font-size: 48px; 
font-size: 1em;

2.字体样式

网页中，中文主要使用的字体：微软雅黑，宋体，黑体。

英文：Arial，Consolas

英文在前，中文在后。

微软雅黑：Microsoft Yahei

宋体：SimSun

黑体：SimHei

3.行高

4.字体正斜


font-style: italic;斜字体 
font-style: unset; 正字体

italic :跟字体样式有关系，oblique斜体

5.字体粗细

font-weight: bold;(粗)
font-weight: normal;（正常）

取值方式：数字，单词

数字：100-900；

单词：lighter normal,bold,bolder

6.字体间距

单词间间距：中文无效。

word-spacing: 48px;

单个字母间的间距中文有效

 letter-spacing: 48px;

大小写转换

text-transform: lowercase;

段落样式

1.设置文本居中

text-align: left;

2.文本修饰

text-decoration: underline ; (下划线)
text-decoration: line-through;（中划线） 
text-decoration: overline;   （上划线）
text-decoration: none;(无)

underline:下划线。

overline:上划线。

line-through:中划线。

none，正常，默认值。

盒模型

一.盒模型

1.性质

一个元素在页面中真实占据的位置。

2.五个部分

内容的宽，内容的高，内边距，边框，外边距。

1.内容的宽，高

宽：width px；

高：height px；


    width: 300px;
    height: 300px;
    background-color: pink;
    margin: 40px;

2.内边距

内容和边框之间的距离。

内边距是可以被背景色渲染的。

可以给单边设置内边距:

padding-left: 50px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 60px;

四值法：

单值：上下左右。

双值：上下左右。

三值：上左右下

四值：上右下左顺时针。

3.边框

1.写法

复合写法：

border: 5px solid red;

三要素写法：

border-width: 10px;
border-style: solid;
border-color: red;

单一方向设置：

border-left: 5px solid red;
border-right: 5px dashed green;
border-top: 5px dotted blue;shang

2.样式：

实线：

border: 5px solid red;

双实线

border: 5px double red;

虚线

border: 5px dashed red;

none：无轮廓。当定义了该值时，border-color将被忽略，border-width计算值为0，除非边框轮廓应用了border-image。

hidden：隐藏边框。

dotted：点状轮廓。

dashed：虚线轮廓。

solid：实线轮廓

double：双线轮廓。两条单线与其间隔的和等于指定的border-width值

groove： 3D凹槽轮廓。

ridge： 3D凸槽轮廓。 i

nset： 3D凹边轮廓。

outset： 3D凸边轮廓。

3.三角

section {
            width: 0px;
            height: 0px;
            border: 20px solid white;
            border-bottom: none;
            border-top-color: green;
        }

1.设置边框，然后将内容宽高设置为0

2.取消底部边框。

3.将左右边框的颜色改为white。（透明色）

4.外边距

性质：两个盒子之间距离（和内边距道理一样）

补充

1.技巧

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

2.清除默认样式

*{
      margin: 0;
      padding: 0;
}

3.高度

我们一般是不设置高度的，而是用内容去撑开盒子的高。

内容的多少不是由咱们决定的，使用自适应可以避免大片留白和内容溢出。

overflow: hidden;

4.外边距塌陷

垂直方向上相邻的两个盒子，如果都有外边距，则外边距相交的地方会出现外边距重合现象，也叫作外边距塌陷。

取值：margin相遇的部分，并不是两个margin值的和，而是为最大值。

如果两个margin值为负数，取值为绝对值最大的。

如果一正一负，结果为两者之和

5.居中方法

文字居中：

水平居中：


text-align: center；

垂直居中：

- 单行文本 line-height等于盒子的高。

盒子居中

水平居中：

margin: 0 auto;

垂直居中

给盒子添加一个上下一样的padding

6.父子盒子模型

真实的宽：内容的宽+左padding+左border+右padding+右border

真实的高：内容的高+上padding+下padding+上border+下border

子盒子的宽度若不设置默认为父盒子的内容的宽。

若设置了边框和内边距，父盒子的内容宽减去边框和内边距的大小，剩下的就是子盒子的宽度。

作业

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子</title>
    <link rel="stylesheet" href="./盒子.css">
</head>

<body>
    <div class="a1">
        <div class="a2">
            <div class="a3">
                <div class="a4">
                    <div class="a5">
                        <div class="a6">
                            <div class="a7"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

css

@charset "utf-8";
div {
    width: 800px;
    height: 800px;
    margin: 0 auto;
    background-color: pink;
}

.a1 {
    width: 800px;
    height: 800px;
    margin: 100px auto;
    padding: 50px;
    background-color: red;
    border: 1px solid black;
}

.a2 {
    width: 600px;
    height: 600px;
    margin: 50px auto;
    padding: 50px;
    background-color: rgb(255, 109, 93);
    border: 5px solid white;
}

.a3 {
    width: 490px;
    height: 490px;
    padding: 50px;
    background-color: rgb(255, 136, 124);
    border: 5px dashed white;
}

.a4 {
    width: 380px;
    height: 380px;
    padding: 50px;
    background-color: rgb(255, 173, 78);
    border: 5px solid white;
}

.a5 {
    width: 270px;
    height: 270px;
    margin: 40px auto;
    padding: 10px;
    background-color: rgb(255, 136, 124);
    border: 5px dashed white;
}

.a6 {
    width: 168px;
    height: 168px;
    padding: 50px;
    background-color: rgb(255, 236, 72);
    border: 1px dashed white;
}

.a7 {
    width: 106px;
    height: 106px;
    padding: 30px;
    background-color: rgb(158, 236, 105);
    border: 1px dashed white;
}