【静态页面架构】CSS之定位
2024-09-07 02:27:39
CSS架构
1.浮动；
是以float属性设置容器指定的位置
<style>
div {
width: 200px;
height: 200px;
}
#qq {
background-color: lightcoral;
/*float: right;*/
}
#yy {
/*width: 300px;
height: 300px;*/
background-color: yellowgreen;
/* 当前元素设置为浮动后，只影响当前元素后面的所有元素的位置 */
/*float: left;*/
}
#cc {
background-color: lightskyblue;
float: left;
}
</style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>块级元素；
不再独占一行，多元素之间会水平方向排列设置浮动后，会从页面的文档流脱离
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
/*默认宽度是父级宽度的100%
高度是后者的所有元素高度之和*/
float: left;
/*左浮动*/
/*
* 宽度默认是 0 或者所有后代元素宽度之和
* 高度默认是 0 或者所有后代元素高度之和
多个块级元素都设置为浮动后 -> 垂直方向排列变为水平方向排列
* 如果占满父级元素宽度的100%后，会自动换行
*/
}
</style>
</head>
<body>
<div></div>
</body>示意图；
内联元素；
<style>
span{
background-color: red;
width: 200px;
height: 200px;
/*宽和高是以内容撑起*/
/*设置宽高属性是无效的*/
float: left;
/*设置完浮动后
其宽高属性才有效
多个内联元素之间依旧是水平方向的排列*/
}
</style>
</head>
<body>
<span>呼延觉罗</span>
<span>爱新觉罗</span>
</body>示意图；
清除浮动；
以clear属性来设置清除浮动
<style>
div{
width: 200px;
height: 200px;
float: left;
}
#qq{
background-color: red;
}
#yy{
background-color: blue;
clear: both;
/*清除浮动*/
}
#cc{
background-color: yellow;
}
</style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>示意图；
高度塌陷；
在没有给父级容器设置高度，而且设置子元素浮动，父级失去高度
<style>
.qq{
border: 10px solid black;
overflow: hidden;
}
.hh{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="qq">
<div class="hh"></div>
</div>
</body>示意图；
最新文章
- java18
- [Java基础]字符串
- WEBAPP开发技巧总结
- iOS基础
- 什么是cookie
- python加密模块学习
- 【c++基础】const、const指针、const引用
- busybox filesystem udhcpc 原理
- iOS: 学习笔记, Swift运算符定义
- android中处理XML的方式
- jdbc链接hive报错：java.lang.ClassNotFoundException: org.apache.thrift.transport.TTransport
- vue2.9.5 引入vue-strap时报错
- 闪动效果的实现 (jquery方式和css方式)以及 keyframes和opacity 与ie等各浏览器兼容问题
- 解决win10中chm内容显示为空白的问题
- maven手动添加jar包到本地仓库
- SQLite中的SELECT子句使用表达式
- gdb调试程序函数名为问号，什么原因？step by step解决方案
- 用virtualbox虚拟机无法上网的解决方法
- 编写可维护的JavaScript 收纳架
- emacs26.1 ppa