< 笔记 > CSS - 03 CSS 布局

最新推荐文章于 2024-04-27 16:48:56 发布

Kevi_Song

最新推荐文章于 2024-04-27 16:48:56 发布

阅读量206

点赞数

分类专栏： < 笔记 > CSS 文章标签： css 布局盒子布局

本文链接：https://blog.csdn.net/weixin_38689154/article/details/78189301

版权

< 笔记 > CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

03 CSS 布局

By Kevin Song

盒子模型

边框：border
- 上边框：border-top
- 下边框：border-bottom
- 左边框：border-left
- 右边框：border-right
内边距：padding（指定一个值则是四条边内边距，指定两个值第一个值是上下内边距，第二个值是左右内边距。四个值，上右下左）
- 上内边距：padding-top
- 下内边距：padding-bottom
- 左内边距：padding-left
- 右内边距：padding-right
外边距：margin（不同格子之间的距离）
- 上外边距：margin-top
- 下外边距：margin-bottom
- 左外边距：margin-left
- 右外边距：margin-right

<html>
    <head>
        <title>Kevin's Homepage</title>
        <style tyle="text/css">
            div {
                border:#09F solid 1px;
                height:100px;
                width:200px;
            }
            #div_1 {
                background-color:#F90
            }
            #div_2 {
                background-color:#F90
            }
            #div_3 {
                background-color:#F90
            }
        </style>
    </head>
    <body>
        <div id="div_1">
        第一个盒子
        </div>
        <div id="div_2">
        第二个盒子
        </div>
        <div id="div_3">
        第三个盒子
        </div>
    </body>
</html>

漂浮

float属性
- none 属性值：不漂浮
- left 属性值：文本流向对象的右边
- right 属性值：文本流向对象的左边
clear属性
- none 属性值：允许两边右浮动对象
- left：不允许左边右浮动对象
- right：不允许右边右浮动对象
- both：不允许有浮动对象

定位

position
- static 无特殊定位
- absolute 属性值：把盒子拖出文档流（新图层），如果没有父级对象则相对于body设定位置
- fixed
- relative：不拖出文档流进行进行设定位置，其他对象无法移动到该对象曾经的位置

如果父类设置过absolute或者relative。则子类盒子的设定位置在父类中。如果父类没有设置，则相对body

<html>
    <head>
        <title>Kevin's Homepage</title>
        <style tyle="text/css">
            div {
                border:#09F solid 1px;
                height:100px;
                width:200px;
            }
            #div_1 {
                background-color:#F90
                position:absolute;
                top:100px;
                left:100px;
            }
            #div_2 {
                background-color:#F90
            }
            #div_3 {
                background-color:#F90
            }
        </style>
    </head>
    <body>
        <div id="div_1>
        第一个盒子
        </div>
        <div id="div_2>
        第二个盒子
        </div>
        <div id="div_3>
        第三个盒子
        </div>
    </body>
</html>

图文混排

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Kevin's Homepage/title>
        <style type="text/css">
            #imgtext{
                    border:#06F dashed 1px;
                    width:180px;
            }
            #img{
                    float:right;
            }
            #text{
                    color:#F60;
                    font-family:"宋体";
            }
        </style>
    </head>

    <body>
        <div id="imgtext">
            <div id="img">
                <img src="9.bmp" />
            </div>

            <div id="text">
                一张图片
            </div>
        </div>
    </body>
</html>

图像签名

<html>
    <head>
        <title>/title>
        <style type="text/css">
            #text{
                font-family:"宋体";
                font-size:24px;

                position:absolute;
                top:80px;
                left:10px;
            }
            #imgtext{
                border:#F60 dotted 1px;
                width:500px;
                position:absolute;
                top:100px;
            }
        </style>
    </head>
    <body>
        <div id="imgtext">
            <div id="img">
                <img src="1.jpg" height="300" width="500" />
            </div>
            <div id="text">
                May the force be with you
            </div>
        </div>
    </body>
</html>