SS中的浮动(Floats)、定位(Positioning)和显示(Display)属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景,帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。
浮动是CSS中用于实现元素排列的一种方式,它可以让元素脱离正常的文档流,并可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边缘。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位属性允许你控制元素的位置,它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display属性是CSS中最重要的用于控制布局的属性之一,它定义了元素如何显示在页面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!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>
/* 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(HyperTextMark-upLanguage)即超文本标记语言或超文本链接标示语言,是WWW的描述语言。
HTML文档的结构
2.页面背景色或背景图像
Hello World!
</body>
(网页背景图像)
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> 标签用于在页面上绘制水平线。
图像的基本语法:<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在线报名” >
要链接到同一目录 (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 scrolldelay=“100” direction=“up”>
滚动文字或图像
</marquee>
说明:scrolldelay:表示滚动延迟时间,默认值为90;direction:表示滚动的方向,默认为从右向左。
目标:掌握列表的用法
使用表格的基本结构实现简单表格
使用表格相关标签实现跨行、跨列的复杂表格
会使用表单的基本结构制作表单页面
会使用各种表单元素实现注册页面
能理解post和get两种提交方式的区别
格式: <ul type=“”>
type属性设置标号的类型,值可以取:
1 disc :实心圆点
2 circle :空心圆点
3 square :实心方块
无序列表
格式:<ol type=“” start=“”>
type设置标号的类型,值可以取:
1 1:显示数字
2 A:显示大写字母
3 a:显示小写字母
4 I:显示大写罗马数字
5 i:显示小写罗马数字
有序列表
嵌套列表
门户网站应用表格
<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>标签可以绑定某个表单元素,用于扩展可以相应点击等事件的区域
如:当点击复选框右边的提示文字时,该复选框也可被选中。
内容有限,关于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。
原理就是:
关于 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 的效果。
好了,本文到此结束,希望对你有帮助 :)
*请认真填写需求信息,我们会在24小时内与您取得联系。