css基础布局细节（一）

最新推荐文章于 2024-02-18 19:14:26 发布

seven-yang

最新推荐文章于 2024-02-18 19:14:26 发布

阅读量527

点赞数

分类专栏： css基础文章标签： css

本文链接：https://blog.csdn.net/yangyixue123/article/details/78196913

版权

一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。

方式1

 <style type="text/css">
        #box{
            width: 900px;
            height: 100px;
            display:flex;
            flex-direction: row;
            align-items:center;
            border: 1px solid yellow;
        }
       .left{
           height: 100%;
           background-color: red;
           flex-basis: 100px;
           -webkit-flex-basis: 100px;
       }
        .right{
            background-color: green;
            flex-grow: 1;
            height: 100%;
        }
    </style>

<div id="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

方式2：浮动布局

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 220px;
            background-color: red;
            float: left;
        }
        .right{
            background-color: blue;
            margin-left: 220px;
        }

    </style>

<div class="left">left siderbar</div>
<div class="right">right siderbar</div>

定位（position）

点击链接：css布局说
点击链接：定位详解
理解：相对于一个元素来定义另一个元素位置

position属性：

static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分
relative：相对定位，元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。

absolute：绝对定位，相对父元素定位，情况有两种

a.设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素
　b.如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

fixed：绝对定位，元素框不再占有文档流位置，并且相对于浏览器窗口（body）进行定位
sticky：(这是css3新增的属性值)粘性定位，相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦移出偏移范围后，会被当成fixed定位，相对于视口进行定位。目前适用于浏览器只有FireFox和iOS的Safari

demo：固定页头和页脚

<style type="text/css">
        .header{
            width: 100%;
            height: 100px;
            background-color: yellow;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
        }
        .center{
            width: 100%;
            height: 800px;
            background-color: yellowgreen;
            margin-top: 100px;
        }
        .footer{
            width: 100%;
            height: 100px;
            background-color: yellow;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="header">头部头部头部</div>
<div class="center">中间部分中间部分中间部分</div>
<div class=

最低0.47元/天解锁文章

seven-yang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css基础布局细节（一）

一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。方式1 style type="text/css"> #box{ width: 900px; height:
复制链接

扫一扫