css基础

一，css介绍

作用：给网页提供样式，美化网页，配合div完成布局
基本语法，选择器（属性名：属性值，{}叫声明快
核心，一堆选择器+一堆的css属性
版本，css2和css3

二，书写css

行内样式，把样式写在开始标签的属性中< h1 style=“color：red”>css，特点：结构和样式混在一起，一般不用
内部样式，在head标签中，title标签下，写一个style标签，把样式写在style标签中，特点：结构和样式分离，学习期间使用内部样式
外部样式：创建一个css文件，通过link标签在html文件中引入。特点：结构和样式分离，项目中推荐使用

三，选择器

元素选择器，选中页面上所有的同类元素
class选择器，步骤： 1）起名字 2）.classname 可以给同一个标签起不同的名字，也可以给不同的标签起相同的名字，项目中推荐使用class选择器
ID选择器，步骤：1）起名字 2）#id name
id和class的区别，id名字唯一，class名字不唯一
通用选择器，*也叫通配符选择器，经典代码 *{margin：0；padding：0；}
属性选择器，[title] [title="xixi"]
后代选择器，div p 特点：选中后代所有
子代选择器，div>p 特点：选中儿子
兄弟选择器，div+p 选中div后面紧挨的p兄弟，div~p 选中div后面紧挨着的所有的p兄弟。
交集选择器，div.box 选中div并且div中有class=“box”。fa fa-angle-right 选中class=“fa” 并且有class=“fa-angle-right”
并集选择器，div，p，span，a 选中div元素，p元素，span元素，a元素
伪类选择器，：hover

四，字体和文本相关属性

文字大小 font-size：单位是px 谷歌浏览器默认是16px 网页中最常见的是12px或14px
字体类型 font-family：是有设计师决定的，还取决于用户电脑上是否安装了此字体window默认是微软雅黑
字体粗细 font-weight：nomal 正常不加粗 bold加粗有些标签默认就是加粗的 100-900
字体样式 font-style：nomal：正常不倾斜 italic 倾斜有些标签就是倾斜的
字体颜色 color：取值：1）颜色单词 2）16进制 3）rgba 特点：对于a标签设置颜色，必须要选中a标签 - 复合属性font ：font：font-style font-weight font-size/line-height font-family 特点:font-style和font-weight可以不写，可以互相位置，font-size和font-family不能省略，也不能换位置
行高 line-height：设置一行文本的高度特点：如果使用了font这个复合属性，没有写行高，默认行高是0
文本的修饰线 text-decoration： none：默认没有装饰线，最常用。underlinie ;下划线 a标签自带下划线,大部分情况下，需要把a标签的下划线去掉，当hover，添加下划线。 overline：上划线基本上不用。line-through 删除线不常用
文本的对齐方式 text-align ：center：最常用居中对齐可以让行内块元素居中对齐也可以水平居中对齐。left：左对齐 right：右对齐
首行缩进 text-indent：em：表示一个字的宽度，2em：表示两个字的宽度。text-indent：-99999px；可以文本跑到浏览器外面也可以设置height=0 加上overflow：hidden，也可以让文本看不见

五，元素分类

块级元素，（男标签）

div，h1-h6，p，ol，ul，li ...
特点：独占一行，盒子模型的6个属性都可以设置
如果没有写宽度，默认宽度是父元素的100%
通常情况下，块级元素是充当一个容器，它里面可以放块级元素，也可以放行内元素，也可以放行内块元素，有特殊情况，如：ul中只能放li...

行内元素（女标签）

a，span，strong，i，em，del，u，b
特点：并排显示，盒子模型中width和height不起作用，并且margin和pdding在垂直方向上也有问题
默认情况下，宽和高都是靠内容撑起来
通常情况下，行内元素中不能放块级元素，要么放文本，要么放其他的行内元素
a标签是行内元素，他里面可以放块级元素，但是最好我们给a标签添加一个display：block

行内块元素（人要标签）

img，input，id...
特点：并排显示，盒子模型的6大属性都可以起作用
多个行内块元素并排显示，回车换行时会产生间隙
如果没有写宽度，宽度也是靠内容撑起来的

切换显示式 display

转成块元素，display：block
转成行内元素：display：inline
转成行内块元素：display：inline-block

六，盒子模型

1. 盒子模型介绍

网页布局的核心就是去摆盒子
盒子模型介绍o组成: 内容区域，内边距区域,边框区域,外边距区域,外轮廓，背景
分类:传递的盒子模型和新的盒子模型

2. 盒子模型的内容

传统的盒子模型:内容区域由width和height决定
如果是块级元素,宽度是父盒子宽度的100%，如果是行内元素，宽度由内容撑起来
可以设置盒子的最小宽度和最大宽度
传统盒子模型在网页上占据的宽高，宽度: width+左右的padding +左右的border +左右的margin高度: height+ 上下的padding+上下的border+上下的margin
新的盒子模型在网页上占据的宽高：宽度: width ，高度: height

3. 盒子模型的边框

语法: border: border-width II border-style II border-color
分四个方向: border-top border-ight border-bottom border-left; border-top:1px solid red
border-style。设置边框的样式，solid实线，dashed虚线，dashed虚线
对于传统盒子模型来说，设置边框会增加盒子在网页上占据的大小
使用边框可以制作出很多不同形状的图形，常用于使用边框制作三角形
设置圆角日border-radius

4.盒子模型的内边距

表示内容区域到边框之间的间隙
语法: padding:1个值II 2个值II 3个值II 4值
分四个方向: padding-top padding-right padding-bottom padding-left
对于传统盒子模型来说,设置内边框会增加盒子在网页上占据的大小
开发中，通常使用padding设置间隙
对于行内元素来说，垂直方向上的padding有问题,不要使用
很多标签有默认的padding，影响布局，-上来，清除默认的padding *{ padding:0; }

5.盒子模型的外边距

表示盒子与盒子之间的距离
语法: margin:1个值II 2个值II 3个值II 4值
对于传统盒子模型来说，设置外边框会增加盒子在网页上占据的大小
利用margin可以实现一个块级盒子水平居中，margin:0 auto
对于行内元素来说，垂直方向.上的margin有问题,不要使用
很多标签有默认的margin,影响布局，-上来，清除默认的maring *{ margin:0; }
margin的塌陷(也叫margin的重叠)：

父好盒子之间的margin場陷，解决：1)给父加边框，2)添加overflow:hidden overflow表示溢出的意思，3)给父元素设置padding-top，4) 给父元素或子元素设置浮动。兄弟盒子之间的margin塌陷：解决：你要设置时，-定要小心，要么设置上面盒子的下marign,要么设置下面盒子的上margin

6.盒子的背景

背景颜色:background-color:颜色值;透明色: background-colortransparent
背景图片:background-image: ur(图片的路径); 默认情况下，背景图片的左上角和盒子padding区域的左上角是对齐的;优点: 1) 让网页更漂亮2) -个小图或装饰性的图也可以做成背景图，背景图更容易控制
背景平铺:background-repeatrepeat;repeat是平铺no-repeat是不平铺....项目中最常用的是background-repeat:no-repeat
背景图片位置:background position: x坐标y坐标;x坐标: 具体的长度值10px:left center right:百分比;y坐标: 具体的长度值10px:top center bottom:百分比
项目中,使用精灵图,需要使用bgp来定位精灵图上的某一个小图
背景图片的大小:background size: x轴大小y轴大小:取值:具体值100px:取值:百分比:取值: cover contain
复合属性:background:背景颜色背景图片背景平铺背景位置:background:背景颜色背景图片背景平铺背景位置.

7.盒子的阴影和盒子的圆角

盒子的阴影。语法: box-shadow: 水平阴影垂直阴影模糊距离阴影尺寸阴影的颜色是否是内阴影
盒子的圆角:border-raius:取值:具体值:取值:百分比

七，浮动布局

初衷:实现字围效果后来发面浮动可以让块级元素并排显示
特点: 1)半脱标2) 包裹性3) 破坏性3) 如果行内元素浮动自动变性
语法: float:left/right
浮动会对父元素和兄弟元素造成影响

对父元素造成的影响：如果父元素没有设置高主度,它里面的子元素都浮动了,父元素的高度就变成0，元素高度塌陷：清除影响，叫清除浮动日方案:1)加高法不常用：2) overflow:hidden：3)内墙法.4)伪元素用的最多对兄弟元素造成影响日兄弟元素向上钻了解决: clear:both;谁受影响写在谁身上

八.层布局

通过定位实现层布局：有三类，相对定位，绝对定位，固定定位

1. 相对定位

参考点：自己本应该出现的位置。
语法: position:relative; 配合left right bottom top设置偏移量
相对定位的元素，它原本的位置还被占用
相对定位的元素并没有脱离标准文档流
应用场景: 1)盒子的局部位置调整2) 子绝父相 2.绝对定位
参考点:需要手动设置,如果不设置,最终以body作为参考点：参考点通常是设置在父元素身上position:relative;来设置
语法: position:absolute; 配合left right bottom top设置偏移量
绝对定位的元素，完全脱标，不占标准文档流中的位置了
绝对定位：可以让多个盒子层叠在一起，可以通过z-index调整前后顺序
应用场景: 1)让-个盒子水平垂直居中2) 调整-个子盒子在一个父盒子中的位置 3. 固定定位
参考点:整个浏览器窗口
语法: position:fixed; 配合left right bottom top设置偏移量
固定定位的元素，也是完全脱标
应用场景: 1)盒子相对浏览器窗口固定

九.flex布局

四个概念：容器，项目，主轴，交叉轴
项目默认是在主轴上排列，主轴默认是水平向右
容器相关的属性

flex-direction 改变主轴方向

flex-wrap 是否换行

justify-content 设置主轴的对齐方式(处理主轴的富余空间)

align-items设置交叉轴的对齐方式

align-content 设置多根主轴在交叉轴上的对齐方式

项目相关的属性日

flex-grow 生成因子

flex-basis 项目在主轴上占据的大小 flex-basis 用来设置 flex items 在 main axis 方向上的 base size：\

auto（默认值）、具体的宽度数值（100px）\
当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效\

决定 flex items 最终 base size 的因素，从优先级高到低：\

max-width\max-height\min-width\min-height\
flex-basis\
width\height\
内容本身的 size

flex-shrink 缩小因子 flex-shrink 决定了 flex items 如何收缩(缩小) ：\

可以设置任意非负数字（正小数、正整数、0），默认值是 1\
当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效\

如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为：\

flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和\

flex items 收缩后的最终 size 不能小于 min-width\min-height

order 项目的排列顺序

可以设置任意整数（正整数、负整数、0），值越小就越排在前面\
默认值是 0

align-self 单独设置某个项目在交叉轴上的位置

flex flex：1 flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。 ：\

最最常用的：一个无单位数(number): 它会被当作flex-grow的值。

十。布局套路

table布局（了解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            display: table;
            width: 100%;
            height: 100px;
        }
        .left{
            display: table-cell;
            height: 100px;
            background-color: blue;
        }
        .right{
            display: table-cell;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

float布局 A) 一边固定，另外一边动态变化 B）三列布局

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .left{
            width: 400px;
            height: 300px;
            background-color:gold;
            float: left;
        }
        .right{
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right">ABC</div>
</body>
</html>

inline-black布局

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left {
            width: 200px;
            /* 定宽 */
            height: 300px;
            background-color: #c9394a;
            float: left;
        }

        #center {
            width: 200px;
            /* 定宽 */
            height: 300px;
            background-color: green;
            float: left;
        }

        #right {
            height: 300px;
            background-color: pink;
            margin-left: 400px;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>

</html>

flex布局 A）水平垂直居中 B）两列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: gold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container{
            width: 100%;
            height: 200px;
            display: flex;
        }
        .left{
            background-color: gold;
            width: 200px;
            height: 100%;
        }
        .right{
            flex: 1;
            background-color: blue;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 
        一侧固定，另一个侧自适应
     -->
     <div class="container">
         <div class="left">
             左
         </div>
         <div class="right">
            右
        </div>
     </div>
</body>
</html>

Grid布局了解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* https://blog.csdn.net/ancartoon/article/details/121514585 */
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrapper{
            display: grid;
            grid-template-columns: repeat(3,1fr);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
</body>
</html>

columns 了解

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .content{
            columns: 3 auto;
        }
    </style>
</head>
<body>
    <div class="content">
        Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
        Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
        Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
    </div>
</body>
</html>

水平居中：

文本居中；text-aling：center：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">我是文本</div>
</body>
</html>

单个块级元素居中 margin 0 auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 100%;
            height: 200px;
            background-color: gold;
        }
        .child{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中布局</div>
    </div>
</body>
</html>

多个块级元素居中：text-align：center display：lnline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 100%;
            height: 200px;
            background-color: gold;
            text-align: center;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中布局</div>
        <div class="child">居中布局</div>
        <div class="child">居中布局</div>
    </div>
</body>
</html>

单个块级元素居中使用绝对路径 (已知父子宽高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            position: relative;
            width: 800px;
            height: 200px;
            background-color: gold;
        }
        .child{
            position: absolute;
            left: 300px;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

单个块级元素居中 flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            position: relative;
            width: 800px;
            height: 200px;
            background-color: gold;
        }
        .child{
            position: absolute;
            /* 50%是指父宽度的50% */
            left: 50%;
            height: 200px;
            background-color: skyblue;
            /* 50%是指父宽度的50% 不行 */
            /* margin-left: -50%; */

            /* -50% 是子宽度的50% */
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">123456789</div>
    </div>
</body>
</html>

水平竖直居中布局解决方案-flex+justify-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 100%;
            height: 200px;
            background-color: gold;
            display: flex;
            justify-content: center;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中布局</div>
    </div>
</body>
</html>

垂直居中

文本居中 line-height 200px：height 200px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            background-color: gold;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        Hello，CSS~
    </div>
</body>

多行文本 .parent{height:150px;line-height:30px;}行高等于height/行数;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 50px;
            height: 150px;
            background-color: gold;
            text-align: center;
            margin: 0 auto;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        Hello Hello Hello
    </div>
</body>
</html>

图片元素居中 .parent{height:200px;line-height:200px;font-size:0;} .son{vertical-align:middle}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            text-align: center;
            line-height: 200px;
        }
        /* 让一张图片垂直居中：父中写 line-height=height; 子中写vertical-align: middle; */
        .son{
            /* vertical-align设置垂直对齐 */
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <img width="100px" class="son" src="./images/02.webp" alt="">
    </div>
</body>
</html>

单个块级元素居中 flex

<!-- flex -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            background-color: gold;
            display: flex;
            align-items: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

单个块级元素居中 table-cell 了解

<!-- table-cell -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            background-color: gold;
            /* 两个属性都要写 */
            display: table-cell;
            vertical-align: middle;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

单个块级元素居中定位

<!-- 定位 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            position: relative;
            height: 200px;
            background-color: gold;
        }
        .son{
            position: absolute;
            top: 50%;
            /* margin-top: -50px; */
            transform: translateY(-50%);
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

多个块级元素居中 flex

<!-- 多个盒子 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 600px;
            background-color: gold;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .son{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

居中布局(水平+垂直)

单个块级元素日table-cell + vertical-align (了解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 1000px;
            height: 600px;
            background-color: gold;
            display: table-cell;
            vertical-align: middle;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

单个块级元素 postion+transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            position: relative;
            width: 1000px;
            height: 600px;
            background-color: gold;
        }
        .son{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

单个块级元素 flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 1000px;
            height: 600px;
            background-color: gold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

10，圣杯布局左右定宽+中间自适应

<!-- 使用浮动实现圣杯布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            /* 新的盒子模型 */
            box-sizing: border-box;
        }
        .box{
            height: 300px;
            padding: 0 300px;
        }
        .left, .center, .right{
            height: 300px;
            float: left;
        }
        .left, .right{
            width: 300px;
        }
        .center{
            width: 100%;
            background-color: gold;
        }
        .left{
            background-color: red;
            /* % 是相对于父的宽的% */
            margin-left: -100%;
            position: relative;
            left: -300px;
        }
        .right{
            background-color: blue;
            margin-left: -300px;
            position: relative;
            right: -300px
        }
    </style>
</head>
<body>
    <!-- 
        圣杯布局：三行三列    左右定宽   中间自适应
        特点：center写在前面
     -->
    <div class="box">
        <div class="center">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

<!-- 使用浮动实现圣杯布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            /* 新的盒子模型 */
            box-sizing: border-box;
        }
        .box{
            height: 300px;
            padding: 0 300px;
        }
        .left, .center, .right{
            height: 300px;
            float: left;
        }
        .left, .right{
            width: 300px;
        }
        .center{
            width: 100%;
            background-color: gold;
        }
        .left{
            background-color: red;
            /* % 是相对于父的宽的% */
            margin-left: -100%;
            position: relative;
            left: -300px;
        }
        .right{
            background-color: blue;
            margin-left: -300px;
            position: relative;
            right: -300px
        }
    </style>
</head>
<body>
    <!-- 
        圣杯布局：三行三列    左右定宽   中间自适应
        特点：center写在前面
     -->
    <div class="box">
        <div class="center">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

1. 双飞翼布局日圣杯布局改良版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 500px;
        }
        .left, .right, .center{
            float: left;
        }
        .left, .right{
            width: 300px;
            height: 300px;
        }
        .center{
            width: 100%;
            background-color: green;
        }
        .left{
            background-color: red;
            margin-left: -100%;
        }
        .right{
            background-color: blue;
            margin-left: -300px;
        }
        .inner{
            margin-left: 300px;
            margin-right: 300px;
            background-color: pink;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="center">
            <div class="inner">中</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

1. 全屏布局定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        header{
            height: 100px;
            background-color: gold;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
        footer{
            height: 100px;
            background-color: pink;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .content{
            background-color: blue;
            position: fixed;
            top: 100px;
            bottom: 100px;
            left: 0;
            right: 0;
        }
        .content .left{
            width: 300px;
            height: 100%;
            background-color: red;
            position: fixed;
            top: 100px;
            bottom: 100px;
            left: 0;
        }
        .content .right{
            background-color: skyblue;
            position: fixed;
            left: 300px;
            right: 0px;
            bottom: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <header>Header</header>
    <div class="content">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <footer>Footer</footer>
</body>
</html>

css

css基础

一 ，css介绍

二，书写css

三，选择器

四，字体和文本相关属性

五，元素分类

块级元素，（男标签）

行内元素（女标签）

行内块元素（人要标签）

切换显示式 display

六，盒子模型

1. 盒子模型介绍

2. 盒子模型的内容

3. 盒子模型的边框

4.盒子模型的内边距

5.盒子模型的外边距

6.盒子的背景

7.盒子的阴影和盒子的圆角

七，浮动布局

八.层布局

九.flex布局

十。布局套路

一，css介绍