元素的排版与布局display–inline-block;（转换为内联块元素）clear:both(清除浮动)float:none(不浮动，保持原位)position:absolute相对于某个参考对象进行定位；
1.
之前解决兄弟关系的边距重叠问题。
清除浮动方法：
给第一个盒子添加clear属性：clear:both；(重点！)
清除浮动的原理：
在父级元素上添加伪类选择器after和before，来使内容包裹住浮动元素。
样式实现：
.clearfix:after,.clearfix:before{content:"";display:table;clear:both;}
案例使用：
float:none(不浮动，保持原位)absolute–绝对定位占位置relative–相对定位不占位置；
在HTML中添加div标签，然后在CSS中使用position属性进行定位。
精灵技术目的：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
实现原理：只请求一张图–只是展示不同位置的小图。
案例使用：
backgrond-image背景图片backgrond-repeat是否平铺backgrond-position背景定位小小注意点：
1.
精灵技术主要针对背景图片，插入的img不需要这个技术。
需要测量每个小背景图片的大小和位置。
给盒子指定小的背景图片时，背景定位基本都是负值。
响应式设计响应式布局
目的：使网页在不同设备上都能良好显示。
实现原理：通过CSS媒体查询，根据不同的屏幕尺寸改变样式。
案例使用：
@media screen and (max-width: 768px) {
//小屏设备的样式
}
@media screen and (min-width: 769px) {
//大屏设备的样式
}
网页性能优化
目的：提高网页的加载速度，提升用户体验。
方法：
- 压缩图片减小文件大小；
- 使用CDN加速内容分发；
- 删除CSS和JavaScript冗余代码。
注意事项：
- 避免使用过大的图片；
- 对重要资源进行缓存；
- 最小化第三方库的使用。
网页安全
目的：保护用户数据，防止恶意攻击。
方法：
- 使用HTTPS协议；
- 为网站内容添加正确权限；
- 及时更新系统和软件。
注意事项：
- 定期检查网站漏洞；
