CSS折腾记
文章平均质量分 71
记录折腾的点点滴滴
sai小懒
空
展开
-
clientWidth、offsetWidth、scrollWidth、innerWidth的区别详解
clientWidth和clientHeigh、clientTop和clientLeft实际高度:clientWidth = width + 左右 paddingclientHeigh = height +上下 paddingclientTop = boder.top (上边框的宽度)clientLeft = boder.left (左边框的宽度)offsetWidth和offsetHight、offsetTop和offsetLeft实际高度:offsetWidth = width +原创 2021-01-31 17:46:53 · 810 阅读 · 0 评论 -
如何获取网页高度、屏幕高度、滚动高度?
有时候需要取页面的底部,就会用到 document.body.clientHeight,在HTML标准中这一句就能取到整个页面的高度,不论 body 的实际内容到底有多高。在XHTML中,如果body 体中只有一行,则 document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度,就要用 document.documentElement.clientHeight 来获取。原因: 在HTML中,body 是整个DOM 的根,而...转载 2021-01-28 18:35:22 · 2289 阅读 · 0 评论 -
解决body高度设置为100%添加背景色不起作用
当给body添加以下样式时,按理说会显示出背景色且占据整个窗口,但实际却是背景色并无任何显示,检查时发现浏览器显示body的高度为0。body { height: 100%; background-image: linear-gradient(to bottom right, #c165dd, #5c27f1);}原因在于:(1)设置元素高度为百分比时,该元素需要向上遍历父标签,根据父元素的高度来设置自己的高度,若父元素高度也是百分比,则父元素也要找到自己的父元素,如果中间有个原创 2021-01-16 19:17:50 · 2868 阅读 · 1 评论 -
CSS之translate(-50%,-50%)实现水平垂直居中
translate(-50%,-50%) 实现效果:往上 (x轴),左 (y轴)移动自身长宽的 50%,以使其居于中心位置。与使用margin实现居中不同的是,margin必须知道自身的宽高,而 translate 可以在不知道宽高的情况下进行居中,tranlate函数中的百分比是相对于自身宽高的百分比示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2020-08-30 16:29:34 · 4037 阅读 · 0 评论 -
CSS之相对定位与绝对定位
绝对定位绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值,则相对于整个网页。实例1:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>元素定位实例</title&转载 2020-08-29 16:02:25 · 174 阅读 · 0 评论 -
CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。一、 基本语法在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性:p:be转载 2020-08-27 14:01:08 · 300 阅读 · 0 评论 -
解决div设置opacity后,其中的内容也随之透明化
今天做练习,本来想实现这个效果:没想到,它居然变成了这样:嗯?本想用opacity来控制div背景色透明度,可这文字也变透明了,并不是我想要的效果,这是被同化了?其实,解决方法并不难,只需一行代码就搞定了:background: rgba(255, 255, 255, 0.2);(最后的值为关键)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m原创 2020-08-25 16:57:17 · 3779 阅读 · 0 评论 -
CSS之height: 100%和height: auto的区别
height: auto —— 是指根据块内内容自动调节高度。height:100% —— 是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。例:随着窗口宽度的改变,导航栏的位置发生变化(大于700时为侧边导航栏,700到400之间为顶部水平导航栏,小于400为顶部垂直导航栏)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2020-08-23 16:28:34 · 3751 阅读 · 0 评论 -
CSS样式display:inline-block,block,inline的区别与用法
首先要了解什么是块级元素与行级元素?块级元素:会占领页面的一行,其后多个block元素自动换行、 可以设置width,height,设置了width后同样也占领一行、同样也可以设置 margin与padding属性。PS:常见的块级元素:div,img,ul,form,p等行级元素:与其他元素在同一行上,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。PS:em,strong,br,input等display:inline-block,block,inline元素转载 2020-08-23 15:51:28 · 287 阅读 · 0 评论