< 笔记 > CSS

来源：互联网发布：录像后期制作软件编辑：程序博客网时间：2024/06/08 12:58

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>

阅读全文

0 0