整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

21.HTML 浮动、定位和显示属性

SS中的浮动(Floats)、定位(Positioning)和显示(Display)属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景,帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。

浮动(Float)

浮动是CSS中用于实现元素排列的一种方式,它可以让元素脱离正常的文档流,并可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边缘。

.element {
  float: left; /* 或者 'right' */
}

使用场景

  • 文字环绕图片。
  • 创建水平导航栏。
  • 无网格系统时的列布局。

注意事项

  • 清除浮动(Clearing Floats):使用clear属性可以防止元素被浮动元素覆盖。
.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}
  • 包含浮动(Containing Floats):浮动元素的父容器可能不会扩展以包含浮动的子元素,可以通过清除浮动或使用其他技术(如overflow)来解决这个问题。
  • 浮动塌陷(Float Collapse):浮动元素不占据空间,可能导致父元素高度塌陷。

定位(Position)

定位属性允许你控制元素的位置,它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用场景

  • 相对定位(Relative Positioning):元素相对于其正常位置进行偏移。
.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}
  • 绝对定位(Absolute Positioning):元素相对于最近的已定位父元素进行定位。
.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}
  • 固定定位(Fixed Positioning):元素相对于视口进行定位,即使页面滚动也不会移动。
.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}
  • 粘性定位(Sticky Positioning):元素基于用户的滚动位置在相对和固定定位之间切换。
.sticky-element {
  position: sticky;
  top: 10px;
}

注意事项

  • 定位元素可能会脱离文档流,影响周围元素的布局。
  • z-index属性可以控制堆叠顺序。
  • 绝对定位元素的容器应有position: relative;,以便正确定位。

显示(Display)

display属性是CSS中最重要的用于控制布局的属性之一,它定义了元素如何显示在页面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用场景

  • 块级元素(Block):display: block;使元素表现为块级,占据新的行。
.block-element {
  display: block;
}
  • 内联元素(Inline):display: inline;使元素在文本行中显示,不开始新行。
.inline-element {
  display: inline;
}
  • 内联块元素(Inline-Block):display: inline-block;允许元素并排排列,同时拥有块级元素的宽度和高度属性。
.inline-block-element {
  display: inline-block;
}
  • 弹性盒子(Flex):display: flex;创建了一个弹性容器,其子元素可以灵活地在容器内排列。
.flex-container {
  display: flex;
}
  • 网格(Grid):display: grid;创建了一个网格容器,可以定义行和列以及在网格内放置元素。
.grid-container {
  display: grid;
}
  • 隐藏元素(None):display: none;将元素隐藏,且不为元素保留空间。
.hidden-element {
  display: none;
}

注意事项

  • 使用display: none;与visibility: hidden;的区别在于后者仍保留元素占据的空间。
  • display: flex;和display: grid;为现代布局提供了更多控制,通常比浮动和定位更优。

示例

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS样式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在这个例子中,我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航,以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚,并使用固定定位为页面添加了一个始终可见的固定元素。最后,我们使用了overflow: hidden;来清除头部中浮动元素的影响。

结语

浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性,前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展,我们也需要不断学习和适应新的CSS特性,以保持我们技能的前沿性。

.HTML基本标签

HTML(HyperTextMark-upLanguage)即超文本标记语言或超文本链接标示语言,是WWW的描述语言。

HTML文档的结构

  • HTML标签由标签、属性、内容组成,属性与内容可选。
  • 包含内容的标签以<…>开始,</…>结束,不包含内容的标签可以是如下格式:<…/>
  • 属性的值尽量用双引号或单引号修饰
  • 标签中的内容可以是其他的标签,称为原标签的子标签,子标签必须在父标签结束之前结束

2.页面背景色或背景图像

  • <body background="back_image.GIF" >

Hello World!

</body>

(网页背景图像)

  • <body bgcolor="#FFCCFF">

Hello World!

</body>

(网页背景色彩)

3.文本相关标签

  • 字体、字号:

标题标签<h1>-<h6>,<font>标签。

  • 行的控制

段落标签<p>,换行标签<br>。

  • 标题标签

<h#> ... </h#>,#=1, 2, 3, 4, 5, 6 (说明:<h1>到<h6>字体大小依次递减)

<sub>下标文字,<sup>上标文字,<del>删除线。

段落标签<p>,换行标签<br>。

  • 内容分隔<HR>标签

<HR> 标签用于在页面上绘制水平线。

  • 图像标签

图像的基本语法:<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在线报名” >

  • 页面链接<A>标签

要链接到同一目录 (C:\HTML) 下的页面,可编写 <A HREF = “Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”>

链接到本页面:

  • 图像链接

<a href=“http://www.it.com”>

<img src=“images/adv_2.jpg” border=“0” width="300"height="150">

</a>

  • 滚动<marquee>标签

<marquee scrolldelay=“100” direction=“up”>

滚动文字或图像

</marquee>

说明:scrolldelay:表示滚动延迟时间,默认值为90;direction:表示滚动的方向,默认为从右向左。

2.HTML/CSS基础

目标:掌握列表的用法

使用表格的基本结构实现简单表格

使用表格相关标签实现跨行、跨列的复杂表格

会使用表单的基本结构制作表单页面

会使用各种表单元素实现注册页面

能理解post和get两种提交方式的区别

  • 无序列表标签<ul>用于页面中没有顺序的列举项。

格式: <ul type=“”>

type属性设置标号的类型,值可以取:

1 disc :实心圆点

2 circle :空心圆点

3 square :实心方块

无序列表

  • 有序列表<ol>用于说明页面中的某些成分,需要按特定的顺序排列。有序列表的每项都有连续的编号。

格式:<ol type=“” start=“”>

type设置标号的类型,值可以取:

1 1:显示数字

2 A:显示大写字母

3 a:显示小写字母

4 I:显示大写罗马数字

5 i:显示小写罗马数字

有序列表

  • 嵌套列表:一个列表作为另一个列表的一部分,即多层列表。

嵌套列表

  • 表格<table>应用场合

门户网站应用表格

  • 表格的基本语法

<table>...</ table >定义表格

  • 如何创建表格

创建表格

表格表现

  • 表头与标题

域名数量报表的创建

域名数量报表

  • 什么是跨行跨列的表格

1.跨多列的表格

2.跨多行的表格

3.如何创建跨行跨列的表格

  • 表格的尺寸和边框

品牌商城表的创建

width用来设置表格的宽度;height用来设置表格的高度;border用来设置表格边框尺寸大小;bordercolor用来设置表格边框颜色。

品牌商城表

背景:background属性用来设置表格的背景图片;bgcolor属性用来设置表格、行、列的背景色。

对其方式:align属性用来设置表格、行、列的对齐方式。

  • 文本框基本语法

<input type=“text” value="张三" size="20">

文本框的建设

文本框

  • 密码框基本语法

<input type=“password” value=“123456” size=“22”>

密码框的建设

密码框,22个字符宽度

  • 单选按钮基本语法

<input type="radio" value="男" checked="checked">

单选按钮的建设

单选按钮框

  • 复选框基本语法

<input type=“checkbox” name="cb2" value="talk">

  • 列表框基本语法

  • 多行文本框基本语法

<textarea name=“textarea” cols=“40” rows=“6”>内容</textarea>

  • 按钮基本语法

<input type="reset" name=“reset" value=" 重填 ">

其他表单元素:<input type=“hidden”/>表单隐藏域

<input type=“image”/>表单图片按钮

<input type=“file”/>文件浏览

  • <label>标签

<label>标签可以绑定某个表单元素,用于扩展可以相应点击等事件的区域

如:当点击复选框右边的提示文字时,该复选框也可被选中。


内容有限,关于css,div和网页布局的部分就下次在和大家分享吧!

者:伯乐在线/chokcoco

http://web.jobbole.com/95068/

何为滚动视差

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。 作为网页设计的热点趋势,越来越多的网站应用了这项技术。

通常而言,滚动视差在前端需要辅助 Javascript 才能实现。当然,其实 CSS 在实现滚动视差效果方面,也有着不俗的能力。下面就让我们来见识一二:

认识 background-attachment

background-attachment 算是一个比较生僻的属性,基本上平时写业务样式都用不到这个属性。但是它本身很有意思。

background-attachment:如果指定了 background-image ,那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。

单单从定义上有点难以理解,随下面几个 Demo 了解下 background-attachment 到底是什么意思:

background-attachment: scroll

scroll 此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动。

background-attachment: local

local 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动, 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

background-attachment: fixed

fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

注意一下 scroll 与 fixed,一个是相对元素本身固定,一个是相对视口固定,有点类似 position 定位的 absolute 和 fixed。

可以感受下 3 种不同取值的不同效果:

CodePen Demo — bg-attachment Demo(https://codepen.io/Chokcoco/pen/xJJorg)

使用 background-attachment: fixed 实现滚动视差

首先,我们使用 background-attachment: fixed 来实现滚动视差。fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

这里的关键在于,即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。也就是说,背景图从一开始就已经被固定死在初始所在的位置。

我们使用,图文混合排布的方式,实现滚动视差,HTML 结构如下,.g-word 表示内容结构,.g-img 表示背景图片结构:

<section class="g-word">Header</section>

<section class="g-img">IMG1</section>

<section class="g-word">Content1</section>

<section class="g-img">IMG2</section>

<section class="g-word">Content2</section>

<section class="g-img">IMG3</section>

<section class="g-word">Footer</section>

关键 CSS:

section {

height: 100vh;

}

.g-img {

background-image: url(...);

background-attachment: fixed;

background-size: cover;

background-position: center center;

}

效果如下:

CodePen Demo — https://codepen.io/Chokcoco/pen/JBaQoY(https://codepen.io/Chokcoco/pen/JBaQoY)

嗯?有点神奇,为什么会是这样呢?可能很多人会和我一样,第一次接触这个属性对这样的效果感到懵逼。

我们把上面 background-attachment: fixed 注释掉,或者改为 background-attachment: local,再看看效果:

CodePen Demo — bg-attachment:local(https://codepen.io/Chokcoco/pen/ZjMdJz)

这次,图片正常跟随滚动条滚动了,按常理,这种效果才符合我们大脑的思维。

而滚动视差效果,正是不按常理出牌的一个效果,重点来了:

当页面滚动到图片应该出现的位置,被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动,而是相对于视口固定死了。

好,我们再来试一下,如果把所有 .g-word 内容区块都去掉,只剩下全部设置了 background-attachment: fixed 的背景图区块,会是怎么样呢?

HTML 代码如下:

<section class="g-img">IMG1</section>

<section class="g-img">IMG2</section>

<section class="g-img">IMG3</section>

section {

height: 100vh;

}

.g-img {

background-image: url(...);

background-attachment: fixed;

background-size: cover;

background-position: center center;

}

效果如下:

CodePen Demo(https://codepen.io/Chokcoco/pen/oMPrGZ)

结合这张 GIF,相信能对 background-attachment: fixed 有个更深刻的认识,移动的只有视口,而背景图是一直固定死的。

综上,就是 CSS 使用 background-attachment: fixed 实现滚动视差的一种方式,也是相对而言比较容易的一种。当然,background-attachment: fixed 本身的效果并不仅只是能有用来实现滚动视差效果,合理运用,还可以实现其他很多有趣的效果,这里简单再列一个:

background-attachment: fixed 实现图片点击水纹效果

利用图片相对视口固定,可以有很多有趣的效果,譬如下面这个,来源于这篇文章CSS Water Wave (水波效果):

CodePen Demo — bg-attachment:fixed Wave(https://codepen.io/Chokcoco/pen/wxYZWO)

利用图片相对视口固定的特性实现点击的水纹效果。

上面这个效果有点瑕疵,图片在放大容器变大的过程中发生了明显的抖动。当然,效果还是可以的,background-attachment 还有很多有意思的效果可以挖掘。

使用 transform: translate3d 实现滚动视差

言归正传,下面介绍另外一种使用 CSS 实现的滚动视差效果,利用的是 CSS 3D。

原理就是:

  1. 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx,那么处于这个容器的子元素就将位于3D空间中,
  2. 再给子元素设置不同的 transform: translateZ(),这个时候,不同元素在 3D Z轴方向距离屏幕(我们的眼睛)的距离也就不一样
  3. 滚动滚动条,由于子元素设置了不同的 transform: translateZ(),那么他们滚动的上下距离 translateY 相对屏幕(我们的眼睛),也是不一样的,这就达到了滚动视差的效果。

关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅展开,默认读者都有所了解,还不是特别清楚的,可以先了解下 CSS 3D。

核心代码表示就是:

<div class="g-container">

<div class="section-one">translateZ(-1)</div>

<div class="section-two">translateZ(-2)</div>

<div class="section-three">translateZ(-3)</div>

</div>

html {

height: 100%;

overflow: hidden;

}

body {

perspective: 1px;

transform-style: preserve-3d;

height: 100%;

overflow-y: scroll;

overflow-x: hidden;

}

.g-container {

height: 150%;

.section-one {

transform: translateZ(-1px);

}

.section-two {

transform: translateZ(-2px);

}

.section-three {

transform: translateZ(-3px);

}

}

总结就是父元素设置 transform-style: preserve-3d 和 perspective: 1px,子元素设置不同的 transform: translateZ,滚动滚动条,效果如下:

CodePen Demo — CSS 3D parallax(https://codepen.io/Chokcoco/pen/EpOeRm)

很明显,当滚动滚动条时,不同子元素的位移程度从视觉上看是不一样的,也就达到了所谓的滚动视差效果。

滚动视差文字阴影/虚影效果

那么,运用 translate3d 的视差效果,又能有一些什么好玩的效果呢?下面这个滚动视差文字阴影/虚影效果很有意思:

CodePen Demo — CSS translate3d Parallax(https://codepen.io/Chokcoco/pen/XBgBBp)

当然,通过调整参数(perspective: ?px 以及 transform: translateZ(-?px);),还能有其他很有意思的效果出现:

CodePen Demo — CSS translate3d Parallax 2(https://codepen.io/Chokcoco/pen/PBXwdX)

是不是很有电影开片的厂商 LOGO 的特效的感觉 joy 。

师父领进门,修行在个人,怎么制作更好更有意思的效果还是需要花时间钻研和琢磨,这里我仅仅是抛砖引玉,希望能见到更多 Nice 的效果。

好了,本文到此结束,希望对你有帮助 :)