摘要：
固定定位： 1.使用的是position：fixed； 2.固定定位会完全脱离文档流 3.固定定位参考的是浏览器窗口，不是body元素 阅读全文
2021年11月22日
摘要：
实战移入切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移入切换</title> <link rel="stylesheet" type="text/css" href="../reset.css"/> <style ty 阅读全文
摘要：
层级 1.每一个定位元素会独占一层 2.使用z-index属性来改变定位元素的层级，从而改变定位元素的堆叠关系 3.数值越大，层级越高 4.如果都没有设置层级，默认值是0 5.当层级一样时，后写的定位元素的层级大于先写的层级，这就叫做后来者居上 阅读全文
摘要：
定位偏移量 1.可以使用合法的尺寸单位：px em rem... 2.可以使用正值，也可以使用负值 3.使用百分比时，元素相对于哪个元素定位，就是按照该参照元素的高度和宽度作为参考 阅读全文
摘要：
绝对定位 1.使用的是position：absolute； 2.绝对定位完全脱离文档流，原来的位置不会被保留，下面的正常元素会进行补位 3.绝对定位参考的是就近有定位属性父元素 4.如果没有找到就近定位的父元素，最后会以body元素作为参考 阅读全文
摘要：
相对定位 1.使用的是position：relative；属性名和属性值 2.指定了相对定位后，元素就是定位元素，脱离了文档流 3.指定了相对定位后，脱离了文档流，原来的位置依然保留，所以没有完全脱离文档流 4.当同一个方向都设置了值，只有top和left会生效，他们两个优先 5.相对定位是相对于原 阅读全文
摘要：
定位初识 1.使用场景：没有规律的元素布局 2.规定元素的位置 3.定位的三种类型：相对定位，绝对定位，固定定位 4.定位使用方法：规定是哪一种定位方式，然后指定方向上的偏移量 5.top和bottom只有一个会生效，left和right只有一个会生效 阅读全文
摘要：
防止高度塌陷的方法： 1.直接给父元素设置高度，不能彻底解决父元素塌陷的问题 2.在元素内容之后，加上一个块级元素，不添加任何内容，再添加清除左右浮动属性即可，这种方法会额外增加文档的结构，不是终极解决方法 3.使用伪元素，在元素内容之后添加一个伪元素，内容为空，设置为块级元素，再清除左右浮动即可， 阅读全文
摘要：
父元素高度塌陷：适用于父元素没有设置高度 1.原因：由于元素中的子元素设置了浮动属性，就会造成父元素高度塌陷 2.防止高度塌陷：直接给父元素设置高度，但是很多时候不知道里面的子元素的具体高度，无法彻底解决父元素的塌陷问题 阅读全文
摘要：
清除浮动 1.使用的是clear属性,规定元素哪一侧不能有浮动 2.书写格式：clear：方向（left/right/both）; 3.使用了清除浮动的元素属于浮动元素 4.left 规定元素的左侧不能有浮动元素 5.right 规定元素的右侧不能有浮动元素 6.both 规定元素的左右两侧都不能有 阅读全文
摘要：
浮动元素布局商品列表 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动布局商品列表</title> <link rel="stylesheet" type="text/css" href="../reset.css"/> < 阅读全文
摘要：
文字环绕效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文字环绕效果</title> <link rel="stylesheet" type="text/css" href="../reset.css"/> <style 阅读全文
摘要：
浮动元素动的特点 1.当浮动元素的上一行是正常元素，这个浮动元素只能呆在当前行，不能跑到上一行 2.左浮动，首先元素会向左跑，会从上一行的右侧出来继续跑，直到遇到有浮动的元素才会停止 3.右浮动，首先元素会向右跑，会从上一行的左侧出来继续跑，直到遇到有浮动的元素才会停止 阅读全文
摘要：
浮动元素浮的特点： 1.浮动元素会脱离正常的文档流，后面的元素会自动补位 2.浮动元素就像浮云一样浮起来 3.浮动元素会被父元素宽度所约束，所以并没有完全脱离文档流 4.浮动元素会对下面正常元素的文字内容产生影响 阅读全文
摘要：
浮动初识 1.设置浮动的目的是让块级元素能够待在一行 2.设置语法：float：方向（left or right）； 阅读全文
摘要：
透明度设置： 1.filter：opacity（百分比）； 2.取值是0-100% 默认值是100%，完全不透明 设置成0%时，图片完全透明 3.-webkit-filter:opacity（百分比） 老版本的谷歌和欧朋浏览器需要加前缀 4.所有IE浏览器都不支持滤镜属性 阅读全文
摘要：
滤镜效果：灰度和对比度 灰度： 1.filter：grayscale（百分比）； 2.取值范围是0-100%，默认值是0% ，设置成100%时，图像会变成黑白 对比度： 1.filter：contrast（百分比）； 2.默认值是100% ，设置成0%时，图片会变成全黑 3.当超过100%时，意味着 阅读全文
