`

css的学习经历

阅读更多

CSS 浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS 浮动

 

请看下图,当把框 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

 

 

再请看下图,当框 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 从视图中消失。

 

如果把所有三个框都向左移动,那么框 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

 

 

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素卡住

 

CSS float 属性

在 CSS 中,我们通过 float 属性实现元素的浮动。

行框和清理

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

因此,创建浮动框可以使文本围绕图像:

 

想阻止行框围绕浮动框,需要对该框应用 clear 属性clear 属性的值可以是 leftrightboth 或 none,它表示框的哪些边不应该挨着浮动框。

为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:

 

这是一个有用的工具,它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:

.news {

  background-color: gray;

  border: solid 1px black;

  }

 

.news img {

  float: left;

  }

 

.news p {

  float: right;

  }

 

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

 

这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear

 

不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。

.news {

  background-color: gray;

  border: solid 1px black;

  }

.news img {

  float: left;

  }

.news p {

  float: right;

  }

.clear {

  clear: both;

  }

 

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

<div class="clear"></div>

</div>

 

 

这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法,那就是对容器 div 进行浮动:

.news {

  background-color: gray;

  border: solid 1px black;

  float: left;

  }

.news img {

  float: left;

  }

.news p {

  float: right;

  }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

 

这样会得到我们希望的效果。不幸的是,下一个元素会受到这个浮动元素的影响。为了解决这个问题,有些人选择对布局中的所有东西进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。

事实上,W3School 站点上的所有页面都采用了这种技术,如果您打开我们使用 CSS 文件,您会看到我们对页脚的 div 进行了清理,而页脚上面的三个 div 都向左浮动。

 

 

  • 大小: 11.6 KB
  • 大小: 11.4 KB
  • 大小: 13.7 KB
  • 大小: 11 KB
  • 大小: 18.5 KB
分享到:
评论

相关推荐

    css学习文档

    随着Web技术的不断发展,CSS也经历了从CSS1到CSS3的重大升级。CSS3不仅增强了网页的表现能力,更将其拆分为了多个模块,使得开发者能够更加灵活地选择所需功能进行开发。其中一些重要的CSS3模块包括: - **选择器**...

    很好的css学习笔记,pdf格式(64页)

    ### CSS+DIV 学习笔记知识点总结 #### 一、CSS 概述 - **CSS 定义**:层叠样式表(Cascading Style Sheets, CSS)是一种用于定义网页表现形式的语言,它使得开发者能够独立地管理和控制文档的内容与样式。 - **CSS...

    css学习心得是鄙人第一次写的记录哦,有些差劲吧!

    这篇“css学习心得”是我初次尝试总结所学的结晶,可能略显稚嫩,但我希望能与你分享我的体验和收获,也欢迎你提出宝贵的建议。 1. **CSS基础概念**:CSS是一种用于定义网页中元素样式、布局和结构的语言。它与HTML...

    CSS经验几则.rar

    文件“CSS经验几则.doc”很可能是这些知识点的具体实践案例或深入讲解,而“下载说明.txt”可能包含了获取更多资源或进一步学习的指导,“A5下载- 更全的站长资源平台.url”可能是推荐的一个网站,提供更多相关资源...

    HTML5+CSS3网页布局任务教程课件汇总整本书电子教案全套课件完整版ppt教学教程.pptx

    HTML 是制作网页的标准语言, CSS 是实现网页外观的语言,它们都是 Web 浏览器能解析的语言,都经过了多年的发展,经历了多个不同的标准(版本)。 HTML5 是 HTML 的新版本,增加了许多新特性,如标签更语义化、...

    CSS课程代码

    【CSS课程代码】是针对初学者的一份详细教程,旨在教授如何使用层叠...无论是为了个人兴趣还是职业发展,这都将是一次宝贵的学习经历。记得理论结合实践,多动手编写代码,只有这样才能真正掌握并灵活运用这些CSS技巧。

    civ+css博客静态页

    【CIV + CSS博客静态页】是一个以CIV...通过实践,学习者不仅可以掌握CSS的基本用法,还能了解如何利用自定义信息可视化技术来提升用户体验。同时,由于项目相对简单,更适合初学者逐步理解和掌握网页设计的核心概念。

    css各版本文档

    在CSS的发展历程中,经历了多个版本的更新和迭代,每个版本都引入了新的特性和功能,使得网页设计更加丰富和精细。以下是CSS各个主要版本中的关键知识点: 1. CSS1: - 发布于1996年,是CSS的初步版本,奠定了基础...

    CSS学习 (1).docx

    【CSS学习概述】 CSS,全称为层叠样式表(Cascading Style Sheets),是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。其主要目的是将网页的呈现(样式)与内容(HTML)分离,以...

    DIV+CSS教程

    自1996年W3C发布CSS 1.0规范以来,CSS经历了多个版本的迭代,包括CSS 2.0和当前正在发展的CSS 2.1与CSS 3.0。尽管浏览器对CSS规范的实现存在不一致性,但随着技术进步,各浏览器对CSS的支持度逐渐提高,网页设计师...

    div+css学习总结.doc

    DIV+CSS 学习总结 DIV+CSS 是一对强大的前端开发组合, DIV responsible for structuring content on the web page, while CSS is responsible for styling and layout. In this summary, we will cover the ...

    The New CSS Layout

    自互联网诞生以来,网页设计经历了翻天覆地的变化。从最初的简单布局到今天高度复杂的交互式设计,CSS一直扮演着至关重要的角色。 ##### 1.1 历史回顾(Where We Came From) 早期的网页设计主要依赖于表格来实现...

    css帮助文档css帮助文档

    8. **CSS规范和版本**:CSS经历了多个版本的更新,如CSS2.0、CSS3等。CSS2.0文档中会涵盖2001年之前的基本样式功能,如浮动布局、简单的选择器和一些基本的样式属性。CSS3则引入了更多先进的功能,如多列布局、阴影...

    html+css+js网页设计 个人博客模版 我的学习经历7个页面

    预览地址:https://blog.csdn.net/qq_42431718/article/details/141647466 html+css+js网页设计 个人博客模版 我的学习经历7个页面

    CSS4.0中文参考手册.zip

    CSS的发展历程经历了多个版本,从最初的CSS1到目前讨论中的CSS4,每个版本都引入了新的特性和改进。 **CSS4.0**虽然目前仍处于草案阶段,但已经包含了大量创新功能,旨在提升Web设计的灵活性和表现力。以下是一些...

    css3帮助文档

    CSS3是层叠样式表的最新版本,自1996年CSS1发布以来,它已经经历了多次迭代,以适应快速发展的Web技术。CSS3不仅增加了许多新的选择器、布局模式和模块,还提升了网页设计的灵活性和可访问性。它的核心目标是使网页...

    css2.0,css3.0

    自1996年W3C发布CSS1以来,CSS经历了多次迭代,CSS2.0和CSS3.0是其中两个重要的版本。 **CSS2.0** 是CSS的第二个主要版本,于1998年发布。这个版本大大增强了样式表的功能,使得网页设计更为精细和灵活。CSS2.0的...

    css样式表最新chm

    随着技术的发展,CSS已经经历了多个版本的迭代,以满足不断增长的网页设计需求。本资源名为“css样式表最新chm”,其中包含了**CSS3**的最新内容,这是一个非常重要的版本,因为它引入了许多创新特性,极大地增强了...

    Apress.Beginning CSS Web Development From Novice to Professional

    - **发展历程:**从CSS1到CSS3,CSS经历了多次更新迭代,每一次更新都带来了更多的功能和更好的兼容性支持。 - **浏览器兼容性:**不同的浏览器对CSS的支持程度有所差异,开发者需要了解这些差异以确保跨浏览器的...

Global site tag (gtag.js) - Google Analytics