Walker-Yang

摘要：固定定位： 1.使用的是position：fixed； 2.固定定位会完全脱离文档流 3.固定定位参考的是浏览器窗口，不是body元素阅读全文

posted @ 2021-11-22 22:13 Walker-Yang 阅读(20) 评论(0) 推荐(0)

摘要：实战移入切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移入切换</title> <link rel="stylesheet" type="text/css" href="../reset.css"/> <style ty 阅读全文

posted @ 2021-11-22 21:56 Walker-Yang 阅读(20) 评论(0) 推荐(0)

11-13.层级

摘要：层级 1.每一个定位元素会独占一层 2.使用z-index属性来改变定位元素的层级，从而改变定位元素的堆叠关系 3.数值越大，层级越高 4.如果都没有设置层级，默认值是0 5.当层级一样时，后写的定位元素的层级大于先写的层级，这就叫做后来者居上阅读全文

posted @ 2021-11-22 21:54 Walker-Yang 阅读(43) 评论(0) 推荐(0)

11-12.定位偏移量

摘要：定位偏移量 1.可以使用合法的尺寸单位：px em rem... 2.可以使用正值，也可以使用负值 3.使用百分比时，元素相对于哪个元素定位，就是按照该参照元素的高度和宽度作为参考阅读全文

posted @ 2021-11-22 21:46 Walker-Yang 阅读(78) 评论(0) 推荐(0)

11-11.绝对定位

摘要：绝对定位 1.使用的是position：absolute； 2.绝对定位完全脱离文档流，原来的位置不会被保留，下面的正常元素会进行补位 3.绝对定位参考的是就近有定位属性父元素 4.如果没有找到就近定位的父元素，最后会以body元素作为参考阅读全文

posted @ 2021-11-22 21:41 Walker-Yang 阅读(10) 评论(0) 推荐(0)

11-10.相对定位

摘要：相对定位 1.使用的是position：relative；属性名和属性值 2.指定了相对定位后，元素就是定位元素，脱离了文档流 3.指定了相对定位后，脱离了文档流，原来的位置依然保留，所以没有完全脱离文档流 4.当同一个方向都设置了值，只有top和left会生效，他们两个优先 5.相对定位是相对于原阅读全文

posted @ 2021-11-22 21:34 Walker-Yang 阅读(78) 评论(0) 推荐(0)

11-9.定位初识

摘要：定位初识 1.使用场景：没有规律的元素布局 2.规定元素的位置 3.定位的三种类型：相对定位，绝对定位，固定定位 4.定位使用方法：规定是哪一种定位方式，然后指定方向上的偏移量 5.top和bottom只有一个会生效，left和right只有一个会生效阅读全文

posted @ 2021-11-22 21:26 Walker-Yang 阅读(16) 评论(0) 推荐(0)

11-8.防止高度塌陷

摘要：防止高度塌陷的方法： 1.直接给父元素设置高度，不能彻底解决父元素塌陷的问题 2.在元素内容之后，加上一个块级元素，不添加任何内容，再添加清除左右浮动属性即可，这种方法会额外增加文档的结构，不是终极解决方法 3.使用伪元素，在元素内容之后添加一个伪元素，内容为空，设置为块级元素，再清除左右浮动即可，阅读全文

posted @ 2021-11-22 21:18 Walker-Yang 阅读(76) 评论(0) 推荐(0)

11-7.父元素高度塌陷

摘要：父元素高度塌陷：适用于父元素没有设置高度 1.原因：由于元素中的子元素设置了浮动属性，就会造成父元素高度塌陷 2.防止高度塌陷：直接给父元素设置高度，但是很多时候不知道里面的子元素的具体高度，无法彻底解决父元素的塌陷问题阅读全文

posted @ 2021-11-22 20:20 Walker-Yang 阅读(97) 评论(0) 推荐(0)

11-6.清除浮动

摘要：清除浮动 1.使用的是clear属性,规定元素哪一侧不能有浮动 2.书写格式：clear：方向（left/right/both）; 3.使用了清除浮动的元素属于浮动元素 4.left 规定元素的左侧不能有浮动元素 5.right 规定元素的右侧不能有浮动元素 6.both 规定元素的左右两侧都不能有阅读全文

posted @ 2021-11-22 20:11 Walker-Yang 阅读(43) 评论(0) 推荐(0)

导航

公告