Fork me on GitHub

李可

导航

统计

随笔 - 171
文章 - 0
评论 - 107
阅读 - 27万

公告

大家好，我叫李可，对大前端比较感兴趣，乐于分享技术，目前在北京工作。QQ群:471838073，欢迎大家多多交流。

昵称：李可在江湖
园龄： 11年
粉丝： 69
关注： 17

友情链接

linux示例

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

1. Re:火狐的3d视图插件Tilt 3D
我放弃了，除非老版本的FF，但我是不会这么干的
--williamdsy
2. Re:火狐的3d视图插件Tilt 3D
@涅槃633 @涅槃633 FF从47开始就不再支持3D视图了，没了没了...
--williamdsy
3. Re:火狐的3d视图插件Tilt 3D
@涅槃633 你好，你弄好了3D视图吗？...
--williamdsy
4. Re:火狐的3d视图插件Tilt 3D
楼主，tilt是不是没了，我搜不到，我目前只发现edge浏览器自带了这功能
--williamdsy
5. Re:vscode垂直选中列选中
好评！谢谢xd
--Repo_Kristx

CSS定位

阅读目录

css默认值
position：absolute
margin-top top 在position区分
position：relative
有滚动条时position
position：fixed

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

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

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

　　　　　　<link type="text/css" href="url" rel="stylesheet"/>

内嵌<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 李可在江湖阅读(356) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？