前端全栈学习第六天-css

缺乏、安全感 2021-09-17 21:18 384阅读 0赞

不是所有布局都需要清除浮动，谁影响布局，我们清除谁

1：清除浮动的本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题

其实的本质叫闭合浮动会更好一些。清除浮动就是把浮动的盒子圈到里面，父盒子闭合出口和入口，不让他们出来影响其他元素。

2：清除浮动的方法

额外标签法

父级添加overflow属性方法

使用after伪元素清除浮动

使用before和after双伪元素清除浮动

a：额外标签法：最后一个浮动标签后面添加一个标签，清除浮动

如果清除了浮动，父亲会自动检测孩子高度，以最高的一个为准

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.father{
    			width: 1080px;
    			border: 1px solid black;
    			/*如果清除了浮动父亲会自动检测孩子高度，以高的为准*/
    		}
    		.son1{
    			width: 100px;
    			height: 200px;
    			background: red;
    			float: left;
    
    		}
    		.son2{
    			width: 100px;
    			height: 200px;
    			background: blue;
    			float: left;
    		}
    		.mather{
    			width: 100px;
    			height: 200px;
    			background: black;
    			
    		}
    		.clear{
    			clear: both;
    		}
    	</style>
    </head>
    <body>
    	<div class="father">
    		<div class="son1"></div>
    		<div class="son2"></div>
    		<div class="clear"></div>
    		
    	</div>
    	<div class="mather"></div>
    </body>
    </html>

没有清除浮动效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

清除浮动效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][]

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

b:给父亲添加overflow属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][]

可以给父级添加：overflow为hidden|auto|scroll都可以实现

优点：代码简洁

缺点：内容增多的时候，会影藏掉不会自动换行的内容，导致内容隐藏掉，无法显示需要溢出内容

c:双伪元素清除浮动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3][]

d：after伪元素清除浮动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4][]

visibility:hidden  容许浏览器渲染，但是不显示出来

3：相对位置

元素定位属性：定位模式和边偏移两个部分

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 5][]

静态定位的唯一用处：取消定位

相对定位(占位置)：脱标，占位置

注意：

相对定位组重要的一点是，他可以通过边偏移改变位置，但是原来的位置任然占有

每次移动的位置，都是u以自己的左上角为基点移动，相对于自己

绝对定位(不占位置)：

若没有父元素没有定位，则以当前浏览器屏幕为标准对齐

绝对定位是将元素依据最近的已经定位（绝对，相对，固定）的父元素(祖先)进行定位

说完相对定位和绝对定位，我们来看一个口诀

子绝父相

父亲要用相对定位，儿子要用绝对定位

原因是：相对位置占位置，父元素的盒子里面肯定是要有内容的，所以肯定要为他的儿子们占位置。

而子元素是要实现各种花里胡哨的效果，所以有的不需要占位置，这时用绝对定位最好，让他们自由的飘

我们来看一个小案例，诠释了什么是子绝父相

代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>哈根达斯</title>
        <style type="text/css">
        div {
            width: 310px;
            height: 190px;
            margin:50px auto;
            border: 1px solid black;
            position: relative;
            padding: 5px;
    
        }
    
        #price{
        	position: absolute;
        	top: 0;
        	left: 0;
        }
        </style>
    </head>
    
    <body>
        <div>
            <img src="img/价钱.png" id="price" width="50" height="50">
            <img src="img/ha.png" width="310" height="190" id="ha">
    	</div>
    </body>
    
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 6][]

4：定位的盒子居中对齐

加了定位和浮动的盒子，

margin: 0 auto;就失效了，但是margin-left没有失效

首先left：50%，父盒子一半的大小

然后走自己外边距负的一半值就可以了

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		div{
    			width: 200px;
    			height: 200px;
    			position: absolute;
    			left: 50%;
    			background: pink;
    			margin-left: -100px;
    
    		}
    	</style>
    </head>
    <body>
    	<div></div>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 7][]

利用定位加浮动的小案例

代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    
        #h {
            margin: 0 auto;
            width: 1259px;
            height: 472px;
            position: relative;
        }
    
        #nav {
            width: 790px;
            height: 80px;
            background: black;
            list-style: none;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -345px;
        }
    
        #nav li {
            width: 135px;
            height: 80px;
            float: left;
            margin-left: 15px;
            list-style: none;
    
    
        }
    
        #nav a {
            width: 135px;
            height: 80px;
            line-height: 50px;
            text-align: center;
            display: block;
            text-decoration: none;
    
        }
    
        #nav a:hover {
            background: #f4f4f4;
        }
        </style>
    </head>
    
    <body>
        <div id="h">
            <img src="img/shunfen.png" width="1259" height="472">
            <div id="nav">
                <ul>
                    <li><a href="">订单运输</a></li>
                    <li><a href="">订单运输</a></li>
                    <li><a href="">订单运输</a></li>
                    <li><a href="">订单运输</a></li>
                    <li><a href="">订单运输</a></li>
                </ul>
            </div>
        </div>
    </body>
    
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 8][]

简单淘宝轮播图，没有特效

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>轮播</title>
        <style type="text/css">
        *{
        	margin: 0;
        	padding: 0;
        }
        li{
        	list-style: none;
        }
        .lunbo {
            width: 592px;
            height: 355px;
            background: pink;
            margin: 100px auto;
            position: relative;
        }
    
        .lunbo a {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            margin-top: -50px
    
        }
    
        .left {
    
            left: 0;
            background: url(img/left.png) no-repeat;
    
        }
    
        .right {
            right: 0;
            background: url(img/right.png) no-repeat;
    
        }
        .lunbo ul{
        	width: 110px;
        	height: 18px;
        	background: rgba(255,255,255,.3);
        	position: absolute;
        	bottom: 18px;
        	left: 50%;
        	margin-left: -55px;
        	border-radius: 8px;
        }
        .lunbo ul li{
    width: 8px;
    height: 8px;
    background: black;
    float: left;
    border-radius: 50%;
    margin: 7px;
        }
       .lunbo .current{
        	background: red;
        }
        </style>
    </head>
    
    <body>
        <div class="lunbo">
            <a href="#" class="left"></a>
            <a href="#" class="right"></a>
            <ul >
            	<li class="current"></li>
            	<li></li>
            	<li></li>
            	<li></li>
            	<li></li>
            </ul>
        </div>
    </body>
    
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 9][]

分析一下：做轮播图。用到了盒子模型，浮动，定位。用到的是css的精华，这也是为什么面试让你手撕轮播图

首先，轮播图由五部分组成。盒子，图片，左右箭头，底部圆点

图片和左右箭头，底部圆点属于兄弟关系。他们与外部的盒子是属于父子关系

a：先根据图片大小，确定盒子大小。

此时盒子的宽高，位置要写明白。其次是位置，由于用定位，且这个是父级，所以用relative

b：盒子里面放图片，而且大小一致，所以按顺序放图片就可以

c:箭头部分。这里比较有考究。首先两个图片有相同之处，都是子元素，都用绝对定位，距离顶部的距离，都一样。所以可以单独写成一个。下面左边和右边载单独写就可以。左边left0，右边right0

d底部是一个盒子ul，先给他指定大小，定位，

li负责小圆点部分。大小，圆角，浮动，外间距。

e：最后的当前颜色。这里注意权重问题，如果单独写一个，权重不够，不能覆盖掉原来的颜色，

最后一个固定定位

fixed(认死理型)，不占位置，完全脱标，

固定定位是特殊的绝对定位，就好比正方形是特殊的矩形。只不过fixed谁也不认，就认浏览器！

固定定位是独立的，不参与布局，所以遇到了，单独写就行!

用处，固定到屏幕两侧，固定到屏幕最上方。但是这是会出现一个问题，由于固定定位不占位置，下面内容会被他的高度高度覆盖。这是只需要给内容加一个margin-top就可以了。

absloute(拼爹型)绝对定位，要看父级的定位，要以父级左上角为定位，一般是子绝父相。要是没有父级，或者父级没有定位，以浏览器当前窗口为准

reletive(相对定位)(自恋型)，以自己左上角为标准定位，相对于自身定位

定位的模式转换，固定定位和绝对定位和浮动一样，搜存在隐式转换。当你设置了这些属性。如果是行内元素，这时你不用转换成块元素，也可以进行宽高设置。因为他已经转化为行内块。而且宽高就是本身文字宽高

案例：如果不给他设置宽，他是通栏显示的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 10][]

效果图

![20190121191543111.png][]

但是给他设置浮动以后

![20190121191617450.png][]

![20190121191626771.png][]

你会发现什么都没有，因为浮动会进行隐式转换，把它转换成行内块，行内块我的宽高是根据文字的多少来决定的，现在，没有设置宽，也没有文字，所以也没什么也没有，包括设置的背景

以上说的是背景图片，但是插入图片就不一样了，他是当文字来看的，所以不设置宽，进行浮动，也是会通栏显示的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 11][]

这也就是想要通栏显示，加width:100%了

5 z-index叠放次序

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            position: absolute;
        }
    
        .red {
            background: red;
            z-index: 0;
        }
    
        .green {
            left: 50px;
            top: 50px;
            background: yellow;
            z-index: 1;
        }
    
        .black {
            left: 100px;
            top: 100px;
            background: blue;
            z-index: 2;
        }
        </style>
    </head>
    
    <body>
        <div class="red"></div>
        <div class="green"></div>
        <div class="black"></div>
    </body>
    
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 12][]

在css只要想条调整重叠位置元素的堆叠顺序，可以对定位元素应用z-index层叠定位属性，z-index默认值为0，取值越大，定位元素在层叠元素中越上，后面数字不能加单位，只有绝对定位，相对定位，固定定位才有此属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 13][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/8d842273d96c4ae0a1f7742587f7d156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/6d002eb08f4b4b1cb0df9d2bbf6c6ece.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/eea32a35c08843ada76934f6cae37f93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210812/8a3ebf6f421d4b238031a1bf4ae8f4b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4]: /images/20210812/aebf4cef39bb42d68794a136011440fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 5]: /images/20210812/dc524c2d8e074dfe84e309b4c8ae3630.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 6]: /images/20210812/d9f41e66e8d643568e2541fca7eb3781.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 7]: /images/20210812/e9b82dd6221b4e579ad1c4608707c044.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 8]: /images/20210812/90f800bd9d7f4076832435386d10e450.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 9]: /images/20210812/86b95ec5894748aab20fd1624c2c21fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 10]: /images/20210812/048eb4f8eaa64454bd891c8de13d4ab8.png
[20190121191543111.png]: /images/20210812/336964b7c96c4032b7277c45264f1ff5.png
[20190121191617450.png]: /images/20210812/0c8be02e5df64920ad73f5c73aeecb24.png
[20190121191626771.png]: /images/20210812/cc95d41215bf4af8861294767c6171f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 11]: /images/20210812/fa84e5e1d9194e9fbafd720a9c9b644b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 12]: /images/20210812/bbed703ae5474694b0c0bebe597beb09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 13]: /images/20210812/e55202e34b5f406ba6abed5f69de774e.png