绝对定位

1. z-index ： img{ position:absolute; left:0px; top:0px; z-index:-1 ; } 所有主流浏览器都支持 z-index 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）。 说明： 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。 可能的值： 值 描述 auto 默认。堆叠顺序与父元素相等。 number 设置元素的堆叠顺序。 inherit 规定应该从父元素继承 z-index 属性的值。 2. back-round: background-color 规定要使用的背景颜色。 background-position background-position:center; 规定背景图像的位置。 background-size background-size:80px 60px; 规定背景图片的尺寸。 background-repeat 规定如何重复背景图像。

文本缩进：text-indext：2em；（缩进两个字）。 单行文本垂直居中：line-height：20px；（当行文本行高20px，当line-height等于容器的高时，当行文本在容器中垂直居中）。 文本左对齐：text-align：left； px（像素单位）和em都是相对单位，em=1*font-size； 字体下划线：text-decoration：underline； 鼠标光标的样式：cursor：pointer； 圆角：border-radius：10px； ---------------------------------------------------- 行级元素（display:inline;）：（1）内容决定元素所占位置（2）不能通过css改变宽高。 <sapn><strong><a><em><del> 块级元素（display:block;）：（1）独占一行（2）可以通过css改变宽高。 <div><p><ul><ol><li><form> 行级块元素（display:inline-block;）：（1）不独占一行（2）可以改变宽高 <img> （ps：带有inline或者inline-block的都带有文字的特性，例如：两个单词在浏览器中显示会通过一个空格隔开，两张图片并排中间也会有一条小间隙） （ps：行级元素只能嵌套行级元素

1.图片向下撑大3像素问题 在一个盒子里面放一张图片，默认情况下，图片会向下撑大3像素，有以下几种解决方法： 1.1 给图片添加display : block； 1.2 给图片添加 float : left； 1.3 给图片添加 vertical-align : middle ; 1.4 给他的父元素加font-size：0； 2.如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中？ 给父元素添加宽高，添加行高 添加 text-align：center 给图片添加 ：vertical-align：center 3.元素的类型分类哪几种？各自都有什么特点？ 块元素 独占一行，竖着排，能设置宽高 行内元素 默认情况下文本一行显示，不能设置宽高 行内块状元素 inline-block,既有行内元素的特点又有块状元素的特点 可变元素 添加float：left 相当于display：block 4.如何实现一个元素消失和出现？ display：none display：block opcity : 0 ; opcity : 1 ; 5.单行文本溢出显示省略号怎么实现？ 添加width； white-space：nowrap； overflow：hidden； text-overflow：ellipsis； 6.定位的属性值有哪几个？分别有什么特点？ position : absolute

　　先让我们看看一张网页是怎么来的，也就是从用户输入完一个网址点下“ENTER”键到整个页面加载出来中间发生了什么。首先我们了解下HTTP过程： 一、寻找IP（每一步都是在上一步没找到的情况下进行的） 本地阶段： 1、浏览器搜索自身缓存； 2、搜索操作系统自身的DNS缓存； 3、地区本地HOST文件； 4、浏览器发送DNS系统调用； 路由阶段： 1、宽带运营商服务器查看本地缓存； 2、运营商服务器发起一个迭代DNS解析请求； com -> baidu.com -> www.baidu.com 3、运营商服务器把结果返回给操作系统内核同时缓存起来； 4、操作系统内核把结果返回个浏览器 浏览器得到IP了。 二、建立连接并获取内容 1、发起HTTP三次握手，建立TCP/IP连接； 2、发起HTTP请求； 3、服务器端读取数据库并处理数据后返回页面内容； 这样获得了一个页面，但是页面的js文件、css文件、图片都要经过这样的过程！ 4、渲染页面； 我们写baidu.com和www.baidu.com同样都会跳转到百度首页，但是baidu.com是经过了一次301页面跳转到www.baidu.com的，多了一次DNS查询； 常见状态码： 1xx 请求已接受 2xx 处理完毕 3xx 重定向 4xx 客户端错误 5xx 服务器端错误 200 OK成功 400 客户端语法错误 401

一.绝对定位 position: absolute; /*绝对定位： 1、定位属性值：absolute 2、在页面中不再占位(浮起来了)，就无法继承父级的宽度(必须自己自定义宽度) 3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局 4、绝对定位的参考系是最近的定位父级(不是父级中的哪一点，而是四边参照四边) 5、左右同时存在，取左；同理上下取上 6、当父级定位了，子级参照父级定位，又可以重新获取父级宽度(也可以在计算中拿到父级高度) */ 学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） position:fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 二.相对定位 position: relative; 父级(最近的一个父级)相对定位的目的 1）不影响自身布局 2）辅助自己绝对定位布局 三默认定位 position: static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 四.继承定位 position:inherit 规定应该从父元素继承 position 属性的值。 五.滚动条 overflow hidden

水平居中 定宽的块级元素 .out { } .in { margin: 0 auto; } 不定宽的块级元素（一个div里面多个div要居中） 里面元素设置为内联元素，父元素使用text-align：center； .out { text-align: center; } .in { display: inline-block; } 使用flex布局 .out { display: flex; justify-content:center; } .in { } 给多个div加一个container .out { position: relative; } .container { position: absolute; left:50%; transform: translate(-50%,0) } .in { float: left; } 内联元素居中 .out { text-align:center; } 垂直居中 块级元素垂直居中，知道高度 .out { } .in { margin-top: 75px; } .out { box-sizing: border-box; padding-top: 75px; } .in { } 块级元素垂直居中，不知道高度 .out { position: relative; } .in { position: absolute; top:

HTML --css笔记: 一.css引入方式 1.行内式(不推荐使用): 直接在标签里面加style-css样式,这样是可以添加,但是会出现很同样标签,所以一般不推荐 和使用这样的方式去添加css样式. 使用方法: <p style="color:green">这里放设置文本</p> 直接在标签属性添加style-css样式 2.内接样式(页面较小的时候使用哟 ***): 内接样式是针对页面比较小的情况,才会使用. 使用方法:就可以直接在head 标签里面添加:<style> 直接在这里写cass样式</style> 3.外接样式: (1) 链接式 *** 这个是常用的方式,链接式一般都是会另外写一个文件,然后通过link 样式文件进来. 使用方法:<link rel="stylesheet" href="这里放cass文件"> (2) 导入式 同样也是另外写css文件然后导入,不建议使用,因为页面css加载不出来时候,会显示 html 的页面,有加载延迟 导入式是使用方法: @import url("这里放css文件") 二.选择器 *** 注意点: css优先级,指的是浏览器加载 cass 样式的先后顺序 *** 1.基本选择器 (1) 标签选择器 直接使用标签名来做选择器,而不是在另外设置属性,调用属性的( 值 ) 使用方法:直接标签来写在里面,任何标签都是可以找到的.

css实现元素的垂直居中。 （尝试采用5W2H方法说明）： 别只看，请实操！！！ What： 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式，并说明优缺点。 2.写这篇文章的目的，是为了巩固自己的知识，也分享给大家一起学习研究，欢迎大家指正和评论。 Why： 需要水平居中的原因，就是为了让元素位于视觉中心突出重点，可视化布局的简介明了，主题明确，提高用户体验度。 When： 我是星期六下午开始编写，一直到晚上12点。 对于你自己，如果你感觉自己对这些掌握还不牢靠，请立刻！马上！Now！开始动手尝试起来，不然一开始就浇灭你的小火苗，让你丧失了激情和男人该有的冲动。 Where： 学习的场所可以是anywhere；咖啡厅、家里、饭店、火车上（我就是在高铁上码的文章），不必拘泥场所，只要不冷能动手就做起来。 Who： 针对人员比如像我这种遗忘型、刚入门的初学者、以及在css懵懂过程中徘徊的你，大神请绕路或留个脚印踩踩也行。 我，一个大老爷们，没啥好说的；你们，一群智商200+，给个支点就能撬动地球的你们，动动手指你们就全学会了。 How Long： 你要问我学懂这个大概多长时间，以大家高达200+赶超爱因斯坦的智商，说半天就能搞懂我都感觉是瞧不起大家，以各位看官的智商，半个小时，顶多半个小时，你就能掌握水平居中，当然，我后面还会说垂直居中，水平垂直居中

一、背景相关 背景颜色　　　　　　 background-color ：颜色名称/rgb值/十六进制值 背景图片　　　　　　 background-image　：url('') 背景图片平铺方式　　 background-repeat　：　repeat-x(仅水平重复) repeat-y(仅垂直重复) no-repeat(不重复) 设置背景图片位置　　 background-position　：　　数字+单位/center/top/bottom/left/right 同上。 例如：50px 50px 背景图片是否滚动　　 background-attachment　：　　fixed(不滚动) scroll（滚动） dmeo: 设置页面的body背景： <!DOCTYPE html> <html lang="en"> <head> </head> <style> body{ background-color: aquamarine; background-image: url("cool.jpeg"); background-repeat:repeat-y ; background-position: top; background-attachment: fixed; } </style> <body> </body> </html> 二、边框、边距 边框：border 用法：

CSS基础语法： 例如 p{ color:red; background-color: green; } css的四种引入方式: 1 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 <p style="color:red;background-color:green">hello liuliu</p> 2 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下 <style> p{ color:red; background-color: green; } </style> 3 将一个.css文件引入到HTML文件中 <link rel="stylesheet" href="first.css"> 4 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下： <style> @import 'first.css'; </style> 注意： 导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件