css布局方式

已于 2024-07-13 19:16:27 修改
阅读量49 收藏
点赞数
分类专栏： CSS 文章标签： css html 前端
于 2023-04-14 12:42:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tt19123657188/article/details/130149734
版权

盒子布局

  1. padding：内边距（内容距离边框的距离 上右下左）
  2. margin：外边距（边框距离页面的距离）
  3. none：无边框
    solid：实线边框
    dashed：虚线边框
    dotted：点状边框
`html
<!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>
        div{
        width:100px;
        height: 100px;
        background-color: red;
        border-color: 1px solid black;
        padding: 20px;
        margin-right: 100px;
    }
    </style>
</head>
<body>
    <div>这是第一个div</div>
    </body>
</html>

浮动布局

float可以取3个值：left none right

<!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>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
 float:right;  
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body

效果如下
在这里插入图片描述

如果要消除浮动的影响，可以添加clear属性

  1. none:默认 允许两边都可以浮动
  2. left：不允许左边的浮动
  3. right：不允许右边的浮动
  4. both：不允许两侧有浮动
<!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>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: azure;
 float:right;  

}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: beige; 
clear:right;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: bisque;

}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body

效果如下
在这里插入图片描述

定位布局

position ------ 设置对象的定位方式， 可以取

  • static：静态定位（没有设置位置）默认
  • absolute：相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body；将对象从文档流中分离出来，设置lefttop right bottom这四个方向去设置
  • relative：相对定位，对象不从文档流中分离出来，设置left top right bottom这四个方向去设置相较于自身的相对定位
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>浮动布局</title>
    <style>
    .main{
        width: 600px;
        height: 600px;
        border: 1px solid black;
    }
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: antiquewhite;
            position: absolute;/*绝对定位相较于body */
            top: 200px;
            left: 500px;
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: azure;
             float: left; 
            clear:left ; 
              position:relative; /*相对定位相较于自己 */
            left:200px; 
        }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: rgb(187, 231, 216);
           
        }
    </style>
</head>
<body class="main">
    <div class="box1">这是第一个div</div>
    <div class="box2">这是第2个div</div>
    <div class="box3">这是第3个div</div>
</body>
</html>

效果如下
在这里插入图片描述

其他属性

overflow

设置对象内容超过指定的高度或者宽度的时候如果管理它的内容
visible----- 默认值 不剪切内容也不添加滚动条
auto ----- 在必需时对象才会被裁剪或者添加滚动条
hidden ----- 不显示超过对象尺寸的内容（会被隐藏）
scroll ---- 总会显示滚动条

<!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>Document</title>
   <style>
    .main{
        width: 200px;
        height: 00px;
        border: 1px solid black;
          overflow:scroll ;/*总会显示滚动条 */
    }
   </style>
</head>
<body>
    <div class="main">
       <img src="..\\images\\汤姆猫.jpg" alt="">
    </div>
</body>
</html>

效果如下
在这里插入图片描述

zoom

设置或者检索对象的缩放比例
normal : 默认值 显示的是对象的实际尺寸
number: 百分比|无符号的浮点数 浮点数为1.0相当于100%相当于取值为normal

<!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>Document</title>
   <style>
    .main{
        width: 200px;
        height: 200px;
        border: 1px solid black;
          overflow:scroll ;/*总会显示滚动条 */
        
    }
    img{
        zoom: 0.5;
    }
   </style>
</head>
<body>
    <div class="main">
       <img src="..\\images\\汤姆猫.jpg" alt="">
    </div>
</body>
</html>

效果如下
在这里插入图片描述

弹性盒子

弹性盒子是由弹性容器（Flexible或者Flexbox）和弹性元素(Flex-item)组成
设置弹性容器是通过display属性进行设置，---------- display:flex或则inline-flex
注意：一个弹性容器可以包含多个弹性元素

  • flex- direction ------- 定义主轴的方向
    可取row：默认，从左到右
    row-reverse：从左到右
    column：从上到下
    column-reverse：从下到上
  • flex-wrap ------指的是弹性容器中子元素超出父容器时是否换行（单行还是多行）
  • flex-flow ----flex- direction 和flex-wrap 的简写
  • align-items — 设置的弹性容器中元素在侧轴(纵轴）的对齐方式 justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式
  • align-content-------修改了flex-flow的行为，类似于align-items，它是对齐的弹性线
<!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>
        .flex-contain{
            width: 400px;
            height: 350px;
            background-color: antiquewhite;
            display:flex;
            /* 主轴方向flex-direction: column; 主轴从上到下*/
            /* flex-direction: column-reverse; 主轴从下到上*/
            justify-content: center;/*在主轴上的对齐方式  */
        }
        .flex-item{
            width: 100px;
            height: 100px;
            background-color: azure;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div class="flex-contain">
        <div class="flex-item">flex item1</div>
        <div class="flex-item">flex item2</div>
        <div class="flex-item">flex item3</div>
        <!-- <div class="flex-item">flex item4</div>
        <div class="flex-item">flex item5</div>
        <div class="flex-item">flex item6</div>
        <div class="flex-item">flex item7</div>
        <div class="flex-item">flex item8</div>
        <div class="flex-item">flex item9</div>
        <div class="flex-item">flex item10</div> -->
    </div>
</body>
</html>

效果如下
在这里插入图片描述

无聊的烤苕皮
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值