CSS定位特性
CSS属性书写顺序
- 布局定位属性:display / position / float / clear / visibility / overflow
- 自身属性:width / height / margin / padding / border / background
- 文本属性:color / font / text-decoration / text-align / vertical-align / white-space / break
- 其他属性:content / cursor /border-radius / box-shadow / text-shadow …
学成在线案例
导航栏注意点:
实际开发中,我们不会直接用链接a而是用li包含的做法
无序列表dl dt dd
写了2个晚上终于把这个写完了
定位
将盒子定在某一个位置,所以定位是在摆盒子,按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式
通过CSS中的position值来设定
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
边偏移
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top:80px |
顶端偏移量,定位元素相对于其父元素上边线的距离 |
bottom | bottom:80px |
底部偏移量,定位元素相对于其父元素下边线的距离 |
left | left:80px |
左部偏移量,定位元素相对于其父元素左边线的距离 |
right | right:80px |
右部偏移量,定位元素相对于其父元素右边线的距离 |
相对定位
是元素在移动位置的时候,相对于原来的位置来说的
选择器{position:relative;}
绝对定位
在移动的时候,相对于它的祖先元素来说的
选择器{position:absolute;}
三个特点:
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
- 如果祖先元素有定位,则以最近一级有定位祖先元素为参考点移动位置
- 绝对定位不占有原先的位置
子绝父相
父元素加相对定位,子元素加绝对定位
父盒子不加定位的话,子元素的定位将由浏览器的页面为准
固定定位
固定在浏览器的可视区域,与父元素无关
position:fixed;
固定到版心
- 贴版心右侧:先left:50%;,再让固定定位的盒子
margin-left:版心宽度的一半;
粘性定位
滑到某个位置时,盒子固定
position:sticky;
top:10px;
特点:
以浏览器可视窗口为参照点移动元素
粘性定位占有原先的位置
必须加一个边偏移才能有效
定位叠放次序
通过z-index的值来确定哪个靠上面
数值越大,盒子越靠上,可正可负
{z-index:2;}
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin来居中
水平
- 先走父元素宽度的一半
- 在往左走定位盒子的宽度的一半
垂直
- 高度的一半
- 往下走盒子高度的一半
扩展
特性
- 行内元素加绝对或者固定定位,可直接设置高度和宽度
- 块级元素加绝对或固定定位,如果不给宽高,默认大小是内容的大小
- 浮动元素不会压住标准流的文字,绝对定位会压住所有内容
这个月是考试月,学习的进度慢了很多,寒假的时候再冲一冲,继续加油吧!
CSS定位特性的更多相关文章
- css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...
- CSS定位与布局:浮动
浮动的特点 浮动(float)属性提出的作用是实现文字的环绕效果,一个元素浮动后,会脱离普通流.主要的特点如下: 浮动的元素会向左或者向右移动直到它的外边缘接触容器框(containing blo ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- CSS定位中“父相子绝”
一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...
- 第八篇 CSS定位
CSS定位 CSS除了内外边距控制元素,还有定位,看到“定位”两个字,同学们应该就能清楚,它能够做什么. 在刚学习的时候,我也经常使用定位,来控制元素的位置,但是初学的同学可能会注意不到定位的一些 ...
- CSS定位布局
CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...
- CSS 定位总结
目录 元素显示模式 元素模式 元素显示模式转换 CSS定位机制 静态定位static 相对定位relative 绝对定位absolute 固定定位fixed 粘性定位sticky 定位小结一图流 CS ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
随机推荐
- kafka-简介-01
1.kafka是什么? Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特 ...
- SAAS云平台搭建札记: (四) AntD For React使用react-router-dom路由接收不同参数页面不刷新的问题
在.net开发员眼里,如果使用MVC,根据路由匹配原则,可以通过各种方式接收参数,比如 /Post/List/1, /Post/List/2,或者 /Post/List?id=1,/Post/List ...
- Jmeter(四十三) - 从入门到精通高级篇 - Jmeter之IP伪装和欺骗(详解教程)
1.简介 我们从小接受的教育就是不要撒谎,要做一个诚实的孩子,但是在现实生活中有时候说一个善意的谎言也不是可以的.这里由于服务器各种安全机制的限制和校验,因此我们不得不欺骗一下服务器,今天宏哥就给大家 ...
- OpenCV 之 空间刚体变换
刚体就是 "刚性物体",它在运动过程中,内部各质点间的相对位置不会改变,也即 每两个质点间的距离 保持不变 假设刚体内任意两个质点,坐标分别为 $(x_1, y_1, z_1)$ ...
- hdu4771 水搜索(状态压缩+bfs)
题意: 给你一个n*m的地图,问你从起点出发,吧所有的宝藏都捡完用的最少时间. 思路:k <= 4,水题,直接开一个数组mark[now][x][y];now代表的是当前检宝藏的二进制 ...
- Swift系列四 - 枚举
适度给类型起别名能够让代码更加易懂,开发效率更高,可维护性更好. 一.typealias(别名) typealias用来给类型起别名. typealias Byte = Int8 typealias ...
- FreeSql之Expression表达式拼接参数扩展
在FreeSql源码中Expression表达式拼接默认最多支持到5个泛型参数,当我们使用表关联比较多的时候,就需要进行扩展. 新建一个类,将命名空间改为System.Linq.Expressions ...
- Github + Picgo + Typora 让笔记远走高飞
Github设置 登录 2.新建仓库 设置token 打开设置 然后点击,按钮生成Generate token Picgo设置 下载PicGo 参考视频 PicGo设置 设置Server 图床设置 上 ...
- IntelliJ IDEA打开Maven项目,Spring boot所有依赖红名,不可用
导入外部的springboot项目时,出现报红线,无论怎么刷新maven就是不下载依赖包,情况如下 解决办法: 1)直接去自己的maven仓库,找到Spring boot,然后直接删除下面的文件 2) ...
- angularjs中的常遇问题整理
1.页面中默认图片的显示 {{img || "/upload/img.png"}} 2.接口中的数据没有及时读取到,$apply $.post( url, {}, function ...