css定位篇
2024-08-24 04:34:52
1.浮动的特性:
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素有“字围”效果
4.收缩的效果
前提是标准文档流,margin的垂直方向会出现塌陷问题。
如果盒子居中:margin:0 auto;如果盒子浮动了,margin:0 auto;就不起作用了
需求:让浮动的盒子居中
给浮动的盒子,加一个父盒子,设置宽度和浮动盒子一样,并且overflow:hidden;设置该盒子margin:0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:;
margin:;
}
.box{
width: 400px;
height: 300px;
background-color: red;
}
.main{
width: 100px;
overflow: hidden;
margin: 0 auto;
}
.child{
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="main">
<div class="child"> </div>
</div>
</div>
</body>
</html>
文本水平居text-align:center;
文本垂直居中:行高=盒子的高度
text-indent:2em; 首行缩进两个字符
font-weight:800;字体粗细(100-900)
font-family:“华文行楷”
font:12px/240px "华文行楷"
盒子如果浮动了,那么垂直方向上不会出现塌陷问题
css中有三种方式让盒子“脱标”
1.浮动float
2.绝对定位
3.固定定位
一些知识点
backkground-image:精灵图技术
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 24px;
height: 35px;
background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);
/*图片默认水平平铺,垂直平铺,这样就不平铺了*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position-x:;
background-position-y: -162px;
/*固定定位*/
/*background-attachment: fixed;*/
background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat 0 -162px;
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
2.定位
默认:position:static; 静态定位 position: relative; 相对定位
absolute;绝对定位
fixed;固定定位 - ralative:
如果仅仅设置标准文档流的盒子为相对定位,那么跟普通的盒子没有任何区别
不脱标
参考点:
相对于原来的位置 形影分离 作用:
1.层级提高,做压盖(不建议)
2.布局方案 "子绝父相"的参考 - absolute 1.脱标:不占位置
2.层级提高 参考点:
单个盒子
如果以top描述,是以页面的左上角为参考点(跟浏览器的左上角区分) 如果以bottom描述,是以浏览器的左下角为参考点 父子盒子之间 如果父辈盒子设置相对定位。子盒子设置绝对定位,以父辈盒子的0,0为参考点
懒得打字
最新文章
- JSP网页处理过程
- nvmw安装,用于控制node版本;
- DeviceIoControl 应用层如何和驱动层通信?
- iOS之 开发常用到的宏定义
- 游戏世界之Unity3D的基础认识
- Apache启用性能优化——启用Gzip,JS压缩
- 读取xml文件(可执行文件根目录debug)
- [jQuery编程挑战]007 切换数据表格的行列
- (C#)Windows Shell 外壳编程系列8 - 同后缀名不同图标?
- Unity3D游戏开发从零单排(四) - 制作一个iOS游戏
- JQuery中常用方法备忘
- MongoDB基础之一:Conetos下安装MongoDB
- ubuntu14.4 分辨率偏低
- 装PIL库
- P2568 莫比乌斯反演+整除分块
- Docker 系列四(自定义仓库).
- dubbo+zookeeper+spring实例
- ubuntu 安装 SVN 后的错误:Subversion Native Library Not Available &; Incompatible JavaHL library loaded
- 算法笔记--字符串hash
- python学习之老男孩python全栈第九期_day029知识点总结——configparser模快、logging模块