div+css(2)

  • 浮动

在div+css 中浮动分为左浮动,右浮动,清楚浮动

①右浮动

    所谓右浮动,指一个块元素向右移动,让出自己空间,像右移动直到碰到包含自己的父元素的

最右边的边框。

②左浮动

快速入门:

div+css(2)_第1张图片

.div{

    width:150px;

    height:100px;

    border:1px solid blue;

    background:pink;

    margin-top:5px;

    flioat:left;/*左浮动*/

}

从这个案例我们可以看出,所谓左浮动就是指,某个块元素尽量向左边移动,这样就让出

它右面的空间,让别的块元素显示。

浮动的特别说明:

如果浮动元素的高度不同,那么当他们向下移动时候可能被其他的浮动元素”卡住“:

直到有足够空间。

如果使用浮动元素:则该元素不管是不是块元素,都会按照display:block;

来显示。

小总结:

你可以这么理解浮动:如果一个元素右/左浮动原则:

            ①它本身会儿尽可能向右/左移动,直到碰到边框或者别的浮动元素,特别

强调浮动对块元素和行内元素都生效。

            ②元素向右/左浮动,就相当于让出自己的左/右边,别的元素就会在它的左

/右边,别的元素就会儿在它的左/右排列。

再一个案例:

div+css(2)_第2张图片

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <html>

        <body>

        <img style="float:left;

                            margin-right:5px;"

                            src="2.jpg" /> 爱  克  发

                ksdkfs;dsfdf ;sdfs ;sdf s 爱克发

        </body>

        </html>

        如何清除浮动,我们在项目中说明

        网上有一个站点;禅意花园->csdn  网页论坛

        开源之祖  sourceforeg.net

        php 开源  http://www.php-open.comm模仿->创新

  • 定位

 常见的定位有四种

 1。static定位(默认值)

 2。relative相对定位

 3。sbsolute 绝对定位

 4。fixed 固定定位

相对定位:

div+css(2)_第3张图片


这里我们看出,所谓相对定位是指,相对该元素应当显示的左上角重新定位,虽

然它脱离的标准流,但是它的空间,不能被占用。

绝对定位:

div+css(2)_第4张图片

从上图看,所谓绝对定位指,对该元素最近的那个脱离了标准流的元素定位,如

果没有父元素(或者有父元素,但是父元素没有脱离标准流),则相对body左上角

定位。

怎么理解 上面标红的字

div+css(2)_第5张图片

代码:

<html>
<body>
<div>内容1</div>
<div>内容3</div>
<div>内容4</div>
<div>
    <div id="spe" class="div1">内容2</div>
</div>
</body>
</html>

Css文件:

.div2{
    position:relative;
    left:100px;
    top:100px;
    width:200px;
    height:150px;
    background:pink;
    float:left;
}

  • Fixed 定位

 所谓fixed定位就是不管怎么样,总是以视窗的左上角定位。

   left top属性  对static没有效果 ,static 定位是靠margin-left margin-top

来移动位置的。

  • z-index

 用于设置对象(div)显示的时候,层叠的属性,z-index 值越小,则越在下层显示!!

当父层不设置高度,而子层进行了float,因为父层是标准流,会不认识子层的存在,所以高度

会自动变成0.所以高度会自动变成0.解决办法 一是在父层里面,最后一个子层后面加一个块状元素,

然后给这个块元素清楚浮动;二是给父层进行浮动,让它认识子层,高度会儿自动撑开。



你可能感兴趣的:(css,前端,基础,div,div+css)