CSS层叠样式表（二）

最新推荐文章于 2024-01-09 20:49:39 发布

lyr...

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量72

点赞数

本文链接：https://blog.csdn.net/qq_51209707/article/details/117562622

版权

CSS的浮动与定位的灵活应用

一、CSS浮动的应用

二、CSS定位的应用

css四种定位的介绍

一、CSS浮动的应用

1、什么是css

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

2、css的传统应用方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [class^="item"]{
            background-color:#f5f5f5;
            display:block;
            border: solid 1px black;
        }
        .left{
            float: left;
        }
        .container{
            background-color:#ff000052;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1 left">1</div>
        <div class="item2 left">2</div>
        <div class="item3 left">3</div>
        <div class="item4 left">4</div>
        <div class="item5 left">5</div>
        <div class="item6 left">6</div>
        <div style="clear:both"></div>
    </div>
    <div>7<div>
</body>

3、css的灵活应用方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [class^="item"]{
            background-color:#f5f5f5;
            display:block;
            border: solid 1px black;
        }
        .left{
            float: left;
        }
        .container{
            background-color:#ff000052;
        }
        .clearfix:after{
            content:'.';
            display:block;
            clear:both;
            visibility:hidden;
            height:0;
        }
    </style>

</head>
<body>
    <div class="container clearfix">
        <div class="item1 left">1</div>
        <div class="item2 left">2</div>
        <div class="item3 left">3</div>
        <div class="item4 left">4</div>
        <div class="item5 left">5</div>
        <div class="item6 left">6</div>
    </div>
    <div>7<div>
</body>

以上两端代码实现的结果都是一样的如下图所示，只是传统方法在每一个浮动的标签块沉底的时候增加一个div属性赋予clear:both，虽然可以实现，但是每一次都需要去写这个div。而第二个方法就要简单一些。

二、css定位的应用

1、元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

定位模式 + 边偏移 = 完整定位

偏移量

边偏移
边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值
值	描述
static	自动定位（默认定位方式）
absolute	相对定位，相对于其原文档流的位置进行定位
relative	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

2、四种定位的介绍