css0005：浮动和定位

最新推荐文章于 2024-09-14 17:04:32 发布

一个码农

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量137

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44699728/article/details/90732413

版权

一，文档流（标准流）：
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。
二，浮动布局：

 <style>
        div{

        }
        #frist{
            width: 200px;
            height: 200px;
            border: black solid 1px;
            background-color: yellow;
            float: left;
        }
        #second{
            width: 200px;
            height: 200px;
            border: black solid 1px;
            background-color: red;
            float: left;
        }
        #three{
            width: 200px;
            height: 200px;
            border: black solid 1px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="frist"></div>
     <div id="second"></div>
     <div id="three"></div>
</body>

上面三个盒子的布局方式就是浮动布局。

float:  left   |   right

特点：
★元素浮动之后不占据原来的位置（脱标）
★浮动的盒子在一行上显示
★行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）

浮动的作用：

◆文本绕图：只能是左右绕，不能中间绕
◆制作导航：横向多个导航放在一起
◆网页布局：利用浮动安排横向盒子，进行布局

清除浮动：（注意：清除浮动不是不用浮动了，而是消除浮动带了的脱标的问题。）
浮动的弊端：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。主动向上补，造成文本丢失
◆清除浮动不是不用浮动，清除浮动产生的不利影响。
◆清除浮动的方法
1，直接clear：

clear: left  |  right  | both

工作里用的最多的是clear:both;（both代表清除左右两边的浮动，但是清除了之后，还会出现盒子在原来位置的情况）
在这里插入图片描述
★额外标签法----父子关系中的子清除浮动
在最后一个浮动元素后添加标签。

★给父集元素使用overflow:hidden;

如果有内容出了盒子，不能使用这个方法。

★伪元素清除浮动推荐使用（写一个清除浮动的类标签，需要清除浮动的标签只需要继承它就好了）
在这里插入图片描述

Overflow

overflow：hidden；只可以看到盒子里面的类容，类容多少取决于你的盒子多大
overflow：visible；有多少放多少，多余的在盒子外面，会影响布局
overflow：scroll；即使类容少，也会显示滚动条1，滚动条1是占位置的
overflow：auto；类容少就没有滚动条，多了才加，自适应。

在这里插入图片描述
二，定位：
有三种定位方式，定位完了之后可以左右上下移动。
1静态定位：

定位方向: left  | right  | top  | bottom

◆position:static; 静态定位。默认值，就是文档流。（没有脱标，定了位就不动了）
在这里插入图片描述
◆绝对定位

Position:absolute;
特点：
★元素使用绝对定位之后不占据原来的位置（脱标）
★元素使用绝对定位，位置是从浏览器出发。
★嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
★嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
★给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）

在这里插入图片描述
◆相对定位

Position: relative;
特点：
★使用相对定位，位置从自身出发。
★还占据原来的位置。
★子绝父相（父元素相对定位，子元素绝对定位,其他元素不会往上顶）
★行内元素使用相对定位不能转行内块
◆固定定位
Position:fixed;
特点：
★固定定位之后，不占据原来的位置（脱标）
★元素使用固定定位之后，位置从浏览器出发。
★元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）

定位要注意子绝父相

定位的盒子居中显示
1：margin： auto；只能让标准流的盒子居中对齐
2：定位的盒子居中：先向右走父元素的一半50%，再向左走自己的一半
在这里插入图片描述

标签包含规范
1：div可以包含所有的标签
2：p标签不能包含div h1等标签，可以包含a标签，就是说p标签里面不能包含块元素
3：h1可以包含p，div等标签
4：行内元素不要包含块元素，因为行内元素没有宽高，而块元素默认是独占一行
规避脱标流
1：尽量使用标准流
2：标准流解决不了的使用浮动
3：浮动解决不了的使用定位
图片和文字垂直居中对齐
Vertical-align对inline-block最敏感
默认属性Vertical-align：baseline
Css可见性
Overflow:hidden;溢出隐藏
Visibility: hidden;隐藏元素隐藏之后还占据原来的位置
Display：none；隐藏元素隐藏之后不占据原来的位置
Dispaly：block；元素可见