HTML之CSS定位、浮动、盒子模型

HTML之CSS定位、浮动、盒子模型

定位

html 复制代码
<!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>
        .outDiv{
            width: 500px;
            height: 300px;
            background-color: lightblue;
            border: 1px solid green;
            margin: 0 auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            border: 1px solid red;
            margin: 10px;
            /* display: inline; block 默认 表示块元素 ; inline 行内元素 */
        }
        /* 
            position: 
                static  默认值
                fixed    相对定位  相对于浏览器窗口 
                relative 相对定位  相对于自己原来的位置,元素原本位置不会被其他元素占用
                absolute 绝对定位
            left跟right是一对,top跟bottom是一对,用时只用一对中的某一个
            left 
            right 
            top 
            bottom
         */
         .d1{
            position: relative;
            top: 100px;
            right: 100px;
        }
    </style>
</head>
<body>
    <div class="outDiv">
        <div class="innerDiv d1">
            div1
        </div>
        <div class="innerDiv d2">
            div2
        </div>
        <div class="innerDiv d3">
            div3
        </div>
    </div>
</body>
</html>

浮动

html 复制代码
<!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>
        .outDiv{
            width: 500px;
            height: 300px;
            background-color: lightblue;
            border: 1px solid green;
            margin: 0 auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            border: 1px solid red;
            margin: 10px;
            /* display: inline; block 默认 表示块元素 ; inline 行内元素 */
            /* float: left; */
        }
        /* 浮动设置的初衷 就是为了不隐藏文字 */
        /* 当d1设置左浮动,而其他两个没设置浮动时,d1会盖住下面飘上来的div模块,但是不会盖住其中的文字,文字会被挤到div模块下面 */
        .d1{
            float: right;
        }
    </style>
</head>
<body>
    <div class="outDiv">
        <div class="innerDiv d1">
            div1
        </div>
        <div class="innerDiv d2">
            div2
        </div>
        <div class="innerDiv d3">
            div3
        </div>
    </div>
</body>
</html>

盒子模型

html 复制代码
<!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>
        .outDiv{
            width: 500px;
            height: 300px;
            background-color: lightblue;
            border: 1px solid green;
            margin: 0px auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            border: 1px solid red;
            margin: 10px;  /* 外边距 四方位 */
            /* display: inline; block 默认 表示块元素 ; inline 行内元素 */
            float: left;
        }
        /* 
            width:100px; height:100px; div中设置width和height 表示元素div的容量是100*100
            border:1px; 表示边线,边线不侵占容量; 设置边线之后 div元素的实际占用高度为:容量 100 + 边线(上下)  1*2 = 102
            边距:即元素留白
            margin:10px; 表示外边距,外边距不侵占容量; 设置外边距之后 div元素的实际占用高度为:容量 100 + 边线(上下)  1*2 + 外边距(上下) 10*2 = 122
                写法:margin: 10px;  margin:10px 20px;(上下 左右)  margin:10px 20px 30px 40px;(从上边距开始顺时针转)  margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px;
            padding:10px; 表示内边距,内边距不侵占容量;也是会是原本的元素变大,可以通过设置box-sizing:border-box使元素本身不变;
                写法:padding: 10px;  padding:10px 20px;(上下 左右)  padding:10px 20px 30px 40px;(从上边距开始顺时针转)  padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px;
        */
        .d1{
            /* float: right; */
            padding: 20px; /* 内边距 四方位  或者padding-top 等... ...*/
            box-sizing: border-box; /* 设置盒子模型为border-box,设置之后,padding不会增加元素的实际占用高度 */
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="outDiv">
        <div class="innerDiv d1">
            div1
        </div>
        <div class="innerDiv d2">
            div2
        </div>
        <div class="innerDiv d3">
            div3
        </div>
    </div>
</body>
</html>
相关推荐
波波鱼દ ᵕ̈ ૩33 分钟前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
oioihoii38 分钟前
恋爱时间倒计时网页设计与实现方案
html
climber11211 小时前
【Python Web】一文搞懂Flask框架:从入门到实战的完整指南
前端·python·flask
Watermelo6171 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
门前云梦1 小时前
ollama+open-webui本地部署自己的模型到d盘+两种open-webui部署方式(详细步骤+大量贴图)
前端·经验分享·笔记·语言模型·node.js·github·pip
Micro麦可乐1 小时前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo6171 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
Micro麦可乐1 小时前
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
前端·spring boot·后端·jwt·refresh token·无感token刷新
Heidi__1 小时前
前端数据缓存机制详解
前端·缓存
讨厌吃蛋黄酥2 小时前
前端路由双雄:Hash vs History,谁才是React项目的真命天子?
前端·react.js·设计