2021-08-09盒子模式、浮点、定位

最新推荐文章于 2022-07-24 17:19:43 发布

shiqikuangsan

最新推荐文章于 2022-07-24 17:19:43 发布

阅读量66

点赞数

本文链接：https://blog.csdn.net/shiqikuangsan/article/details/119549139

版权

本文详细解读了HTML/CSS中的元素显示模式、盒子模型、浮动效果、定位方式及优先级，包括块状元素、行内元素、内边距、外边距、浮动应用和不同定位技巧。从div、span、input元素展示到样式转换、表格设计、内联样式和浮动行为，适合前端开发者深入理解布局原理。

摘要由CSDN通过智能技术生成

1.1元素显示模式

<style>
        /* 块状元素，独占一行，可以设置宽高等属性，
        宽度不设置默认是父盒子的百分百，高度是内容撑开 */
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /* 行内元素和其他行内元素一行显示，并且宽高不能设置，以内容撑开 */
        span{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /* 行内块元素，和其他行内元素在一行显示，并且宽高可以设置，默认以内容撑开 */
        input{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
<body>
    <div>块状元素1</div>
    <div>块状元素2</div>
    <span>行内元素1</span>
    <span>行内元素2</span>
    <input type="text" name="" id="">
    <input type="text" name="" id="">
</body>

1.2显示模式转换

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 设置为块元素 */
            /* display: block; */
            /* 设置为行内块 */
            /* display: inline-block; */
            /* 设置为行内元素 */
            /* display: inline; */
            /* 取消显示模式，就会隐藏 */
            display: none;
        }
    </style>
<body>
    <div>div1</div>
    <div>div2</div>
</body>

2.盒子模式

<style>
        div{
            /* border: 1px solid red; */
            border-top: 5px solid red;
            border-right: 5px solid pink;
            border-left: 5px solid purple;
            border-bottom: 5px solid green;
            width: 100px;
            height: 100px;
        }
    </style>
<body>
    <div>内容1</div>
    <div>内容2</div>
</body>

1)表格细边框

 <style>
        /* 每个单元格的边框会发生重叠，等于是2px */
        table,td{
            border: 1px solid red;
            /* 合并相邻的边框 */
            border-collapse: collapse;
        }
        /* 可以通过单独设置table的上左，再设置每个单元格的右下边框即可 */
        /* table{
            border-top: 1px solid red;
            border-left: 1px solid red;
        }
        td{
            border-right: 1px solid red;
            border-bottom: 1px solid red;
        } */
    </style>
<body>
    <table border="1" cellspacing=0 width=500 align="center">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

2)内边距

    <style>
        a{
            border: 1px solid red;
            display: inline-block;
            /* width: 100px;
            height: 20px;
            text-align: center; */
            /* padding-left: 20px;
            padding-right: 20px; */
            /* 上 右 下 左 */
            /* padding: 10px 20px 10px 20px; */
            /* 上下 左右 */
            padding: 10px 20px;
            text-decoration: none;
            color: #666;
        }
        a:hover{
            background-color: #ddd;
            color: orange;
        }
    </style>
<body>
    <a href="">首页</a>
    <a href="">个人信息</a>
</body>

3)盒子居中

4)外边距

    <style>
        div{
            width: 100px;
            height: 100px;
        }
        #a{
            background-color: orange;
            /* 盒子之间的距离是最大的那个，不会叠加30px */
            margin-bottom: 20px;
        }
        #b{
            background-color: pink;
            margin-top: 10px;
        }
    </style>
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>

5)盒子阴影

3.1优先级
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red !important;
            color: green !important;
        }
        #a{
            background-color: green;
        }
        .b{
            background-color: yellow;
        }
        *{
            color: pink;
        }
        /* 继承性优先级最低<*<标签<class<id<行内<!important */
    </style>

3.2权重性计算
    <style>
        /* 0 0 0 1 */
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }
        /* 0 0 1 1 */
        div.b{
            background-color: green;
        }
        /* 0 0 1 0 */
        .b{
            background-color: hotpink;
        }
        /* * 和继承 为 0 0 0 0
        标签 为 0 0 0 1
        class 为 0 0 1 0
        ID 为 0 1 0 0
        行内 为 1 0 0 0  */
    </style>

4.浮动
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        #a{
            background-color: red;
            
        }
        /* 如果width太宽一行盛不下就挤到下一行，贴着上一行中height最小的开始 */
        #b{
            background-color: green;
            float: right;
        }
        #c{
            background-color: blue;
            
        }
        /* d被挡住了 还在文档流，abc在浮动流*/
        #d{
            background-color: blueviolet;
            height: 220px;
        }
    </style>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</body>

1)父子盒子浮动

    <style>
        #sup{
            width: 600px;
            border: 1px solid;
            margin: 0 auto;
            /* height: 300px; */
        }
        /* 浮动也是在父盒子当中 */
        #sub1{
            width: 350px;
            height: 300px;
            border: 1px solid green;
            float: left;
        }
        #sub2{
            width: 150px;
            height: 300px;
            border: 1px solid blue;
            float: right;
        }
    </style>
<body>
    <div id="sup">
        <div id="sub1"></div>
        <div id="sub2"></div>
    </div>
    
</body>

2)清除浮动

5.1相对定位

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid;
            /* 设置相对定位 */
            position: relative;
            float: left;
        }
        div:hover{
            top: 10px;
        }
        a{
            text-decoration: none;
            position: relative;
            color: red;
        }
        a:hover{
            top: 2px;
            left: 2px;
        }
    </style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <a href="">百度</a>
</body>

5.2绝对定位

   <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid;
            /* 设置绝对定位 */
            /* 如果上级标签没有使用定位的情况下，则默认以浏览器左上角为精准 */
            position: absolute;
        }
        p{
            width: 100px;
            height: 100px;
            border: 1px solid;
            /* 设置绝对定位 */
            position: absolute;
            top: 0px;
            margin: 0px;
            padding: 0px;
        }
    </style>
<body>
    <div>1</div>
    <p>2</p>
</body>

5.3固定定位

用于滚动时固定在某处的栏

    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: pink;
            position: fixed;
            bottom: 100px;
            right: 50px;
        }
    </style>

shiqikuangsan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-09盒子模式、浮点、定位

1.1元素显示模式<style> /* 块状元素，独占一行，可以设置宽高等属性，宽度不设置默认是父盒子的百分百，高度是内容撑开 */ div{ width: 100px; height: 100px; background-color: red; } /* 行内元素和其他行内元素一行显示，并且宽高不能设置，以内容撑开 */ s
复制链接

扫一扫