淘先锋技术网

首页 1 2 3 4 5 6 7

前端全栈学习第六天-css

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

1：清除浮动的本质

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

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

2：清除浮动的方法

额外标签法

父级添加overflow属性方法

使用after伪元素清除浮动

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

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

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

代码：

<!DOCTYPE html>
<html >
<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>

没有清除浮动效果图：

清除浮动效果图：

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

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

b:给父亲添加overflow属性

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

优点：代码简洁

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

c:双伪元素清除浮动

d：after伪元素清除浮动

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

3：相对位置

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

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

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

注意：

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

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

绝对定位(不占位置)：

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

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

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

子绝父相

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

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

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

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

代码

<!DOCTYPE html>
<html >

<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>

效果图

4：定位的盒子居中对齐

加了定位和浮动的盒子，

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

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

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

代码：

<!DOCTYPE html>
<html >
<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>

利用定位加浮动的小案例

代码

<!DOCTYPE html>
<html >

<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="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >订单运输</a></li>
                <li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >订单运输</a></li>
                <li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >订单运输</a></li>
                <li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >订单运输</a></li>
                <li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >订单运输</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

效果图

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

代码：

<!DOCTYPE html>
<html >

<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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="left"></a>
        <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="right"></a>
        <ul >
        	<li class="current"></li>
        	<li></li>
        	<li></li>
        	<li></li>
        	<li></li>
        </ul>
    </div>
</body>

</html>

 

效果图

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

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

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

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

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

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

 

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

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

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

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

最后一个固定定位

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

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

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

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

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

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

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

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

效果图

但是给他设置浮动以后

 

 

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

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

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

5 z-index叠放次序

代码：

<!DOCTYPE html>
<html >

<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>

效果图

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