(摘自张鑫旭老师的课程内容)

position: absolute

1. 定位元素（关闭按钮etc）：dom顺序保持正确，然后根据absolute的位置跟随性（脱离文档流但是位置不变）和margin值进行定位

在img和文字之间用<!--  -->注释掉多余的空格

2. 当absolute定位后，left:0  right:0(百分百拉伸)，尺寸限制（eg: width: 50%），宽度最终为50%；但再设置margin: auto,元素就会水平居中

　　　　　　　　(IE8+ 支持)

z-index

　　　　　　　(不依赖z-index创建层叠上下文)

① display: flex 要与子元素设置正数的 z-index 配合使用才会起作用；

② position: fixed 在Chrome等blink/webkit内核浏览器或者移动端中起作用；

css 底层知识点的更多相关文章

  1. HTML&&CSS基础知识点整理

    HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...

  2. HTML和CSS的知识点

    HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!- ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  5. css入门知识点整理

    css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...

  6. CSS基本知识点——带你走进CSS的新世界

    CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...

  7. [总结]WEB前端开发常用的CSS/CSS3知识点

    css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...

  8. css相关知识点

    一.CSS的引入方式 1.1 css的介绍 HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  9. 关于CSS重要知识点(1)

    1. 盒子模型 CSS处理网页内容时,会把每一个元素"放在"一个盒子里,也就是所谓的盒子模型. 盒子模型包括4部分:内容,内边距(padding),边框(border)和外边距(m ...

随机推荐

  1. 【转载】SSH协议及其应用

    原文作者:阮一峰 链接: http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html http://www.ruanyifeng.com/ ...

  2. 【做题】ECFinal2018 J - Philosophical … Balance——dp

    原文链接 https://www.cnblogs.com/cly-none/p/ECFINAL2018J.html 题意:给出一个长度为\(n\)的字符串\(s\),要求给\(s\)的每个后缀\(s[ ...

  3. BalkanOI 2018 Parentrises（贪心+基础DP）

    题意 https://loj.ac/problem/2713 思路 对于 \(\text{P1}\) 的档,首先可以看出 \(O(n^3)\) 的方法,即用 \(O(n^3)\) 的 \(\text{ ...

  4. InstallShield Limited Edition for Visual Studio 使用

    首先到https://info.flexerasoftware.com/IS-EVAL-InstallShield-Limited-Edition-Visual-Studio填写信息: 完成之后跳转到 ...

  5. BeanUtils的copyproPerties方法的用法

    转自:Hassan Blog的博客 一.简介:  BeanUtils提供对Java反射和自省API的包装.其主要目的是利用反射机制对JavaBean的属性进行处理.我们知道,一个JavaBean通常包 ...

  6. VirtualBox中CentOS7.2 网络配置（固定IP+联网）

    一.前言 用虚拟机装Linux系统时,经常会出现一些问题.比如:从主机到虚拟机之间网络不通:虚拟机中无法联网:虚拟机中的IP地址不固定.为了解决这些问题,我曾花了不少时间.在此,记下填坑方法. 二.环 ...

  7. 常见adb指令

    1. adb –-help 查看帮助文档 2. adb start-server 当adb没有启动或被手动杀掉时,可以使用该命令启动服务 3. adb kill-server 杀死adb服务 4. a ...

  8. 雷林鹏分享：YAF路由问题

    这2天休年假,在家宅着学习研究了YAF框架,用YAF做过APP接口的项目,但是没有用来做过WEB方面的应用.趁着这2天在家想把博客用YAF进行一下改版,目的也想进一步学习一下YAF. 在这过程中遇到不 ...

  9. 事务，mybatis

    数据库事务:一件完整的事情, 要么全部成功,要么就全部失败 金典案例:转账 A给B转账:100 A:-100 B:+100 如何开启事务: Start transaction; 之前的转账操作(如果在 ...

  10. laravel框架的注入

    如果项目太大,最好采用注入的方式 首先在 根目录/app/ 下创建个service文件夹来 在控制器层可以调用 调用方法