CSS3(二)-CSDN博客

本文链接：https://blog.csdn.net/m0_71742461/article/details/130045899

CSS(二)

小生整理之前学习做过的笔记，分享出来，后续笔记会陆续整理出来，不喜勿喷~~~~~
如有错误，虔请各位大牛指正~~~

10.浮动

浮动就是让文档可以按照向左或者是向右浮动，浮动的目的是为了布局。常见的布局包括1-3-1布局以及1-2-1布局，还有1-1-1布局（图片式布局）

div{
   float: left|right;
}

如果使用float修饰了一个元素，那么该元素就会脱离传统的文档流，形成浮动流。
在这里插入图片描述

最终实现的效果：

在这里插入图片描述

在浮动后，元素会释放后原来的位置，其他元素会占用浮动元素的位置。

10.1清除浮动

{
	clear：left|right|both
}

left:清除自身左侧带有float:left的元素。
right:清除自身右侧带有float:right的元素。
both:清除自身两侧带有float:left|right元素。

10.2处理父级元素边框塌陷问题

在一个div中所有元素全部浮动了，就会导致外层的父级元素塌陷问题产生。

有一下四种处理方式：

设置外层父级元素的高度

<div id="father">
	<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />
</div>
	<div class="layer02"><img src="image/photo-2.jpg" alt="图书" />
</div>
	<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />
</div>
	<div class="layer04">浮动的盒子……</div>
</div>
#father {height: 400px; border:1px #000 solid; }

优点：简单

缺点：元素固定高会降低扩展性，很难确定父级元素的准确高度。

浮动元素后面加空div

<div id="father">
	<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />
</div>
	<div class="layer02"><img src="image/photo-2.jpg" alt="图书" />
</div>
	<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />
</div>
	<div class="layer04">浮动的盒子……</div>
	<div class="clear"></div>
</div>
.clear{ clear: both; margin: 0; padding: 0;}

优点：简单

缺点：会导致代码中出现大量的空div，造成代码冗余。

父级添加overflow属性

overflow代表溢出后的处理方法

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其内容

<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />
</div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" />
</div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />
</div>
<div class="layer04">浮动的盒子……</div>
</div>
#father {overflow: hidden;border:1px #000 solid; }

优点：简单

下拉列表框的场景不能使用

父级添加伪类after

<div id="father" class="clear">
	<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" />
</div>
	<div class="layer02"><img src="image/photo-2.jpg" alt="图书" />
</div>
	<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" />
</div>
	<div class="layer04">浮动的盒子……</div>
</div>
.clear::after{
    content: ''; /*在clear类后面添加内容为空*/
    display: block; /*把添加的内容转化为块元素*/
    clear: both; /*清除这个元素两边的浮动*/
}

优点：没有其他副作用。

确定：稍微复杂。（推荐使用）

10.3 display

一种页面元素的显示效果。

<table>
    <tr>
        <td>值</td>
        <td>说明</td>
    </tr>
    <tr>
        <td>block</td>
        <td>块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符</td>
    </tr>
    <tr>
        <td>inline</td>
        <td>内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符</td>
    </tr>
    <tr>
        <td>inline-block</td>
        <td>行内块元素，元素具有内联元素的特性，也具有块元素的特征</td>
    </tr>
    <tr>
        <td>none</td>
        <td>设置元素不会显示</td>
    </tr>
</table>

如果通过display实现布局，可以利用inline-block横向展开元素内容，但是会识别到空白代码，因此会产生一个空白间距，不适合做布局。

10.4 position

在页面中经常会见到下拉列表，广告漂浮等各种样式，所采用的的就是定位实现。定位不适合做布局，可以做一些特效处理。

在使用position时，会有四个方向进行偏移量调整：left（右）\right（左）\bottom（上）\top（下）

static

默认值，没有定位
相对定位relative

相对自身原来位置进行偏移，他原来的位置会被保留下来
- 相对于自己的初始位置来定位
- 元素位置发生偏移后，他原来的位置就会被保留下来
- 层级提高，可以把标准的文档流中的元素及浮动元素盖在下边
绝对定位absolute
- 使用了绝对定位的元素以离它最近的一个“已经定位”的“祖先元素”为基准进行偏移
- 如果没有已经定位的祖先元素，会以浏览器的窗口为基准进行定位
- 绝对定位的元素从标准文档流中脱离，这意味着他们对其他元素的定位不会造成影响
- 元素位置发生偏移后，他原来的位置不会被保留下来
- 一般子元素会设置绝对定位，父级元素为了保持位置会设置相对定位
- 层级越高，可以把标准文档流中的元素及浮动元素盖在下面
固定定位

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器的窗口。
- 相对浏览器窗口来定位
- 偏移量不会随着滚动条的移动而移动