04.18

一.css里的垂直对齐方式
~匹配的是当前元素之后的所有元素 + 匹配的元素是当前元素紧跟之后的元素
父元素里面的子元素 垂直对齐
1.子元素大小一致时，使用padding 让元素垂直对齐
2.如果子元素大小不一致，设置元素的垂直对齐方式vertical-align: middle;

使用行高让文本垂直对齐 水平对齐（一般不使用）
文本水平居中 设置text-align:center;
把行高设置和高度一致，文本垂直居中ine-height:100px;

<div class="par">
    <div class="par1">div1</div>
    <div class="par2">div2</div>
    <div class="par3">div3</div>
    <div class="par4">div4</div>
</div>

<hr/>
<div class="parone">
    <div class="parone1">div1</div>
    <div class="parone2">div2</div>
    <div class="parone3">div3</div>
    <div class="parone4">div4</div>
</div>
<style>
        .par {
            height: 150px;
            border: 1px solid #000;
            padding: 25px;
            box-sizing: border-box;

        }

        .par1, .par2, .par3, .par4 {
            border: 1px solid red;
            display: inline-block;
            text-align: center;
            /*设置元素的垂直对齐方式*/
            vertical-align: middle;
        }

        .par1 {
            width: 100px;
            height: 100px;
            line-height: 100px;
        }

        .par2 {
            width: 80px;
            height: 80px;
            line-height: 80px;
            ;
        }

        .par3 {
            width: 60px;
            height: 60px;
            line-height: 60px;
        }

        .par4 {
            width: 40px;
            height: 40px;
            line-height:40px;
        }




        .parone {
            height: 150px;
            border: 1px solid #000;
            padding: 25px;
            box-sizing: border-box;
        }

        .parone1, .parone2, .parone3, .parone4 {
            border: 1px solid red;
            float: left;
            text-align: center;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            line-height:100px;

        }

    </style>

二.盒子塌陷
父子元素怎么处理盒模型塌陷
1.给父元素设置边框 border
2.给父元素设置超出隐藏 overflow: hidden;
3.给父元素设置内间距 padding随便设置，只要不是0就行
兄弟元素怎么处理，防止带动另一个效仿
1.相对位置
2.元素浮动

<div class="par">
    <div class="par1">我是子div1</div>
    <div class="par2">我是子div2</div>
</div>
 <style>
        .par {
            height: 200px;
            background-color: pink;
        }

        .par1 {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            float: left;
            margin-top: 40px;
        }
        .par2 {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            display: inline-block;
            position: relative;
           top: 20px;
           }
    </style>

三.checked伪类选择器
-webkit-appearance: none;除去checkbox在浏览器中的默认的样式
background-image: url("./img/1.png");除去样式后，引入图片变成你想要的样式
checked {transform: rotatez(-90deg);}点击check按钮图样标志旋转-90度
list-style: none;去掉无序排列的前面的点
.menu > li:hover {background-color: red;背景色变化cursor: pointer;光标移动，鼠标变成小手}
background-position: -16px 0; 背景位置移动，即图片样子变化

四.网站布局
1.固定布局 固定像素布局 px
2.流动布局 百分比布局 %

网站布局 layout布局
1.浮动布局 —就是元素左右浮动 堆叠产生布局模式
2.定位布局 —就是元素使用各种定位 产生的布局模式
3.弹性盒子布局 —flex 进行布局
弹性布局的样式 flex 手机App 手机网站使用弹性，屏幕分辨率可变大变小，所以适合手机app
4.多列布局
5.网格布局grid

1.流动布局
display: flex;设置弹性布局
flex-direction: column;项目将在列的方向上排列
flex-direction:row;项目将在水平方向上排列
flex: 1;盒模型在整体中占得比例大小 flex1 表示占一份
order: 2;分配空间排序 数字越小，排名越靠前，显示越靠前
flex-wrap: wrap;设置溢出折行 nowrap
justify-content: center;内容区域的水平位置居中 左 start 右 end
align-content: center;内容区域的垂直位置居中 左 start 右 end
align-items: center;内容垂直居中
justify-items: center;内容水平居中
justify-content:space-between;项目位于各行之间留有空白的容器内
align-self: center;居中对齐弹性对象元素内的某个项

<div class="par">
    <div class="par1">1</div>
    <div class="par2">
        <div class="par2_1">我是文本</div>
    </div>
    <div class="par3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="par4">4</div>
</div>
<style>
    .par {
        margin: auto;
        width: 500px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
        flex-direction: column;
    }

    .par1 {
        flex: 1;
        order: 2;
        border: 1px solid #c0c0c0;
        background:green;
    }

    .par2 {
        flex: 2;
        order: 3;
        border: 1px solid #c0c0c0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .par2_1 {
        display: flex;
        width: 500px;
        height: 40px;
        margin: 0;
        border: 1px solid #000;
        align-items: center;
        justify-content: center;
        background: pink;
    }

    .par3 {
        flex: 3;
        order: 4;
        border: 1px solid #c0c0c0;
        display: flex;
        flex-direction:row;
        flex-wrap: wrap;

    }

    .par3 > div {
        flex: 1;
        border: 1px solid blue;
    }

    .par4 {
        flex: 1;
        order: 1;
        border: 1px solid #c0c0c0;
        background:red;
    }
</style>

2.网格布局
display: grid; 指一个容器采用网格布局
设置列的宽
写成固定值指每列的宽
fr 指曲线系数 平分空间 grid-template-columns：1fr 1fr；表是两个相同宽度的列；
grid-template-columns：150px 1fr 2fr；第一列的宽度为150px，第二列的宽度是第三列的一半；
grid-template-columns: repeat(3, 33.333%);定义每一列的列宽 第一个数是重复的次数，33.%就是意味着垂直线将其分成三等分
grid-template-rows: repeat(5,30px);定义每一行的行高
grid-column: 1/3;从垂直线的第一根线到第三个线，实际占两列=grid-row-start: 1;grid-row-end: 3;
grid-row: 1/3; 从水平线的第一根线到第三个线，实际占两行=grid-row-start: 1; grid-row-end: 3;
grid-gap: 10px;设置网格间隙值
计算列 可以写 固定值 百分比值 重复列

<div class="warp">
    <div class="warp_1">1</div>
    <div class="warp_2">2</div>
    <div class="warp_3">
        <div class="th3">3</div>
    </div>
    <div class="warp_4">4</div>
</div>
<style>
    .warp {
        margin: auto;
        width: 1190px; 
        display: grid; 
        grid-template-columns: repeat(3, 33.333%);
        grid-template-rows: repeat(5,30px);
        border: 1px solid #000;
    }

    .warp_1 {
        border: 1px solid deeppink;
        grid-row: 1/3;
        grid-column: 1/3;
       background-color: red;
    }

    .warp_2 {
        border: 1px solid deeppink;
        grid-column: 2/4;
        grid-row: 1/2;
        background-color: blue;
    }

    .warp_3 {
        border: 1px solid deeppink;
        grid-column: 3/4;
        grid-row: 2/6;
        background-color: pink;
        display: grid;

    }

    .warp_4 {
        border: 1px solid deeppink;
        grid-column: 1/3;
        grid-row: 3/6;
        background-color: green;

    }

    .th3 {
        width: 30px;
        height: 30px;
        border: 1px solid #000;
        display:grid;
        justify-content: center;
        align-content: center;

    }
    
</style>

3.多列布局
column-count: 3;设置有几个列
column-gap: 10px;设置列间距的
column-rule:1px solid black;设置列间距间的竖线
column-width: 50px;设置里面的文本的列宽的

<div class="block">
    <div>1当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将</div>
    <div>2当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将</div>
    <div>3当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将</div>
</div>
<style>
    .block {
        margin: auto;/*浏览器计算外边距*/
        width: 1000px;
        column-count: 3;
        column-gap: 10px;
        column-rule:1px solid black;
        border: 1px solid #000;

    }

    .block > div {
        border: 1px solid red;
        height: 200px;
        column-count: 4;
        column-rule: 1px solid pink;
    }
</style>