CSS 的定位布局

最新推荐文章于 2024-04-12 05:28:38 发布

Python小子

最新推荐文章于 2024-04-12 05:28:38 发布

阅读量828

点赞数 2

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_43883022/article/details/88815265

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS 的定位

1、定位分类

1、普通流定位（默认）
- 普通流定位又称文档流定位，是页面中元素的默认定位方式，典型的流式布局
- 特点：
  - 每个元素在页面中都有位置空间，不会层叠
  - 每个元素都是从父元素的左上角开始布局
  - 块级元素从上到下排列，行内元素和行内块元素从左往右排列
2、浮动定位
- 特点：
  - 脱离文档流定位，元素则不占据页面的空间
  - 未浮动的元素会上前占位
  - 浮动元素会停靠在父元素的左边或右边，或其他已浮动元素的边缘
  - 浮动元素只能在当前行浮动
  - 可处理多个块级元素在同一行内显示
属性：float

取值	说明
none	无浮动，默认值
left	浮动到父元素的左边，或停靠在左边已有浮动元素的边缘（左浮动）
right	浮动到父元素的右边，或停靠在右边已有浮动元素的边缘（右浮动）

浮动的特殊效果：
- 如果父元素中显示不下所有的已浮动元素时，最后一个换行显示，但有可能会卡住
- 元素一旦浮动后，都将变成块级元素（行内元素会修改尺寸，如span，a等）
- 块级元素元素浮动后，未指定宽度时，则宽度由内容决定
- 文字，图片，行内元素是采用环绕的方式来排列，不能层叠浮动元素的下面

<head>
    <style>
        #red,#green,#blue{width: 100px;height: 100px;float:left;}
        #red{
        	background-color:red;
             /* height:101px;  当body变小时，显示不下的元素会换行，并且会卡住*/
        }
        #green{background-color:green;}
        #blue{background-color:blue;}
        span{
            background-color:orange;
            float: left;
            height: 100px;  /* 行内元素浮动后，可以修改尺寸 */
        }
        #d2{
            background-color: #00cc11; /* 未指定尺寸时，块级元素独占首行，但文本不会被浮动的元素压住 */
            width: 100px;  /* 指定尺寸后，文档流块级元素会压在已浮动元素下面，但文本会向下溢出 */
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
    <span id="sp1">行内文本</span>
    <div id="d1"></div>
    <div id="d2">div内的文本信息</div>
</body>

清除浮动
- 当前元素浮动，会影响后面元素的位置，如果后面元素不受当前元素浮动影响，则可以通你清除浮动的方式处理。
属性：clear

取值	说明
none	无任何清除浮动的操作，默认值
left	清除前一元素左浮动的影响
right	清除前一元素右浮动的影响
both	清除前一元素任何浮动的影响

<head>
    <style>
        #red,#green,#blue{width: 100px; height: 100px; float:left;}
        #red{background-color:red;}
        #green{background-color:green;}
        #blue{
            background-color:blue;
            clear:left;  /* 绿色左元素浮动时，蓝色元素位置不变，*/
        }
    </style>
</head>
<body>
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
</body>

浮动元素对父元素高度的影响
- 父元素的高度是以未浮动的子元素的高度为准，如果子元素全部浮动，则父元素高度为0
- 要想让子元素全部浮动后，父元素的高度随着已浮动的元素高度自动变化，有以下两种方式：
  - 1、为父元素增加overfiow属性，取值为auto或者hidden
    - 缺点：如有溢出显示内容时，也一同被隐藏
  - 为父元素中增加一个块级元素（div或p），并将clear设置为both

<head>
    <style>
        #parent{border:2px solid #000000; /* overflow: auto */}  
        #p1,#p2,#p3{width: 100px; height: 100px;}
        #p1{background-color:red; float:left;}
        #p2{background-color:green; float:left;}
        #p3{background-color:blue; float:left;}
    </style>
</head>
<body>
    <div id="parent">
        <div id="p1"></div>
        <div id="p2"></div>
        <div id="p3"></div>
        <div style="clear: both"></div>   <!-- 占位使用 -->
    </div>
        文本信息
    </div>
</body>

3、其他定位方式
- 1、相对定位
- 2、绝对定位
- 3、固定定位
  属性position

取值	说明
static	默认值
relative	相对定位
absolute	绝对定位
fixed	固定定位

将元素的position设置为relative / absolute / fixed 时，该元素称之为 已定位元素

偏移属性
- 作用：配合已定位元素实现位置的移动

属性	取值	说明
top	以 px 为单位的数值（取正值下移，反之）	以元素的上边为基础边移动元素
bottom	以 px 为单位的数值（取正值上移，反之）	以元素的下边为基础边移动元素
left	以 px 为单位的数值（取正值右移，反之）	以元素的左边为基础边移动元素
right	以 px 为单位的数值（取正值左移，反之）	以元素的由边为基础边移动元素

注意：
- 取值为正，往元素内移动
- 已定位元素才可以使用偏移属性（浮动和文档流属性不能偏移）
1、相对定位
- 含义：元素相对于原位置偏移某个距离
- 语法：position：relative；top：10px；

<head>
    <style>
        #d1{
            width:100px;
            height: 50px;
            background-color:#dddddd;

        }
        #d1:hover{
            position:relative;  /* 鼠标悬停时，元素向左上方偏移 */
            top: -5px;
            left:-5px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>

2、绝对定位（关联定位）
- 绝对定位会脱离文档流，不占据页面空间
- 绝对定位的元素会相对于层级最近的，已定位的祖先元素进行位置初始化
- 如果绝对定位的元素没有层级最近的，已定位的祖先元素会相对于body进行位置初始化

<head>
    <style>
        #d1{
            width:100px;
            height: 20px;
            background-color:#dddddd;
            position: relative;  /* d2的祖先元素，变成最近的已定位元素，配合d2的绝对定位 */
            left: 100px;
        }
        #d2{
            width: 200px;
            background-color: #dddddd;
            position: absolute;   /* 绝对定位，关联元素为d1 */
            top: 20px;
            display:none;  /* 隐藏d2元素 */
        }
        #d1:hover #d2{
            display: block;  /* 鼠标悬停d1元素时，显示d2元素 */
        }
    </style>
</head>
<body>
    <div id="d1">
        目录
        <div id="d2">
            1.<br>
            2.<br>
            3.<br>
            4.<br>
            5.<br>
        </div>
    </div>
</body>

堆叠顺序：
- 属性：z-index
- 取值：无单位的数字，数字越大，越靠前，默认为0（数值一样时，后定义元素靠上）

<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            position: absolute;  /* 绝对定位，关联元素body */
        }
        #d1{background-color: yellow; left: 0; top: 0;}  /* 默认最下面 */
        #d2{background-color: orangered; left: 30px; top: 30px;}  /* 默认中间 */
        #d3{background-color: greenyellow; left: 60px; top: 60px;}  /* 默认最上面 */
        #d1:hover, #d2:hover, #d3:hover{z-index: 10;}  /* 鼠标悬停时在最上面 */
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>

3、固定定位
- 将元素固定在浏览器的某个位置，不会随着滚动条的滚动而移动位置
- 注意：固定定位元素一直是以body为关联元素进行位置初始化

<head>
    <style>
        #d1{
            width: 900px;
            height: 20px;
            border: 1px solid red;
            background-color: #ffffff;
            position: fixed;  /* 固定定位 */
        }
        #d2{
            position: absolute;
            top: 20px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>

Python小子

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS 的定位布局

CSS 的定位1、定位分类1.1、普通流定位（默认）      普通流定位又称文档流定位，是页面中元素的默认定位方式，典型的流式布局特点：      1、每个元素在页面中都有位置空间，不会层叠      2、...
复制链接

扫一扫