css定位

时间:2019-11-14
本文章向大家介绍css定位,主要包括css定位使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.css定位:改变元素在页面的位置

属性:

           position :static(偏移量不起效果),relative,absolute,fixed(固定元素位置)

           z-index:1,2,3(前后位置)

2.浮动:

属性:

         float:left,right,none,inherit(从父级继承属性)

         clear:去除浮动属性(包括继承来的)left,right,both,inherit

3.浮动的应用:瀑布流

.html

<body>
<div id="div1">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
<ul>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
</ul>
<ul>
<li><img src="img/7.jpg"></li>
<li><img src="img/8.jpg"></li>
</ul>
</div>
</body>

.css

*{
margin: 0px;
padding: 0px;
}
li{
list-style:none;
}
#div1{
width: 500px;
height: auto;
margin: 20px auto;
}
ul{
width: 20px;
float: left;
}

4.css3选择器

(1)元素选择器h1,a等

(2)选择器分组  h1,h2{}或 *{margin:0px;

                                               padding:0px;}

(3)类选择器详解

       结合元素选择器a.class{}

       多类选择器.class.class{}  (class=p1 p2  -> .p1.p2)

(4)ID选择器详解

       ID只能在文档中使用一次,类可以多次

       ID选择器不能结合使用

       当使用jS时,需要ID

(5)属性选择器详解

          [title]{}

          例:<a href =" ">极客学院</a>

                 [href]{   }

(6)后代选择器

(7)子元素选择器

(8)相邻兄弟选择器

原文地址:https://www.cnblogs.com/try-hard/p/11858402.html