CSS属性书写顺序

  1. 布局定位属性:display / position / float / clear / visibility / overflow
  2. 自身属性:width / height / margin / padding / border / background
  3. 文本属性:color / font / text-decoration / text-align / vertical-align / white-space / break
  4. 其他属性: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;}

三个特点:

  1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
  2. 如果祖先元素有定位,则以最近一级有定位祖先元素为参考点移动位置
  3. 绝对定位不占有原先的位置

子绝父相

父元素加相对定位,子元素加绝对定位

父盒子不加定位的话,子元素的定位将由浏览器的页面为准

固定定位

固定在浏览器的可视区域,与父元素无关

position:fixed;

固定到版心

  1. 贴版心右侧:先left:50%;,再让固定定位的盒子margin-left:版心宽度的一半;

粘性定位

滑到某个位置时,盒子固定

position:sticky;
top:10px;

特点:

  1. 以浏览器可视窗口为参照点移动元素

  2. 粘性定位占有原先的位置

  3. 必须加一个边偏移才能有效

定位叠放次序

通过z-index的值来确定哪个靠上面

数值越大,盒子越靠上,可正可负

{z-index:2;}

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin来居中

水平

  1. 先走父元素宽度的一半
  2. 在往左走定位盒子的宽度的一半

垂直

  1. 高度的一半
  2. 往下走盒子高度的一半

扩展

特性

  1. 行内元素加绝对或者固定定位,可直接设置高度和宽度
  2. 块级元素加绝对或固定定位,如果不给宽高,默认大小是内容的大小
  3. 浮动元素不会压住标准流的文字,绝对定位会压住所有内容

这个月是考试月,学习的进度慢了很多,寒假的时候再冲一冲,继续加油吧!

CSS定位特性的更多相关文章

  1. css定位:相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

  2. CSS定位与布局:浮动

    浮动的特点   浮动(float)属性提出的作用是实现文字的环绕效果,一个元素浮动后,会脱离普通流.主要的特点如下: 浮动的元素会向左或者向右移动直到它的外边缘接触容器框(containing blo ...

  3. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  4. python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  5. CSS定位中“父相子绝”

    一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...

  6. 第八篇 CSS定位

    CSS定位 CSS除了内外边距控制元素,还有定位,看到“定位”两个字,同学们应该就能清楚,它能够做什么.   在刚学习的时候,我也经常使用定位,来控制元素的位置,但是初学的同学可能会注意不到定位的一些 ...

  7. CSS定位布局

    CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...

  8. CSS 定位总结

    目录 元素显示模式 元素模式 元素显示模式转换 CSS定位机制 静态定位static 相对定位relative 绝对定位absolute 固定定位fixed 粘性定位sticky 定位小结一图流 CS ...

  9. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

随机推荐

  1. kafka-简介-01

    1.kafka是什么? Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特 ...

  2. SAAS云平台搭建札记: (四) AntD For React使用react-router-dom路由接收不同参数页面不刷新的问题

    在.net开发员眼里,如果使用MVC,根据路由匹配原则,可以通过各种方式接收参数,比如 /Post/List/1, /Post/List/2,或者 /Post/List?id=1,/Post/List ...

  3. Jmeter(四十三) - 从入门到精通高级篇 - Jmeter之IP伪装和欺骗(详解教程)

    1.简介 我们从小接受的教育就是不要撒谎,要做一个诚实的孩子,但是在现实生活中有时候说一个善意的谎言也不是可以的.这里由于服务器各种安全机制的限制和校验,因此我们不得不欺骗一下服务器,今天宏哥就给大家 ...

  4. OpenCV 之 空间刚体变换

    刚体就是 "刚性物体",它在运动过程中,内部各质点间的相对位置不会改变,也即 每两个质点间的距离 保持不变 假设刚体内任意两个质点,坐标分别为 $(x_1, y_1, z_1)$ ...

  5. hdu4771 水搜索(状态压缩+bfs)

    题意:      给你一个n*m的地图,问你从起点出发,吧所有的宝藏都捡完用的最少时间. 思路:k <= 4,水题,直接开一个数组mark[now][x][y];now代表的是当前检宝藏的二进制 ...

  6. Swift系列四 - 枚举

    适度给类型起别名能够让代码更加易懂,开发效率更高,可维护性更好. 一.typealias(别名) typealias用来给类型起别名. typealias Byte = Int8 typealias ...

  7. FreeSql之Expression表达式拼接参数扩展

    在FreeSql源码中Expression表达式拼接默认最多支持到5个泛型参数,当我们使用表关联比较多的时候,就需要进行扩展. 新建一个类,将命名空间改为System.Linq.Expressions ...

  8. Github + Picgo + Typora 让笔记远走高飞

    Github设置 登录 2.新建仓库 设置token 打开设置 然后点击,按钮生成Generate token Picgo设置 下载PicGo 参考视频 PicGo设置 设置Server 图床设置 上 ...

  9. IntelliJ IDEA打开Maven项目,Spring boot所有依赖红名,不可用

    导入外部的springboot项目时,出现报红线,无论怎么刷新maven就是不下载依赖包,情况如下 解决办法: 1)直接去自己的maven仓库,找到Spring boot,然后直接删除下面的文件 2) ...

  10. angularjs中的常遇问题整理

    1.页面中默认图片的显示 {{img || "/upload/img.png"}} 2.接口中的数据没有及时读取到,$apply $.post( url, {}, function ...