1. Toy模板网首页
  2. > Toy博客

float浮动布局大战position定位布局

10月前 作者：小技与小术 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了float浮动布局大战position定位布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

布局方式

1.普通文档流布局：我们得网页内容从上往下，从左往右进行的布局，其中块元素独占一行（我们可以使用margin，padding，display，line-height去进行布局）
2.浮动布局：浮动可以使用一个元素脱离自己原本的位置，并在父级元素的内容区中向左或向右移动，直到碰到父级元素内容区的边界或者其他浮动元素为止
3.定位布局：让一个元素在一个指定位置进行显示
绝对定位：基于父级坐标进行移动
相对定位：基于元素本身进行移动

普通文档流布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 10px solid black;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 10px solid red;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
            border: 10px solid black;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

float浮动布局大战position定位布局,css,css3,html

浮动布局（浮动主要针对与black，inline元素）

让开发人员可以更好地实现左右水平布局，以前的解决方式是把元素转为行内块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 10px solid black;
            display: inline-block;/*把块级元素转化为行内块元素*/
            
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 10px solid red;
            display: inline-block;/*把块级元素转化为行内块元素*/

        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
            border: 10px solid black;
            display: inline-block;/*把块级元素转化为行内块元素*/
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

float浮动布局大战position定位布局,css,css3,html
但是转为行内块元素也有一定的缺点：
1.性能比较差
2.如果盒子内容超出了宽高，排版也会塌陷
3.基线对齐和元素与元素之间会出现空格
浮动优点：

1.元素与元素之间没有空格存在
2.浮动元素可以使得块级元素水平排列，一行排列不下就换行排列

float属性

1.left（向左浮动）
2.right（向右浮动）
3.none（默认值，所有元素默认不浮动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 10px solid black;
            float: right;/*向右浮动*/
            
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 10px solid red;
            float: left;/*向左浮动*/

        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
            border: 10px solid black;
            float: left;/*向左浮动*/
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

float浮动布局大战position定位布局,css,css3,html

浮动用途

1.文本环绕（主要）：浮动的目的主要是为文本环绕而产生
2.取消元素之间的空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box1 img{
            width: 100px;
            height: 100px;
            float: left;/*把img浮动了，p标签感受不到浮动，但是文字，inline，inline-black可以感受到浮动，也就是可以对浮动元素进行环绕*/
        }
    </style>
</head>
<body>
    <div class="box1">
        <img src="../img/天使美女.jpg" alt="天使美女">
        <p>大概傻大个法大纲规范三国杀矮冬瓜法大纲刚发的嘎阿纲傻瓜蛋傻大个啥风格烦得很昂返回的是沙沟湖大哥大哥昂很多事</p>
    </div>
</body>
</html>

float浮动布局大战position定位布局,css,css3,html

浮动元素父级高度塌陷

当父级元素没有设置高度时，高度会由文档流内容撑开，而当子元素浮动之后，脱离了文档流，所以父级高度也就不会被撑开了，这对我们后续的布局结构会造成很多困扰

解决方法：
1.定高
2.为父级元素设置overflow:hidden
3.设置清除浮动样式
clear:清除浮动属性
clear:left清除左浮动
clear:right清除右浮动
clear:both同时清除左右浮动

position属性定位篇

相对定位（relative为属性值，配合left属性，和top属性使用）

相对定位能让元素保持文本流位置的同时可以通过方位属性（x/y轴）进行相对原位置的偏移（单纯写个定位是没有用的，必须要配合方向）

特点：
1.相对定位不设置偏移量不会有任何变化和对页面的影响
2.参照自身位置进行定位
3.不会脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            
            position: relative;
            left: 100px;/*距离左边多少px*/
            top: 100px;/*距离上方多少px*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

float浮动布局大战position定位布局,css,css3,html

绝对定位（absolute属性值）

绝对定位能让元素完全脱离文档流，会使用方位属性（left，top等）相对于最近的有定位（有relative属性的）的父级元素进行偏移

特点：
1.找不到最近的定位（有relative属性的）父级，则相对于body标签
2.一般配合相对定位使用（参照物）
3.完全脱离文档流

父相子绝：

  • 父元素为相对定位，子元素为绝对定位，子元素会根据移动后的父元素位置显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            margin: 100px auto;

            position: relative;
        }
        .box1{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            margin: 20px auto;
        }
        .box2{
            width: 20px;
            height: 20px;
            border: 10px solid red;

            position: absolute;/*绝对定位，必须存在方位属性，否则无效。如果存在relative，则relative的地方就是父级，如果没有relative，则默认以body为父级*/
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <div class="box2">

            </div>
        </div>
    </div>
</body>
</html>

float浮动布局大战position定位布局,css,css3,html文章来源地址https://www.toymoban.com/news/detail-697408.html

固定定位（fixed属性值）（垃圾广告案例）

固定定位把元素固定在网页的一个位置，拖动鼠标滑轮，元素不移动

偏移量

四个方向:	
	top: ↑ 顶部偏移
	right: → 右侧偏移
	bottom: ↓ 底部偏移
	left: ← 左边偏移
	
左上为尊 左上的优先级高（一般不会写上下 左右方向）
一般只用top和left

到了这里，关于float浮动布局大战position定位布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包