摘要: 水平居中: ①行内元素(或行内块元素)包含在块元素里时可将元素看作是父元素中的文本,父元素(块元素设置text-align:center;) ②1.块元素定宽时,设置margin: auto;即可实现水平居中 ②2.块元素定宽时,设置position定位实现水平居中 垂直居中: 对应① 设置heig 阅读全文
posted @ 2021-11-19 15:56 夏大爷 阅读(630) 评论(0) 推荐(0)
摘要: 为什么需要定位? 1.某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子。 2.当我们滚动窗口的时候,盒子是固定屏幕某个位置的。 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。 定位 阅读全文
posted @ 2021-11-18 19:07 夏大爷 阅读(76) 评论(0) 推荐(0)
摘要: 清除浮动本质: 清除浮动本质是清除浮动元素脱离标准流造成的影响 如果父盒子本身有高度,则不需要清除浮动 清除浮动之后,父级就会根据子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。 清除浮动语法:选择器{clear: 属性值;} 属性值 描述 left 不允许左侧有浮动元素(清除左侧浮动的 阅读全文
posted @ 2021-11-17 19:32 夏大爷 阅读(8) 评论(0) 推荐(0)
摘要: 它们的主要用法: 1.offset系列经常用于获得元素位置 offset offsetTop 2.client系列经常用于获取元素大小clientWidth clientHeight 3.scroll系列经常用于获取流动距离scrollTop scrollLeft 注意:页面滚动的距离是通过wind 阅读全文
posted @ 2021-11-17 18:02 夏大爷 阅读(7) 评论(0) 推荐(0)
摘要: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 200px; height: 200px; background-color: pink 阅读全文
posted @ 2021-11-17 18:00 夏大爷 阅读(120) 评论(0) 推荐(0)
摘要: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: #FFC0 阅读全文
posted @ 2021-11-17 17:59 夏大爷 阅读(29) 评论(0) 推荐(0)
摘要: offset概述:offset翻译是偏移量,使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 · 获得元素距离带有定位父元素的位置 · 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 offset系列属性 作用 element.offsetParent 返回作为该 阅读全文
posted @ 2021-11-17 17:58 夏大爷 阅读(139) 评论(0) 推荐(0)
摘要: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-11-15 20:00 夏大爷 阅读(26) 评论(0) 推荐(0)
摘要: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-11-15 19:48 夏大爷 阅读(12) 评论(0) 推荐(0)
摘要: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-11-15 19:20 夏大爷 阅读(72) 评论(0) 推荐(0)