👉⭐️1.如何使用css

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>css的三种使用方式</title> 
<!--1.外部样式表，可使样式表在不同页面中使用
最大限度使样式可以进行复用，最推荐使用的方式-->
<link rel="stylesheet" href="/assets/style.css">
<!--2.内联样式表,将css样式编写到head中的style标签-->
<style>
li{
margin:0;
list-style:none;
}
</style>
</head>
<body>
<!--3.内联样式,将css样式编写到元素的style属性中-->
<em style="margin:1em 0">这使用了内联样式</em>
</body>
</html>

🍊css是如何工作的

🍊调试css

右键点击页面，选择检查
使用快捷键 Ctrl+Shift+I（Windows） Cmd+Opt+I（Mac）

👉⭐️2.选择器

🍊基础选择器

<!--类选择器,.xxx{}-->
<div class="xxx">好好学习</div>
<!--id选择器,#ccc{}-->
<p id="ccc">天天向上</p>
<!--通配符选择器,*{}：所定义的样式对页面中所有的元素都会生效，
一般用于初始化页面的字体，字号，背景色和内外边距-->

🍊复合选择器

交集选择器:(相当于且)选中同时满足条件的元素，将每个选择器用.分隔，若有元素选择器，必须以元素选择器开头

<div class="red">叽叽喳喳<div>
<div class="green">叽叽喳喳<div>
div.red{             /*只对第一个div起作用，直接用选择器*/ 
font-size=45px;
}

并集选择器:(相当于或) 将每个选择器用逗号分隔。只要符合其中的一个就可作用。

🍊关系选择器

子元素选择器 (以 > 号分隔）选择最近一级元素

div>p    <!--选择div离得最近的下方元素也可记为选择亲儿子元素-->
{
  background-color:pink;
}

后代选择器 (以空格分隔) 选择后代元素

div p     <!--选取div元素中的所有的<p>元素-->
{
  background-color:pink;
}

相邻兄弟选择器（以 + 分隔），选择具有相同父亲的兄弟元素
普通兄弟选择器（以～分隔），选择下边所有的兄弟兄弟选择器

🍊伪类选择器

伪类用来描述一个元素的特殊形态，比如第一个子元素，被点击的元素，鼠标移入的元素

:first-child 第一个元素(是所有子元素的子元素,不是说同类的第一个子元素) :last-child 最后一个子元素
:nth-child() 选中第n个子元素 n，相当于是0~正无穷， 2n/even相当于是所有偶数元素，2n+1/odd 相当于是所有奇数元素

加type的child(与没加type的不同点在于他们是在同类元素排序）

:first-of-type :last-of-type :nth-of-type

:not() 否定伪类: 将符合条件的元素从选择器去除

a元素的伪类选择器

a:link{...}:正常的链接，未访问过的链接
a:visited{...}:访问过的链接，出于用户隐私考虑，visited只能改颜色 a:hover{...}: 鼠标移入，一般开发时常用a与a:hover
a:active{...}:鼠标点击

🍊伪元素选择器

伪元素表示页面中并不真实存在的一些元素(特殊的位置)

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开始
::after 表示元素的最后
::before与::after 必须结合content结合使用

👉⭐3.css的特性

🍊样式的继承

为一个元素设置的样式同时也会应用到它的后代元素上,并不是所有的样式都可以被继承，比如背景，边框，定位，布局相关的样式都不会被继承

css可继承属性：
所有元素可继承：visibility和cursor。 
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction 
终端块状元素可继承：text-indent和text-align。 
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

/*行高的继承*/
<style>
body{
font:12px/1.5 Microsoft;
}
div{
font-size:14px;/*子元素继承了父元素body的行高的1.5,即14*1.5,若没有指定文字大小，则会继承父亲body12px的1.5倍*/
}
</style>

🍊权重

行间样式>id>class>标签选择器>通配符

!important：无穷大
内联样式<style="">:1000
id选择器:0100
类和伪类选择器:0010
元素(标签)选择器:0001
继承，通配选择器: 0000
!注意:继承的权重是0。即范围越小，权重越大即父元素无论多大只要子元素设置了那么子元素就是最大的
另外注意a标签若需要改样式，应单独拉出修改
权重的叠加：不会有进位问题
eg:div ul li -->0003
  a:hover -->0011
  .nav a -->0011
  .nav ul li -->0012

🍊块元素与行内元素

块元素：
1.无论内容多少，独占一行。
2.高度，宽度，外边距及内边距都可控制
3.宽度默认是容器（父级宽度）的100%
4.里面可放行内或块级元素，文字类元素内不能使用块级元素

行内元素：
1.相邻行内元素在一行上，一行内可以显示多个，一行容不下会自动换行。
2.高，宽直接设置是无效的
3.默认宽度就是本身内容的宽度
4.行内元素只能容纳文本或其它行内元素，特殊情况链接a标签可以放块级元素

行内块元素：img input td
1.和相邻行内(行内块)元素在一行上，但是会有空白间隙，一行内可以显示多个
2.默认宽度就是它本身内容的宽度
3.高度，宽度，外边距及内边距都可控制

👉⭐️4.css浮动

多个块级元素纵向排列找标准流，横向排列找浮动
float：left（左浮动）,right（右浮动），none（没有浮动，是默认值）
清除浮动可给父级添加overflow属性，将其属性值设置为hidden,auto或scroll
1. 浮动元素会完全脱离文档流，不会从父元素（最左边与最右边）中移出。
2. 浮动元素向左或向右移动，不会超过它前边的其它浮动元素
3. 浮动元素不会超过它上边的浮动元素，最多跟它一样高
4. 若要使浮动的位置交换，要在html中改让它在它上面
5. 浮动元素不会盖住文字，可做文字环绕图片效果

脱离文档流特点

不再保留原先的位置
块元素不再独占页面的一行，宽高默认被内容撑开
行内元素会变成块元素，可设置宽高什么的，故不再区分块和行内了

👉⭐️5.文本格式

🍊长度单位

像素px：一般像素越小越好，在不同的设备下显示效果不一样
百分比%：可将属性值设置为相对于父元素属性的百分比，设置的百分比可以使子元素随父元素的改变而改变,是父子关系
em:相对与元素的字体大小计算，根据字体大小的改变而改变
1em=1font-size 若已经定义了font-size=30px; width:10em; 即10em=300px;
如果自己没有设置，它就会逐级向上找或者说它自己继承于谁的字体大小，如果谁都设置字体大小，那就是浏览器默认的字体大小，就是16px
rem:根据根元素的字体大小来计算
注意:浏览识别最小的字体大小是12px，10px还是当12px处理的。

vw、 vh 是视窗大小决定的。

vw:相对于浏览器可视区的宽度，单位是1vw=1%
vh:vh相对于浏览器可视区的高度做移动页面开发时，如果使用 vw、 wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

vmax:指浏览器可视区的宽、高，以最大的进行百分计算。当前 vw 和 vh 中较大的一个值
vmin:就是以最小的进行百分比的计算。当前 vw 和 vh 中较小的一个值
min-height:即如果min-height的高度设小了还可以变大，但是设大了就只能这样
max-height:就是max-height高度设大了可以根据内容高度变化，设小了就只能这样
min-width:设子盒子的min-width为w，父盒子width为width，使用min-width是指：如果w<width，子盒子的宽度w=父盒子宽度width 如果w>width，则子盒子宽度为w

max-width:子盒子的max-width为w，父盒子width为width,如果w>width，子盒子要受到父盒子的约束，子盒子宽度=父盒子宽度width 如果w<width，则子盒子宽度为w

🍊文本颜色

RGB(红色浓度，绿色浓度，蓝色浓度) 浓度在0~255之间，也可0% ~100%)
RGBA(红色浓度，绿色浓度，蓝色浓度，透明度) 1表示完全不透明，0表示完全透明 .5表示半透明)
HSL：H色相， S饱和度，L亮度

🍊字体属性

字体属性（font-family） 'Microsoft yahei'
各个字体之间必须使用英文状态下的逗号隔开一般情况下，若有空格隔开的多个单词组成的字体，加引号
字体大小（font-size）
px大小是网页常用单位，可以给body指定整个页面的字体大小，谷歌浏览器常用16px
字体粗细（font-weight）
normal(正常的字体400) ,bold(粗体700)，bolder(特粗体)，lighter(细体)，加数字时不用单位
文字样式（font-style） normal italic
复合属性（不能颠倒顺序，并且以空格隔开）
font:font-style font-weight font-size/line-height font-family
注意：不需要设置的属性可以省略（取默认值），但必须保留size与family,否则不起作用

🍊文本对齐

文本的水平方式 text-align
center 居中对齐（想要图片居中对齐，则是让它的父标签即img的前一个标签水平居中）
justify 两边对齐
文本的垂直方式 vertical-align(可直接赋值调整位置）
baseline 默认值基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
若是图片最好设置除了默认值的对齐方式
装饰文本（text-decoration）
none(无装饰线),underline(下划线)
文本缩进（text-indent)
若此时为2em，则是缩进当前元素2个文字大小的距离
行间距（line-height）
有上间距，文本高度，下间距行高即三者总和
🍊 让单行文字垂直居中：使盒子高度height等于行高light-height

🍊 背景

1.背景颜色（background-color）

2.背景图片（background-image） background-image：url() | none 实际开发常见于logo或者装饰性小图片，超大背景图。便于控制位置

3.背景平铺（background-repeat）
默认是平铺repeat，也可不平铺no-repeat
沿着x轴平铺repeat-x,沿着y轴平铺repeat-y

4.背景图片位置（background-position）
如果指定的两个值都是方位名词，则前后顺序无关即right center与center right一样效果
如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐

5.背景图像固定(background-attachment)
scroll(背景图像是随对象内容滚动)
fixed(背景图像固定)
当使用简写属性时，一般习惯约定顺序为:
background:背景颜色背景图片地址背景平铺背景图像滚动背景图像位置;

👉⭐️ 6.盒子模型

在这里插入图片描述

🍉宽（width）
指定content box宽度
取值为长度，百分数，auto
auto由浏览器根据其它属性确定
百分数相对于容器的content box宽度
🍉高（width）
指定content box高度
取值为长度，百分数，auto
auto取值由内容计算得来
百分数相对于容器的content box高度
容器有指定的高度时，百分数才生效

🍊 内边距(padding)

自动宽高用auto
若只提供一个参数值，该参数值作用于全部的四边
若提供两个参数值，第一个作用于上下，第二个作用于左右
若提供三个参数值，第一个作用于上，第二个作用于左右，第三个作用于下
若提供全部参数值，则是顺时针方向，上右下左
若盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

🍊 外边距(margin)

该参数值作用上下左右的方向跟内边距一样
外边距让块级盒子水平居中：(margin:0 auto;) 盒子必须指定了宽度，盒子左右的外边距都设置为auto
行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
使用margin定义的块元素的垂直外边距同时，可能会出现外边距的合并:可给父元素(即大的块元素)添加overflow:hidden;
清除内外边距：行内元素尽量只设置左右内外边距，一般上下不起做作用，但是可转换为块级或者行内块元素


/*一般是css第一行代码*/
*{
padding:0;
margin:0;
}

<!DOCTYPE HTML>
<html>
<head>
    <meta charset=<"utf-8"> 
<title>xiaocaiji</title> 
<!--外部样式表-->
<link rel="stylesheet" href="first.css">
</head>
<body>
<p class="demo">xiaocaiji嘻嘻哈哈开开心心快快乐乐xiaocaiji嘻嘻哈哈开开心心快快乐乐xiaocaiji嘻嘻哈哈开开心心快快乐乐xiaocaiji嘻嘻哈哈开开心心快快乐乐xiaocaiji嘻嘻哈哈开开心心快快乐乐xiaocaiji嘻嘻哈哈开开心心快快乐乐</p>
<div class="parent">
<div class="brother"></div>
</div>
</body>
</html>

.parent{
    width:500px;
    border:1px solid red;
}
.demo{
    width:300px;
    margin-left:30px;
    margin-right:10%;  /*右内边距为父元素宽度的10%，即50%*/
    margin-top:10%;    /*上边距为父元素宽度的10%，即50%*/
    margin-bottom:-20px;
    border:1px solid rebeccapurple;
}
.brother{
    width:100%;
    height:80px;
    background-color:palegoldenrod;
}

在这里插入图片描述

🍊 边框(border)

边框样式（border-style)

none:默认无边框 dotted:点边框 dashed:虚线 solid:实线 double:定义两个边框 groove:3D沟槽边框 ridge:3D脊边框 inset:3D嵌入边框 outset:突出边框

边框宽度（border-width)
边框颜色（border-color) 单独不起作用，必须先设置边框样式,还可设置边框颜色为transparent。复合写法：border:1px solid red;

🍊圆角边框( border-radius)

参数值可为数值或者百分比的形式若是正方形，想要设置为一个圆，可直接写50% 若是个矩形，设置为高度的一半就可以可跟四个值，分别是左上角，右上角，右下角，左下角

🍊盒子影子（box-shadow）

box-shadow:h-shadow(水平阴影) v-shadow(垂直阴影) blur(模糊距离) spread(阴影尺寸) color(颜色) inset(将外阴影改成内，默认是外);

🍊 文字影子（text-shadow）

text-shadow:h-shadow(水平阴影) v-shadow(垂直阴影) blur(模糊距离) spread(阴影尺寸) color(颜色)

🍊 盒子大小（box-sizing）

css中设置盒模型的属性是box-sizing，其属性值最常用的是content-box以及border-box。其中属性值为content-box的元素，又称为标准盒模型，其中google即使用的是标准盒模型；IE使用的是怪异盒模型border-box。

当为标准盒模型content-box时：width = 内容的宽度
当为怪异盒模型border-box时： width = 内容的宽度+左右padding+左右border**

👉⭐️7.显示

隐藏元素：

display:none或visibility:hidden但这两种方法会产生不同的结果。

转换为块级元素 display: block
转换为行内元素 display: inline
转换为行内块元素 display: inline-block
visibility:hidden可以隐藏某个元素，但隐藏的元素仍占据原本应该有的空间。
display:none不会占用任何空间

👉⭐️8.定位

1.static定位：默认值，即没有定位，遵循正常的文档流对象，静态定位的元素不会受到 top, bottom, left, right影响。

2.relative定位：相对原本的位置

元素开启相对定位后，如果不设定偏移量（top,bottom,left,right）本身则不会发生任何变化，也不会使其它元素脱离原来的位置。通常水平垂直方向各设定一个，如设定（left,top）

参照与元素在原本位置上进行定位的

相对定位会提升元素层级

相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素

3.absolute定位:相对于最近的已定位父元素，如果没有，那么该位置相对于html

元素开启绝对定位后，本身位置不会发生任何变化，但会使其它元素脱离原来的位置。故绝对定位会改变元素的性质，行内元素变成块元素，块的宽高会被内容撑开即与内容的宽高一样。

绝对定位会提升元素层级

绝对定位元素是相对于其包含块（即当前元素最近的开启了定位的祖先元素）进行定位的，若无位置相对于html

开启了绝对定位后，水平方向的布局（margin-left+border-left+padding-left+width+padding-right+margin-right）等式就相当与多了left与right（它们默认值是auto）若等式不满足时，会自动调整，故开启定位后想让它在水平中间，就让left与right等于0，而margin-left与margin-right设置为auto.

4.fixed定位：大部分特点与绝对定位一样，不同的是元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动

5.sticky定位：粘滞定位，大部分特点与相对定位一样，不同的是sticky可以在元素到达某个位置时将其固定。

6.重叠的元素（z-index)：可以覆盖页面上的其它元素。

z-index的值越大，层级越高也就越优先显示，若层级一样，则优先显示靠下的元素，而祖先元素的层级再高也不会盖住后代元素。

👉⭐️9.过渡

transition:

👉⭐️ 10.转换--2D

移动translate：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动translate</title>
    <!-- 1.沿着X和Y轴移动元素，不会影响到其他元素的位置
         2.translate中的百分比单位是相对于自身元素的translate:(50%, 50%);
         3.对行内标签没有效果,如span -->
    <style>
      div{
          position: relative;
          width: 500px;
          height:500px;
          background-color: darksalmon;
          /* transform:translate(100px,100px); 等价与下面两个
          transform: translateX(100px);
          transform: translateY(100px);
          */
      }
      /* 盒子居中方法 */
      p{                            
          position:absolute;
          top:50%;
          left:50%;
          width: 200px;
          height: 200px;
          background-color: rgb(40, 90, 134);
          transform: translate(-50%,-50%);  
      }
    </style>
</head>
<body>
    <div><p></p></div>
</body>
</html>

请添加图片描述

旋转：rotate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小角标三角形</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid rgb(179, 101, 154);
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-bottom: 1px solid rgb(153, 77, 143);
            border-right: 1px solid rgb(173, 91, 147);
            transform: rotate(45deg);
            transition: all 0.2s;
        }
     /* 鼠标经过div 里面的三角旋转 */
        div:hover::after {    
	/*角度为正时为顺时针,负时为逆时针,默认旋转的中心点是元素的中心点*/
            transform: rotate(225deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

</html>

旋转中心点transform-origin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转中心点transform-origin</title>
    <style>
    div{
        overflow: hidden;
        float: left;
        height: 200px;
        width: 200px;
        border: 1px solid pink;
        margin: 50px 20px;
    }
    div::before{
        content: "xiaocaiji";
        width: 100%;
        height: 100%;
        /* 行内元素没有大小，需要转成块级 */
        display: block; 
        /* x y默认的中心点是元素的中心点（50% 50%）即(center,center)
        x y可设置像素或者方位名词（top bottom left right center） */
        transform-origin: left bottom;
        background-color: palegoldenrod;
        transform: rotate(180deg);
        transition: all 1s;
    }
    div:hover::before{
        transform: rotate(0deg);
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

缩放：scale

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大transform:scale()</title>
    <style>
    div{
        /* 超出的部分隐藏起来 */
        overflow: hidden;
        float: left;
        margin: 10px;
    }
    div img{
        /* 谁做过渡给谁加 */
    transition: all 1s; 
    }
    div img:hover{
/* 里面的数字是倍数，可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
transform: scale(1, 1)：宽和高都放大一倍，相当于没有放大
transform: scale(2, 2)：宽和高都放大了2倍
transform: scale(2)：只写一个参数，第二个参数则和第一个参数一样
transform: scale(0.5, 0.5)：缩小 */
    transform: scale(1.1);
    }
    </style>
</head>
<body>
    <div>
        <a href="#"><img src="1.jpg" width="100px" height="100px"></a>
    </div>
    <div>
        <a href="#"><img src="1.jpg" width="100px" height="100px"></a>
    </div>
    <div>
        <a href="#"><img src="1.jpg" width="100px" height="100px"></a>
    </div>
</body>
</html>

请添加图片描述

多个转换的格式写法(注意顺序)，位移translate需放在前面，格式（用空格隔开）： transform: translate() rotate() scale()

👉⭐️ 11.动画(animation)

@keyframes:规定动画
animation-name: 当前元素生效的动画名称
animation-duration: 动画的持续时间(默认为0)
animation-timing-function :动画显示形式(默认ease)
{
linear:匀速       ease:低速-加快-变慢  
ease-in:以低速开始  ease-out:以低速结束  
ease-in-out:以低速开始和结束 
step()指间隔数量即步长
}
animation-delay :动画何时开始(默认0)
animation-iteration-count: 动画播放次数(默认1)，无限执行infinite
animation-direction: 动画执行的方向（normal，reverse，alternate)
animation-fill-mode: 动画执行结束的位置(none，forwards ，backwords)
both：结合了forwards和backwords
animation-play-state: 动画的执行状态(running ，
paused)

简写形式：

animation:动画名称name 持续时间duration 运动曲线timing-function 何时开始delay 播放次数iteration-count 是否反方向direction 动画开始或结束的状态fill-mode

👉⭐️ 12.常见网页布局

在vscode中可!+Tab键快速生成html页面骨架或输入html:5 +回车键（tab）

常见网页布局

<!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>常见网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*去掉li中的小点*/
        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: pink;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: pink;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;

        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: blanchedalmond;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是与浏览器一样宽就不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: pink;
            margin-top: 10px;
        }
    </style>

</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>

    <div class="footer">footer</div>
</body>

</html>

在这里插入图片描述

🍊 css属性书写顺序

1.布局定位属性:

display/position/float/clear/visibility/overflow

2.自身属性:

width/height/margin/padding/border/background

3.文本属性:

color/font/text-decoration/text-align/vertical-align/white-space/break-word

4.其它属性(CSS3):

content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

邂逅CSS与CSS3

👉⭐️1.如何使用css

🍊css是如何工作的

🍊调试css

👉⭐️2.选择器

🍊基础选择器

🍊复合选择器

🍊关系选择器

🍊伪类选择器

🍊伪元素选择器

👉⭐3.css的特性

🍊样式的继承

🍊权重

🍊块元素与行内元素

👉⭐️4.css浮动

👉⭐️5.文本格式

🍊长度单位

🍊文本颜色

🍊字体属性

🍊文本对齐

🍊 背景

👉⭐️ 6.盒子模型

🍊 内边距(padding)

🍊 外边距(margin)

🍊 边框(border)

🍊圆角边框( border-radius)

🍊盒子影子（box-shadow）

🍊 文字影子（text-shadow）

🍊 盒子大小（box-sizing）

👉⭐️7.显示

👉⭐️8.定位

👉⭐️9.过渡

👉⭐️ 10.转换--2D

👉⭐️ 11.动画(animation)

👉⭐️ 12.常见网页布局

🍊 css属性书写顺序