第六节：浮动与定位

最新推荐文章于 2022-11-26 15:03:35 发布

孤安先生

最新推荐文章于 2022-11-26 15:03:35 发布

阅读量720

点赞数

分类专栏：全栈开发学习日记 # 第二章：CSS 样式文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_41952539/article/details/107847854

版权

全栈开发学习日记同时被 2 个专栏收录

81 篇文章 12 订阅

订阅专栏

第二章：CSS 样式

8 篇文章 0 订阅

订阅专栏

第五课时：浮动与定位

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 元素的定位

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

元素的定位属性

定位模式

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

属性值	描述
static	静态定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

语法格式：
选择器{position: 属性值;}

边偏移

定位模式（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 中，有很多的标记，用于组织页面结构。一般分为块标记和行内标记，也称块元素和行内元素

行内元素通常嵌套在块元素中使用，而块元素却不能嵌套在行内元素中

块元素
块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行
- 可以对其设置宽度、高度、对其等属性，常用于网页布局和网页结构的搭建
常见的块元素有：h1 ~ h6、p、div、ul、ol、li 等，div 为最典型的块元素
行内元素
行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，也不强迫其他元素在新的一行显示，一般会显示在同一行中，该元素不占有独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构
- 一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式
常见的行内元素有：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>

孤安先生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
第六节：浮动与定位

第五课时：浮动与定位2.5.1 元素的浮动元素浮动可以使页面变得整齐、有序元素的浮动属性 float通过 float 属性来定义浮动，使元素脱离标准文档流的控制，移动到其父元素中指定位置注意："IE6 双倍边距" 解释：对元素同时定义 float 和 margin-left 或 margin-right 属性时，在 IE6 浏览器中，出现的左外边距或右外边距将是所设置的 margin-left 或 margin-right 值的两倍属性值说明left元素向左浮动
复制链接

扫一扫