CSS定位

标签属性值=“” 样式：；

行内样式直接所有的标签添加属性style=“样式：；样式：；” 是style属性　　　　　

链接:将一个css文件链接进来<head>里面和<title>平行，link标签 type属性 href rel

内嵌<style type="text/css"></style> <style>标签 type属性在里面写选择器

　　　　　　用到时，才会下载，和@import区别

导入@import url();不管用不用得到，都会下载下来

优先级依次减小

DOM值类型还是引用类型

类 id 标签伪选择 a:hover 选择器伪类

div+css做一个前台布局

css默认值

html, address, 
blockquote, 
body, dd, div, 
dl, dt, fieldset, form, 
frame, frameset, 
h1, h2, h3, h4, 
h5, h6, noframes, 
ol, p, ul, center, 
dir, hr, menu, pre   { display: block } 
li              { display: list-item } 
head            { display: none } 
table           { display: table } 
tr              { display: table-row } 
thead           { display: table-header-group } 
tbody           { display: table-row-group } 
tfoot           { display: table-footer-group } 
col             { display: table-column }  
colgroup        { display: table-column-group } 
td, th          { display: table-cell; } 
caption         { display: table-caption } 
th              { font-weight: bolder; text-align: center } 
caption         { text-align: center } 
body            { margin: 8px; line-height: 1.12 } 
h1              { font-size: 2em; margin: .67em 0 } 
h2              { font-size: 1.5em; margin: .75em 0 } 
h3              { font-size: 1.17em; margin: .83em 0 } 
h4, p, 
blockquote, ul, 
fieldset, form, 
ol, dl, dir, 
menu            { margin: 1.12em 0 }  

h5              { font-size: .83em; margin: 1.5em 0 } 
h6              { font-size: .75em; margin: 1.67em 0 } 
h1, h2, h3, h4, 
h5, h6, b, 
strong          { font-weight: bolder } 
blockquote      { margin-left: 40px; margin-right: 40px } 
i, cite, em, 
var, address    { font-style: italic } 
pre, tt, code, 
kbd, samp       { font-family: monospace } 
pre             { white-space: pre } 
button, textarea, 
input, object,  
select          { display:inline-block; } 
big             { font-size: 1.17em } 
small, sub, sup { font-size: .83em } 
sub             { vertical-align: sub }  
sup             { vertical-align: super } 
table           { border-spacing: 2px; } 
thead, tbody, 
tfoot           { vertical-align: middle } 
td, th          { vertical-align: inherit } 
s, strike, del  { text-decoration: line-through } 
hr              { border: 1px inset } 
ol, ul, dir, 
menu, dd        { margin-left: 40px } 
ol              { list-style-type: decimal } 
ol ul, ul ol, 
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 } 
u, ins          { text-decoration: underline } 
br:before       { content: "/A" } 
:before, :after { white-space: pre-line }  

center          { text-align: center } 
abbr, acronym   { font-variant: small-caps; letter-spacing: 0.1em } 
:link, :visited { text-decoration: underline } 
:focus          { outline: thin dotted invert } 

/* Begin bidirectionality settings (do not change) */ 
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override } 
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override } 

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed } 
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed } 

@media print { 
  h1            { page-break-before: always } 
  h1, h2, h3, 
  h4, h5, h6    { page-break-after: avoid } 
  ul, ol, dl    { page-break-before: avoid }

css默认值

position：absolute

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div
        {
            border: 2px solid;
        }
        #d1
        {
            width: 400px;
            height: 400px;
            position: absolute;/*子元素为定位元素，从选择最近的父级元素找*/
        }
        #d2
        {
            width: 350px;
            height: 350px;
            position: absolute; /*子元素为定位元素，从选择最近的父级元素找*/
        }
        #d3
        {
            width: 300px;
            height: 300px;
        }
        #d4
        {
            width: 90px;
            height: 90px;
        }
        #d5
        {
            width: 90px;
            height: 90px;
        }
        #d6
        {
            width: 90px;
            height: 90px;
            position: absolute;
            right: 30px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2">
            <div id="d3">
                <div id="d4">
                </div>
                <div id="d5">
                </div>
                <div id="d6">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

绝对定位：从定位的（不论absolute还是relative）最近的（有父级父父级..元素都定位）的父级元素找

margin-top top 在position区分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div
        {
            border: 1px solid;
        }
        #d1
        {
            width: 400px;
            height: 400px;
        }
        #d2
        {
            width: 350px;
            height: 350px;
        }
        #d3
        {
            width: 300px;
            height: 300px;
        }
        #d4
        {
            width: 90px;
            height: 90px;
        }
        #d5
        {
            width: 90px;
            height: 90px;
        }
        #d6
        {
            position: absolute;/*1，会找父级元素  最近的 定位的（不论是absolute还是relative）2，进行top bottom left right进行定位 */
            width: 90px;
            height: 90px;
            /*这里只管的是div的外边距，和兄弟节点的距离。1，挨着的列个兄弟节点margin会重合为一个margin 2，不是和父级元素的边距关系和top区分*/
            /*用审查元素看margin-top和top的区分。一个兄弟节点一个事定位的最近的父级元素*/
            margin-top: 30px;
            top: 30px;
            color: Red;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2">
            <div id="d3">
                <div id="d4">
                </div>
                <div id="d5">
                </div>
                <div id="d6">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

margin-top兄弟节点 top父级元素的区分。用审查元素查看

position：relative

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div
        {
            border: 2px solid;
        }
        #d1
        {
            width: 400px;
            height: 400px;
        }
        #d2
        {
            width: 350px;
            height: 350px;
        }
        #d3
        {
            width: 300px;
            height: 300px;
        }
        #d4
        {
            width: 90px;
            height: 90px;
        }
        #d5
        {
            width: 90px;
            height: 90px;
        }
        #d6
        {
            width: 90px;
            height: 90px;
            position:relative;
            right: 30px;
            bottom: 120px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2">
            <div id="d3">
                <div id="d4">
                </div>
                <div id="d5">
                </div>
                <div id="d6">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

相对定位：相对原来应该堆砌的位置上在trbl移动

有滚动条时position

没有定位的父级节点。在absolute内单单定义top或者bottom。只在当前面显示，下拉滚动条，此div不会移动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #d2
        {
            position: absolute;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            
            bottom:0px;
            /*top:0px;*/  
        }
    </style>
</head>
<body>
    <div id="d0">
        <div id="d1">
            111111111111111111
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="d2">
            222
        </div>
    </div>
</body>
</html>

没有定位的父级节点。定义top或者bottom的时候的情况。

没有定位的父级节点。在absolute内，定义top和right/left或者或者bottom和left/right。只在当前面显示下拉滚动条，此div不会移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #d2
        {
            position: absolute;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            left: 0px;
            bottom:0px;/*left:0px*/
            /*right:0px;
            bottom:0px;/*left:0px*/
            */
        }
    </style>
</head>
<body>
    <div id="d0">
        <div id="d1">
            111111111111111111
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="d2">
            222
        </div>
    </div>
</body>
</html>

两个同时定义时。定义top和right/left或者或者bottom和left/right。只在当前面显示

没有定位的父级节点。在absolute内单单定义left或者right。会在滚动条拉倒最下面（默认）显示。不在当前面显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #d2
        {
            position: absolute;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            left: 0px;
             /*right:0px;*/
        }
    </style>
</head>
<body>
    <div id="d0">
        <div id="d1">
            111111111111111111
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="d2">
            222
        </div>
    </div>
</body>
</html>

有滚动条的时候，left right默认最下面显示，不在当前面

position：fixed

随着滚动条的移动而移动！！！不是将滚动条拉到下面才能看到。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #d2
        {
            position:fixed;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            left: 0px;
            bottom:0px;/*left:0px*/
            /*right:0px;
            bottom:0px;/*left:0px*/
            */
        }
    </style>
</head>
<body>
    <div id="d0">
        <div id="d1">
            111111111111111111
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="d2">
            222
        </div>
    </div>
</body>
</html>

fixed 有的不支持。和position：absolute时，top：left或者top：right；不一样的效果。随着滚动条的移动而移动！！！不是将滚动条拉到下面才能看到

posted on 2015-02-07 23:15 李可在江湖阅读(355) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

李可

导航

公告

CSS定位

css默认值

position：absolute

margin-top top 在position区分

position：relative

有滚动条时position

position：fixed