定位方式:position需要搭配left|right |top |bottom

1.相对定位:相对于自身的位置进行偏移position: relative;

2.绝对定位:相对于有position属性的父元素定位,如果父元素没有position属性就会再向上找父元素,最后- -直找到body元素 position: absolute;

3.固定定位 position: fixed;--------------相对body

隐藏:

1.hidden内容溢出div就隐藏---------overflow: hidden;

2.scroIl内容溢出添加滚动条----------overflow:scroll;

块状元素和内联元素

1.block:块状; inline:内联元素; inline -block:内联块状的结合

2.inline-block:可以设置宽高,不独占-行------none :隐藏

css3的基本参数

1.border-radius:(四个角度)

2.2,3D动态效果

.d1:hover{
         /* translate(沿着x,y轴旋转)*/
         /* transform: translate(20px,50px);*/
          /* 旋转*/
         /* transform: rotate(200deg);*/
         /* 放大*/
        transform: scale(2,3);
         /* 过渡*/
       transition: transform 5s;

css定位和css3的基本的更多相关文章

  1. [CSS3] 学习笔记-CSS定位

    页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...

  2. CSS定位与布局:普通流

    CSS定位与布局属于CSS的基础,也是CSS布局影响很大的一部分,具体主要包括三种定位与布局机制( Positioning schemes):普通流,浮动,绝对定位. 其实除了这三种之外,还有一些定位 ...

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

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

  4. web前端学习(三)css学习笔记部分(2)-- css定位+盒子操作

    3.CSS定位 3.1定位 1.CSS定位: 改变元素在页面上的位置 2.CSS定位机制 普通流:元素按照其在HTML中的位置顺序决定排布的过程 浮动 绝对布局 属性 描述 position 把元素放 ...

  5. CSS定位属性position相关介绍

    position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...

  6. css定位

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

  7. 常用的CSS定位,XPath定位和JPath定位

    CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...

  8. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  9. CSS 定位

    一.CSS 定位和浮动   它们代替了多年来的表格布局.   定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置.   浮动在 CSS1 中被首次提出.浮动不完全是定位, ...

随机推荐

  1. matlab数值数据和变量名

    1.2MATLAB数值数据 l  数值数据类型的分类 l  数值数据的输出格式 l  常用数学函数内部函数 1.数值数据类型的分类 l  整型 l  浮点型 l  复数型 (1)整型 1.数值数据类型 ...

  2. Spring官网阅读(十八)Spring中的AOP

    文章目录 什么是AOP AOP中的核心概念 切面 连接点 通知 切点 引入 目标对象 代理对象 织入 Spring中如何使用AOP 1.开启AOP 2.申明切面 3.申明切点 切点表达式 excecu ...

  3. 深入理解JS中的对象(一)

    目录 一切皆是对象吗? 对象 原型与原型链 构造函数 参考 1.一切皆是对象吗? 首先,"在 JavaScript 中,一切皆是对象"这种表述是不完全正确的. JavaScript ...

  4. Power Query:非常规工资条

    常规工资条为标题.内容.空行,每三行一循环,横向排版.打印.空行填充颜色,方便切割.其中用到函数嵌套,先把table以row转换为list,然后用List.TransformMany生成Table.C ...

  5. MySQL 主从复制原理及过程讲解

    mysql主从原理描述,摘自老男孩. 下面简 单描述下 MySQL Replication 复制的原理及过程 . 1.在 Slave 服务器上执行 start slave 命令开启主从复制开关,主从复 ...

  6. 仿真FFT(quartus安装)

    软件下载:http://dl.altera.com/13.1/?edition=subscription 安装步骤: 接下来,仿真FFT: http://www.openhw.org/article/ ...

  7. 设计模式之GOF23享元模式

    享元模式FlyWeight 场景:如果有很多个完全相同或者相似的对象,可以节省内存资源 核心: 享元模式以共享的方式高效地支持大量细粒对象的重用 享元对象做到共享的关键是区分了内部状态和外部状态: 内 ...

  8. 设计模式之GOF23桥接模式

    桥接模式 当一个问题违反单一职责原则时,及控制该产品的有多个维度,为了扩展时减少类的膨胀个数,可以选用桥接模式 避免多重继承时 例如买电脑时                  桥接模式

  9. 简单的Java实现Netty进行通信

    使用Java搭建一个简单的Netty通信例子 看过dubbo源码的同学应该都清楚,使用dubbo协议的底层通信是使用的netty进行交互,而最近看了dubbo的Netty部分后,自己写了个简单的Net ...

  10. Python--WebDriverWait+expected_conditions的一个应用

    from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.s ...