css定位篇
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为参考点
懒得打字
css定位篇的更多相关文章
- html+css定位篇
position absolute相对于父元素移动,不在父元素范围内时,可能和其他元素重叠 relative相对于初始位置来进行移动 fixed相对于浏览器进行定位,无论滑轮如何滚动,始终出现在浏览器 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 第八篇 CSS定位
CSS定位 CSS除了内外边距控制元素,还有定位,看到“定位”两个字,同学们应该就能清楚,它能够做什么. 在刚学习的时候,我也经常使用定位,来控制元素的位置,但是初学的同学可能会注意不到定位的一些 ...
- CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- selenium之css定位小结
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...
- Selenium CSS定位语法
大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css的定位 ...
- 自动化测试-6.selenium的css定位
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...
- 2.4 CSS定位
前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...
随机推荐
- iOS 多线程的简单理解（1） 方式 ：同步 异步
最近遇到特别糟糕的面试,过程中提到多次对多线程的处理问题,并没有很好的给予答复和解决,所以在这里做个简单的备案: 期望能更加了解和熟练使用 多线程技术: 下面都是自己的总结,如果存在不对的,或者不足, ...
- 安装Vim插件——ViPlugin
打开Eclipse,找到Help——Install New Software Name输入 viPlugin ,Location输入 viplugin.com ,点击OK 之后同意协议,然后等待下载 ...
- 【CUDA开发】CUDA面内存拷贝用法总结
[CUDA开发]CUDA面内存拷贝用法总结 标签(空格分隔): [CUDA开发] 主要是在调试CUDA硬解码并用D3D9或者D3D11显示的时候遇到了一些代码,如下所示: CUdeviceptr g_ ...
- beautifulsoup 模块
一.介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你 ...
- [转帖]进程上下文频繁切换导致load average过高
进程上下文频繁切换导致load average过高 2016年6月26日admin发表评论阅读评论 http://www.361way.com/linux-context-switch/5131.ht ...
- SpringMVC获取参数的几种方式
前言: 年末了,忙了一年了却发现系统的整理的东西很少,一些基础的东西都未做整理,这里就将它随便整理一下,增加一些印象,当然在网上看到一些好的资料也会整理下来以备后用.今天整理一下springMVC获取 ...
- Python3之字符串格式化format函数详解（上）
概述 在Python3中,字符串格式化操作通过format()方法或者f’string’实现.而相比于老版的字符串格式化方式,format()方法拥有更多的功能,操作起来更加方便,可读性也更强.该函数 ...
- （三）spring Security 从数据库中检索用户名和密码
文章目录 配置 Druid 数据源 数据库 Mapper 文件 自定义 `UserDetailsService` 自定义登陆校验器 `AuthenticationProvider ` 配置 secur ...
- php创建生成数组的相关函数
php中和数组创建生成的函数有很多,用于定义数组的函数array(),数组合并函数array_combine(),还有array_fill(),array_fill_keys(),range()等等. ...
- Sublime实现自动排版
sublime功能很强大, 但是使用sublime就可以实现代码自动重新缩进,使代码缩进重排 方法:Ctrl+A选中全部内容,然后在菜单中选择Edit->Line->Reindent