.关于浮动

浮动的元素会脱离标准文档流（float）,从而不占据空间，实现了一行排列多个元素的效果 ，但是又导致上级元素height消失，处理这种情况的方法就是有两种：

1.第一种在css里写个伪类，哪些地方需要清除浮动，直接调用类名。

.clearfix::after
{
display: block;
clear: both;

height: 0;

content: ' ';

}
.clearfix
{
zoom: 1;
}

2.第二种情况就是溢出隐藏。

overflow:hidden;

zoom:1;

2.静态定位，相对定位，绝对定位，固定定位

1.静态定位：是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性。

2.相对定位：就是相对于当前的位置进行的left,top,right,bottom。

3.绝对定位：脱离文档流，不占据空间，用position:absolute;这条语句。进行left,right,top,bottom进行相对于具有定位属性得父级元素进行定位，如果未找到就会依次向上寻找，直到找到body停止相对于浏览器窗口进行绝对定位。

4.固定定位：设置position:fixed;，直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

3.css3响应式

1.总体来说css3的响应式满足了所有分辨率的需求，@media媒体查询进行主流分辨率的响应式调节。

2.切记代码中不可写固定高度！

端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS

"xiaのke"：sisuoit.com/4737.html

随着互联网技术的飞速发展，HTML5、CSS3和JavaScript已经成为网页开发的重要基石。它们分别负责网页的结构、样式和行为，让网页呈现出丰富多彩、动态交互的效果。本文将带你吃透HTML5、CSS3和JS，从入门到精通，助你成为一名优秀的网页开发者。

二、HTML5：网页的结构

HTML，全称HyperText Markup Language，是网页的基础语言。HTML5作为HTML的最新版本，提供了许多新的元素和API，使得网页内容更加丰富，交互性更强。

1. 语义元素：如<header>、<footer>、<article>等，使网页结构更清晰，便于搜索引擎优化和辅助阅读器识别。
2. 媒体元素：如<video>和<audio>，使得在网页上嵌入媒体内容变得简单。
3. 图形绘制API：Canvas、SVG等，让网页实现2D、3D图形绘制。
4. 离线存储：Web Storage、IndexedDB等，使网页能够在客户端存储数据，提升用户体验。

三、CSS3：网页的样式

CSS，全称Cascading Style Sheets，用于描述HTML元素的样式。CSS3作为CSS的最新版本，引入了许多新的特性，让网页更加美观、动感。

1. 盒子模型：通过box-sizing属性，你可以控制盒子的宽度和高度。
2. 动画与过渡：transition和animation属性，让元素在页面上动起来。
3. 渐变与阴影：gradients和shadows属性，使元素呈现出生动的效果。
4. 媒体查询：通过媒体查询，你可以为不同的设备或视口尺寸设置不同的样式。

四、JavaScript：网页的行为

JavaScript是一种脚本语言，用于控制网页的行为。通过JavaScript，你可以实现各种动态效果和交互功能。

1. DOM操作：通过JavaScript，你可以操作HTML元素，实现页面的动态内容更新。
2. 事件处理：点击事件、键盘事件等，让网页响应用户的操作。
3. AJAX：通过AJAX技术，你可以在不刷新页面的情况下与服务器进行通信，提升用户体验。
4. 前端框架：如React、Vue等，使开发更加高效，组件化开发使代码复用性更高。

五、总结

HTML5、CSS3和JavaScript是网页开发的三大核心技术。要想成为一名优秀的网页开发者，你需要熟练掌握它们。通过不断学习和实践，你将能够运用这些技术构建出功能强大、交互丰富的网页。在这个过程中，不要忘记保持对新技术的好奇心和学习动力，因为互联网技术日新月异，只有不断学习，才能跟上时代的步伐。