浮动与定位

1.元素的浮动属性 float

属性值描述

left 元素左浮动

right 元素右浮动

none 元素不浮动（默认值）

2.清除浮动

选择器{clear：属性值；}

属性值描述

left 不允许左侧有浮动元素

right 不允许右侧有浮动元素

both 同时清除左右两侧元素浮动

3.overflow属性

选择器{overflow}

属性值描述

visible 　　　　　　　　　　内容不会被剪切，会呈现在元素框外面

hidden　　　　　　　　　　溢出内容会被剪切，且别剪切的内容不会再显示

auto　　　　　　　　　　　在需要时产生滚动条，及自适应所要显示的内容　

scroll　　　　　　　　　　溢出的内容会被剪切，且浏览器会始终显示滚动条

visible 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
div{
    width: 100px;
    height: 40px;
    background-color: burlywood;
     overflow: visible;          /* 溢出内容呈现的在元素框外 */
}
    </style>
</head>
<body>
    <div>
        当盒子内的元素超出盒子自身的大小的时候就会溢出如果要显示溢出内容的显示方式，就需要使用overflow属性，它用于规范元素中溢出内容的显示方式
    </div>
</body>
</html>

overflow：hidden；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
div{
    width: 100px;
    height: 40px;
    background-color: burlywood;
     overflow: hidden;          /* 溢出内容呈现的在元素框外 */
}
    </style>
</head>
<body>
    <div>
        当盒子内的元素超出盒子自身的大小的时候就会溢出如果要显示溢出内容的显示方式，就需要使用overflow属性，它用于规范元素中溢出内容的显示方式
    </div>
</body>
</html>

   overflow: auto;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
div{
    width: 100px;
    height: 40px;
    background-color: burlywood;
     overflow: auto;          /* 溢出内容呈现的在元素框外 */
}
    </style>
</head>
<body>
    <div>
        当盒子内的元素超出盒子自身的大小的时候就会溢出如果要显示溢出内容的显示方式，就需要使用overflow属性，它用于规范元素中溢出内容的显示方式
    </div>
</body>
</html>

 overflow: scroll;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
div{
    width: 100px;
    height: 140px;
    background-color: burlywood;
     overflow: scroll;          /* 溢出内容呈现的在元素框外 */
}
    </style>
</head>
<body>
    <div>
        当盒子内的元素超出盒子自身的大小的时候就会溢出如果要显示溢出内容的显示方式，就需要使用overflow属性，它用于规范元素中溢出内容的显示方式
    </div>
</body>
</html>

4.元素的定位

选择器{position：属性值；}

值　　　　　　　　　　　　描述

static　　　　　　　　　　　静态定位（默认定位方式）

relative　　　　　　　　　　相对定位，相对于其原文档流的位置进行定位

absolute　　　　　　　　　绝对定位，相对于其上一个已定位的父元素定位

fixed　　　　　　　　　　　固定定位，先对于浏览器窗口进行定位

边偏移属性描述

top　　　　　　　　　顶端偏移量，定位元素相对于其父元素上边线的距离

bottom　　　　　　　　底部偏移量，定位元素相对于其父元素下边线的距离

left　　　　　　　　　左侧偏移量，定位元素相对于其父元素左边线的距离

right　　　　　　　　　右侧偏移量，定位元素相对于其父元素右边线的距离　　　

静态定位 static

静态定位是元素默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。就是HTML中的默认位置

任何元素在默认状态下都会以静态定位来确认那自己的位置，所以没有定义position属性时并不说明该元素没有自己的位置，会遵循默认的静态位置，静态位置下无法通过边偏移属性来改变元素位置

相对定位 relative

相对定位 relative相对于其原文档流的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素相对定位后，可以通过边偏移属性去改变位置，但是他在文档流中的位置

仍然保留

绝对定位absolute

绝对定位是将元素一句已定位的父元素进行定位，若父元素没有定位就会依据body根元素进行定位。absolute可以将元素的定位模式设置为绝对定位

固定定位fixed

固定定位是绝对定位的一种特殊形式，他以浏览器窗口作为参照物来的那个一网页元素。当使用fixed元素时，即可将元素的定位模式设置为绝对定位

当元素设置固定定位后，他将脱离标准文档流的控制，始终依据浏览器窗口俩定义自己的始终位置，不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

posted @ 2021-12-10 12:04 しっ阅读(78) 评论(0) 收藏举报

刷新页面返回顶部

しっ

浮动与定位

公告