网站建设的拓扑结构,年报申报入口,做宠物的网站主题思想,大型网站架设需要考虑哪些问题文章目录❤️#x1f525;CSS文档流❤️#x1f525;CSS浮动❤️#x1f525;CSS定位❤️#x1f525;CSS媒体查询❤️#x1f525;CSS文档流 文档流是文档中可显示对象在排列时所占用的位置/空间。 例如#xff1a;块元素自上而下摆放#xff0c;内…
文章目录❤️CSS文档流❤️CSS浮动❤️CSS定位❤️CSS媒体查询❤️CSS文档流 文档流是文档中可显示对象在排列时所占用的位置/空间。 例如块元素自上而下摆放内联元素从左到右摆放标准流里面的限制非常多导致很多页面效果无法实现。 ⭕高矮不齐底边对齐 ⭕ 空白折叠现象 ① 无论多少个空格、换行、tab都会折叠为一个空格。 ② 如果我们想让img标签之间没有空隙必须紧密连接。
文档流产生的问题
高矮不齐底边对齐
span我是文本内容/span
img src1.jpg altimg{width: 200px;
}空格折叠
span我是文本 内容/span
img src1.jpg altimg{width: 200px;
}元素无空隙 span我是文本内容/span
img src1.jpg altimg src1.jpg
altimg{width: 200px;
}如果我们现在就要并排顶部对齐那该怎么办呢办法是移民脱离标准流
脱离文档流 使⼀个元素脱离标准文档流有三种方式 ① 浮动 ② 绝对定位 ③ 固定定位
❤️CSS浮动 浮动的定义 float 属性定义元素在哪个方向浮动任何元素都可以浮动。
值描述left元素向左浮动right元素向右浮动
浮动的原理 ① 浮动以后使元素脱离了文档流 ② 浮动只有左右浮动没有上下浮动
元素向左浮动 脱离文档流之后元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面一层是底层的原页面一层是脱离文档流的上层页面所以会出现折叠现象。 div classbox/div
div classcontainer/div.container{width: 200px;height: 200px;background-color: #81c784;
}
.box{width: 100px;height: 100px;background-color: #fff176;float: left;
}元素向右浮动
div classbox/div
div classcontainer/div.container{width: 200px;height: 200px;background-color: #81c784;
}
.box{width: 100px;height: 100px;background-color: #fff176;float: right;
}所有元素向左浮动 当所有元素同时浮动的时候会变成水平摆放向左或者向右。
div classbox/div
div classbox/div
div classbox/div.box{width: 100px;height: 100px;background-color: #fff176;float: left;margin: 0 5px;
}当容器不足时 当容器不足以横向摆放内容时候会在下一行摆放。
div classcontainerdiv classbox/divdiv classbox/divdiv classbox/div
/div.container{width: 250px;height: 300px;border: 1px solid red;}.box{width: 100px;height: 100px;background-color: #fff176;float: left;margin: 5px;}清除浮动 浮动副作用 当元素设置float浮动后该元素就会脱离文档流并向左/向右浮动。 ① 浮动元素会造成父元素高度塌陷 ② 后续元素会受到影响
div classcontainerdiv classbox/divdiv classbox/divdiv classbox/div
/div.container{border: 1px solid red;}.box{width: 100px;height: 100px;background-color: #fff176;float: left;margin: 5px;}div classbox/div
div classbox/div
div classbox/div
div classnav/div.box{width: 100px;height: 100px;background-color: #fff176;float: left;margin: 5px;
}
.nav{width: 100px;height: 100px;background-color: red;
}
清除浮动 当父元素出现塌陷的时候对布局是不利的所以我们必须清除副作用。 解决方案有很多种 ① 父元素设置高度 ② 受影响的元素增加clear属性 ③ overflow清除浮动 ④ 伪对象方式
父元素设置高度 如果父元素高度塌陷可以给父元素设置高度撑开元素本身大小。
div classcontainer
div classbox/div
div classbox/div
div classbox/div
/div.container{height: 300px;width: 350px;border: 1px solid red;}.box{width: 100px;height: 100px;background-color: #fff176;float: left;margin: 5px;}overflow清除浮动 如果有父级塌陷并且同级元素也收到了影响可以使用 overflow 清除浮动。 这种情况下父布局不能设置高度父级标签的样式里面加: overflow:hidden;clear: both; div classcontainerdiv classbox/divdiv classbox/divdiv classbox/div
/div
div classnav/div.container{width: 350px;border: 1px solid red;overflow: hidden;clear: both;
}
.box{width: 100px;height: 100px;background-color: #fff176;float: left;margin: 5px;
}
.nav{width: 100px;height: 100px;background-color: red;
}
伪对象方式 如果有父级塌陷并且同级元素也收到了影响还可以使用伪对象方式处理。 为父标签添加伪类 after ,设置空的内容并且使用 clear:both;这种情况下父布局不能设置高度。
div classcontainerdiv classbox/divdiv classbox/divdiv classbox/div
/div
div classnav/div.container {width: 350px;border: 1px solid red;}
.container::after {content: ;display: block;clear: both;}
.box {width: 100px;height: 100px;background-color: #fff176;float: left;margin: 5px;}
.nav {width: 100px;height: 100px;background-color: red;} ❤️CSS定位 定义 position 属性指定了元素的定位类型
值描述relative相对定位absolute绝对定位flxed固定定位
其中绝对定位和固定定位会脱离文档流。 设置定位之后可以使用四个方向进行调整位置 left、top、right、bot tom
相对定位
div classbox/div.box{width: 200px;height: 200px;background-color: red;position: relative;left: 100px;
}绝对定位
div classbox1/div
div classbox2/div.box1{width: 200px;height: 200px;background-color: red;position:absolute;left: 50px;
}
.box2{width: 300px;height: 300px;background-color: green;
}固定定位
div classbox1/div
div classbox2/div.box1{width: 200px;height: 200px;background-color: red;position:fixed;left: 50px;
}
.box2{width: 300px;height: 300px;background-color: green;
}
● 设置定位之后相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整如果父级元素不存在定位则继续向上逐级寻找直到顶层文档。
div classcontainerdiv classbox/div
/div.container{width: 300px;height: 300px;background-color: #666;position: relative;left: 200px;
}
.box{width: 200px;height: 200px;background-color: red;position:absolute;
}
Z-index z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
div classbox1/div
div classbox2/div
.box1{width: 200px;height: 200px;background-color: red;position:absolute;z-index: 2;
}
.box2{width: 300px;height: 300px;background-color: green;position:absolute;z-index: 1;
}❤️CSS媒体查询 媒体查询能使页面在不同在终端设备下达到不同的效果。 媒体查询会根据设备的大小自动识别加载不同的样式。
设置meta标签 使用设备的宽度作为视图宽度并禁止初始的缩放。在“head”标签里加入这个meta标签。
meta nameviewport contentwidthdevicewidth, initial-scale1,maximum-scale1, userscalableno参数解释 ① width device-width 宽度等于当前设备的宽度。 ② initial-scale 初始的缩放比例默认设置为1.0。 ③ maximum-scale 允许用户缩放到的最大比例默认设置为1.0。 ④ user-scalable 用户是否可以手动缩放默认设置为no。
媒体查询语法
media screen and (max-width: 768px) {/* 设备小于768px加载样式 */body{background-color: red;}
}
media screen and (max-width: 992px) and
(min-width: 768px) {/* 设备小于768px但小于992px加载样式 */body{background-color: pink;}
}
media screen and (min-width: 992px) {/* 设备大于992px加载样式 */body{background-color: green;}
}
