前端的笔记

最新推荐文章于 2024-08-13 17:31:17 发布

2301_80612591

最新推荐文章于 2024-08-13 17:31:17 发布

阅读量26

点赞数

文章标签：笔记 css css3

本文链接：https://blog.csdn.net/2301_80612591/article/details/134715787

版权

课堂练习

<!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;
        }
        .apple{display: flex;
            width: 1226px;
            height: 628px;
            background-color: black;
        }
        .banner{display: flex;
            width: 234px;
            height: 628px;
            background-color: rgb(240, 20, 20);
        }
        .c ul{display: flex;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
            width: 992px;
            height: 628px;
            background-color: antiquewhite;
        }
        ul li{list-style: none;

            width:234px;
            height: 300px;
            background-color: white;
        }

    </style>
</head>
<body>
    <div class=apple>
        <div class="banner">
            <div class="c">
                <ul >
                    <li class="a"></li>
                    <li class="a"></li>
                    <li class="a"></li>
                    <li class="a"></li>
                    <li class="a"></li>
                    <li class="a"></li>
                    <li class="a"></li>
                    <li class="a"></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

这是布局；

display：flex	弹性盒子
flex-direction：	更改主轴方向
flex-direction：row-reverse	行反转
flex-direction：column	主轴变到列上
flex-direction：column-reverse	列反转
justify-content：center	水平居中
justify-content：space-between	两边贴边，中间平分剩余空间
justify-content：flex-start	默认排序
ustify-content：flex-end	右边贴边
justify-content：space-around	平分剩余空间
align-items：center	垂直居中
flex-wrap：wrap	自动换行
align-content：	控制多行
order：	值越小越靠前·
flex-grow：	空间占比
flex-shrink：	不会被压缩
align-self：	自身动
display：grid	自动填充
grid-template-colunms：	行占用空间比例
grid-template-rows：	列占用空间比例
row-gap	行间距
columun-gap	列间距
min-width	最小宽度
max-width	最大宽度

这是浮动盒子模型

outline-style: none;	没有轮廓线
outline-width: 1px;	宽度
outline-color: aliceblue;	颜色
float: left;	文字环绕效果 */
float: right;	文字浮动【一个元素浮动起来，会不在占有原来的位置{脱离文档流} 同时浮动的盒子会在同一行进行排列。如果说多个元素同时给左浮动。元素就会从左到右在一行排列。】
padding:	内边距
margin:	外边距
margin-top:	上边距;
margin-bottom:	下边距
margin-left:	左边距
margin-right:	右边距
margin: 20px;	此时代表上下左右为两个值时为上下一组，上下一组【若为四组数据就用顺时针顺序.】
overflow: auto;	会生成滚轮
overflow: hidden;	超出就隐藏
box-sizing: border-box;	避免影响盒子大小
padding: ;	的合并于margin一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .son{width: 100px;
        height: 20px;
        background-color:antiquewhite;}
    .son1{
        float: left;
    }
    .son2{clear: both;
        
        float: right;
    }
    .son3{clear: both;
        
        float: left;
    }
    .son4{clear: both;
        
        float: right;}
</style>
<body>
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="son3"></div>
    <div class="son4"></div>
</body>
</html>

————————————————
版权声明：本文为CSDN博主「2301_80728634」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/2301_80728634/article/details/134695929

2301_80612591

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的笔记

版权声明：本文为CSDN博主「2301_80728634」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/2301_80728634/article/details/134695929。
复制链接

扫一扫