首页 > 其他 > 详细

4.盒子模型的属性,定位以及浮动定位(菜鸟学前端)

时间:2020-06-22 18:03:20      阅读:84      评论:0      收藏:0      [点我收藏+]

盒子模型

常用属性简介:

基本写法:

 border:3px solid(实线) red;

margin外边距

padding内边距

注意1::内外边距是相对的属性

注意2:默认内边距影响盒子大小

box-sizing: border-box(固定盒子的大小)

float:浮动

浮动有两个属性left和right,

 代码演示:

内边距方法:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css属性</title>
    <style>
        div{
            border:3px solid red;
            height: 200px;
            width: 200px;
            padding:50px ;
            box-sizing: border-box;
        }
        .div1{
            border:3px solid green;
            height: 100px;
            width: 100px;
 
        }
    </style>
</head>
<body>
    <div>
    <div class="div1"></div>
</div>
</body>
</html>
 
外边距方法:
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css属性</title>
    <style>
        div{
            border:3px solid red;
            height: 200px;
            width: 200px;
            margin-left:200px ;
            margin-top: 200px;
           
        }
        .div1{
            border:3px solid green;
            height: 100px;
            width: 100px;
            margin:50px;
   
        }
    </style>
</head>
<body>
    <div>
    <div class="div1"></div>
</div>
</body>
</html>
效果展示:
 
技术分享图片

4.盒子模型的属性,定位以及浮动定位(菜鸟学前端)

原文:https://www.cnblogs.com/wang-yong-kang0/p/13177435.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!