第六节:浮动与定位

第五课时:浮动与定位

2.5.1 元素的浮动

元素浮动可以使页面变得整齐、有序

元素的浮动属性 float

通过 float 属性来定义浮动,使元素脱离标准文档流的控制,移动到其父元素中指定位置

注意:

"IE6 双倍边距" 解释:对元素同时定义 float 和 margin-left 或 margin-right 属性时,在 IE6 浏览器中,出现的左外边距或右外边距将是所设置的 margin-left 或 margin-right 值的两倍

属性值 说明
left 元素向左浮动
right 元素向右浮动
none 元素不浮动(默认值
语法格式:
选择器{float: 属性值;}


p {
    float: left;
}

清除浮动

由于浮动元素不再占用原文档流的位置,使用浮动时会影响后面相邻的固定元素,所以要使用 clear 属性 清除浮动

属性值 说明
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影
语法格式:
选择器{clear: 属性值;}


p {
    clear: both;
}

方法一:使用空标记清除浮动

在浮动元素之后添加空标记,并对该标记应用 “clear: both” 样式,可以清除元素浮动所产生的影响,空标记可以为 div、p、hr 等任何标记

<head>
    <style type="text/css" >
        h1 {
            float: left;
        }
    	p {
            clear: both;
        }
    style>
head>
<body>
    <h1> 浮动的h1 h1>
    <p> 清除浮动的空标记 p>
    <h2> 不受影响的正常元素 h2>
body>

方法二:使用 overflow 属性 清除浮动

对元素应用 “overflow: hidden;” 样式,也可以清除浮动对该元素的影响,并且弥补了空标记清除浮动的不足

<head>
    <style type="text/css" >
        .box {
            overflow: hidden;	/* 对父元素应用 overflow: hidden; */
        }
        h1,p,h2 {
            float: left;
        }
    style>
head>
<body>
    <div class="box">
        <h1> h1元素 h1>
        <p> 段落元素 p>
        <h2> h2元素 h2>
    div>
body>

方法三:使用 after伪对象 属性 清除浮动

该方法只适用于 IE8 及以上版本浏览器和其他 非 IE 浏览器

注意:

  • 必须为需要清除浮动的元素伪对象设置 " height: 0; " 样式,否则该元素会比其他实际高度高出若干像素

  • 必须在伪对象中设置 content 属性,属性值可以为空,如: content: " ";

    <head>
        <style type="text/css" >
            .box:after {			/* 对父元素应用 after伪对象元素 */
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0;
            }
            h1,p,h2 {
                float: left;
            }
        style>
    head>
    <body>
        <div class="box">
            <h1> h1元素 h1>
            <p> 段落元素 p>
            <h2> h2元素 h2>
        div>
    body>
    

2.5.2 overflow 属性

overflow 属性 是 CSS 中的重要属性。当盒子内的元素超出盒子自身的大小时,内容就会溢出,此时就需要用到该属性

属性值 说明
visible 内容不会被修剪,会呈现在元素框之外(默认值)
hidden 溢出内容会被修剪,并且被修剪的内容是不可见的
auto 在需要产生滚动条,即自适应所要显示的内容
scroll 溢出内容会被修剪,且浏览器会始终显示滚动条
语法格式:
选择器{overflow: 属性值;}


div {
    width: 300px;
    height: 200px;
    overflow: auto;
}

2.5.3 元素的定位

浮动布局虽然灵活,但是无法做到对元素的位置进行精确定位

元素的定位属性

  1. 定位模式

    position 属性 用于定义元素的定位模式,该属性有 4个 属性,分别表示不同的定位模式

    属性值 描述
    static 静态定位(默认定位方式)
    relative 相对定位,相对于其原文档流的位置进行定位
    absolute 绝对定位,相对于 其上一个已经定位的父元素进行定位
    fixed 固定定位,相对于浏览器窗口进行定位
    语法格式:
    选择器{position: 属性值;}
    
  2. 边偏移

    定位模式(position)仅仅用于定义元素以哪种方式定位,并不能确定元素的具体位置。这时可以使用边偏移属性 top、bottom、left 或 right 来进行精确定义定位元素的位置

    边偏移属性 描述
    top 顶端偏移量,定义元素相对于其父元素上边线的距离
    bottom 底部偏移量,定义元素相对于其父元素下边线的距离
    left 左侧偏移量,定义元素相对于其父元素左边线的距离
    right 右侧偏移量,定义元素相对于其父元素右边线的距离

静态定位 staic

默认定位方式,当 position 属性的取值为 static 时,可以将元素定位于静态位置,就是各个元素在 HTML 文档流中默认的位置

  • 当没有定义 position 属性时,会遵循默认值显示为静态位置
  • 在静态状态下无法通过边偏移属性(top、bottom、left 或 right)来改变元素的位置
div {
    position: static;
}

相对定位 relative

相对定位 relative 是将元素对于它在标准文档流中的位置进行定位,当 使用 relative 对元素进行定位时,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置依然保留

div {
    position: relative;
    top: 20px;
    left: 30px;
}

绝对定位 absolute

绝对定位 absolute 是将元素依据最近的已经定位(绝对、固定 或 相对定位)的父元素进行定位

  • 若父元素没有定位,则根据 body 根元素(浏览器窗口)进行定位

注意:

  • 如果仅设置绝对定位,不设置边偏移,则元素的位置不变,但其不再占用标准的文档流中的空间,与上移或后续元素重叠
  • 定义多个边偏移属性时:
    • 如果 left 和 right 冲突,以 left 为准
    • 如果top 和 bottom 冲突,以 top 为准
div {
    position: absolute;
    top: 20px;
    left: 30px;
}

固定定位 fixed

固定定位 fixed 是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素

注意:

  • 当元素设置为固定定位 fixed 后,该元素将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置(不管浏览器滚动条如何滚动,也不管浏览器窗口大小如何变化,该元素始终显示在浏览器窗口的固定位置)
  • 由于 IE6 不支持固定定位,所以实际开发中较少使用
div {
    position: fixed;
}

z-index 叠层等级属性

当对多个 元素同时设置定位时,定位元素之间又可以会发生重叠

CSS 中,想要调整重叠定位元素的堆叠顺序,可以对定位元素应用 z-index 层叠等级属性,其取值可为 正整数、负整数 和 0

  • z-index 的默认属性值为 0,取值越大,定位元素在层叠元素中越居上

注意:z-index 属性 仅对定位元素生效


2.5.4 元素的类型与转换

元素的类型

HTML 中,有很多的标记,用于组织页面结构。一般分为 块标记 和 行内标记,也称 块元素 和 行内元素

  • 行内元素通常嵌套在块元素中使用,而块元素却不能嵌套在行内元素中
  1. 块元素

    块元素在页面中以区域块的形式出现,其特点是,每个块元素通常都会独自占据一整行 或 多整行

    • 可以对其设置 宽度、高度、对其 等属性,常用于网页布局和网页结构的搭建

    常见的块元素有:h1 ~ h6、p、div、ul、ol、li 等,div 为最典型的块元素

  2. 行内元素

    行内元素也称 内联元素 或 内嵌元素,其特点是,不必在新的一行开始,也不强迫其他元素在新的一行显示,一般会显示在同一行中,该元素 不占有独立的区域,仅靠自身的字体大小和图像尺寸来支撑结构

    • 一般不可以设置 宽度、高度、对齐 等属性,常用于控制页面中文本的样式

    常见的行内元素有:strong、b、em、i、del、s、ins、u、a、span 等,span 为最典型的行内元素

    注意:

    • 在行内元素中有几个特殊的标记 img 和 input,可以对它们设置 宽高 和 对齐 属性,这些标记被称之为 行内块元素

span 标记

在 HTML 中 span 也作为容器标记被广泛使用,和 div 不同的是 span 是行内元素,span 内只能包含文本和各种行内标记,如 加粗标记 strong、倾斜标记 em 等,span 中还可以嵌套多层 span

实际开发中:

  • span 标记常用于定义网页中某些特殊显示的文本,配合 class 属性使用
  • span 本身是没有固定的格式表现,当其他行内标记都不合适时,就可以使用 span 标记
<head>
    <style type="text/css">
        span {
            font-size: 24px;
        }
    style>
head>
<body>
    <p> <span> span标记 span> 这是一段话 p>
body>

元素的转换

display 属性 可以将行内元素、块元素、行内块元素 进行转换

块元素转化为行内元素后要注意:行内元素只可以定义 左右外边距,定义上下外边距时无效

display 属性值 说明
inline 此元素将显示为行内元素(行内元素默认的 display 属性值)
block 此元素将显示为块元素(块元素默认的 display 属性值)
inline-block 此元素将显示为行内块元素,可以对其设置宽高和对齐等属性,但是该元素不会独占一行
none 此元素将被隐藏,不显示,也不占用页面空间,相当于该元素不存在
<head>
    <style type="text/css">
        div {
            display: inline;			/* 转化为行内元素 */
        }
        p {
            display: inline-block;		/* 转化为行内块元素 */
        }
    style>
head>
<body>
    <div> 这是块元素 div>
    <p> 这是行内元素 p>
body>

你可能感兴趣的:(全栈开发学习日记,#,第二章:CSS,样式,前端,css,css3)