css3 @media & 浮动(float,clear) & overflow

最新推荐文章于 2024-08-27 09:15:04 发布

a110015359

最新推荐文章于 2024-08-27 09:15:04 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

本文深入探讨了CSS媒体查询的使用，特别是在响应式网页设计中的应用，以及如何利用@media针对不同屏幕尺寸设定样式。此外，还详细解析了浮动布局的概念，包括其工作原理、常见问题及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. @media 如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
         margin: 0px; padding: 0px; color: rgb(170, 17, 17);">lightblue;
    }
}

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，

2. https://www.cnblogs.com/acorn/p/5249089.html

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

而浮动是漂浮在标准流之上，因此div2又挡住了div4。

假如某个div元素A是浮动的，

如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；

如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

浮动副作用：

手动给父元素添加高度

通过clear清除内部和外部浮动

给父元素添加overflow属性并结果zoom:1使用

给父元素添加浮动

3.overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

转载于:https://www.cnblogs.com/EmilyGarden/p/8491655.html