CSS
文章平均质量分 87
五花漏
so vegetable
展开
-
iframe嵌入网页时,页面大小怎么自适应
问题描述:页面中有一容器div,有宽高属性。在div中嵌入一个iframe页面,呈现这种效果:可以看到嵌入的页面只露出了一部分。而我们希望:嵌入的页面能够完全展示在容器中。思路:利用CSS的 transform,进行页面缩放。1、我开发用的电脑屏幕分辨率是 1920 x 1080,以此为基准,设置iframe的宽高。2、iframe 的父元素 div 的宽高是屏幕宽高的50%,所以 transform: scale(0.5)这个数值是0.5。(其余的三个属性没啥可说的,不明白的搜一下W3C吧原创 2022-02-24 11:39:02 · 30909 阅读 · 6 评论 -
JS +JQuery实现时间轴卡尺
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时间原创 2021-12-21 15:48:07 · 761 阅读 · 0 评论 -
JS+JQuery实现switch组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sw原创 2021-12-21 14:48:57 · 874 阅读 · 0 评论 -
修改原生input checkbox样式、radio样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生原创 2021-12-21 14:16:30 · 869 阅读 · 0 评论 -
几种常用的文字效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字原创 2021-12-21 10:53:28 · 223 阅读 · 0 评论 -
弹性盒子的旧语法浏览器兼容处理
弹性盒子前言容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content项目的属性orderflex-growflex-shrinkflex-basisflexalign-self前言Flex是Flexible Box的缩写,意为”弹性布局”。采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项原创 2020-10-31 15:39:58 · 798 阅读 · 0 评论 -
CSS:background属性使用总结
1、background-color: 规定背景颜色。2、background-image: 规定背景图片。 background-image:url("Images/mytest.jpg");里面的图片路径是相对于代码所在样式表相对路径。路径也可以不加双引号: background-image:url(Images/mytest.jpg);3、background-repeat: 规定背景图片是否可以重复。background-repeat: repeat; /* 默...原创 2020-10-27 14:14:18 · 652 阅读 · 1 评论 -
盘点那些选择器中的坑~~
一、div.demo (中间没有空格)匹配类名包含demo的所有div元素。div .demo(中间有空格) 匹配类名包含demo的所有元素。.demo div(中间有空格) 匹配类名包含demo的元素中的所有后代div元素。(二者是祖先元素与后代元素的关系)。<div class="demo">11</div><div>2-1<p class="demo">2-2</p></div><div class="demo"原创 2020-06-12 10:09:56 · 144 阅读 · 0 评论 -
修改原生input[type=checkbox]样式 + 获取input[type=checkbox]状态
HTML:<form> <input id="select" name="select" type="checkbox" checked> <label for="select"><i></i>选择</label> </form>CSS:input[type="checkbox"] { display: none;//隐藏原生的多选框}input[type="checkbox"]+la原创 2020-06-09 14:49:51 · 1992 阅读 · 0 评论 -
最全的CSS选择器及示例整理,你值得拥有
1、简单选择器选择器示例含义通配符*所有元素ID选择器#demo匹配id=”demo”的元素(id唯一)类选择器.demo匹配class属性值包含demo的元素元素选择器div匹配所有div元素包含/后代选择器div p匹配所有被div包含的p元素子代选择器div>p匹配div元素的所有一级子元素p相邻兄弟选...原创 2020-03-23 14:08:00 · 495 阅读 · 0 评论 -
选择器优先级计算
选择器优先级由高到低顺序如下:(1).内联样式。(2).id选择器。(3).类选择器、属性选择器与伪类选择器。(4).*通配符选择器。(5).从父辈元素继承而来的样式。如果选择器的优先级相同,CSS代码中,靠后的CSS规则优先级高于前面的规则。优先级计算规则:(1).id选择器权重等级:0,1,0,0。(2).类、属性[type=“text”...原创 2020-03-23 10:08:48 · 811 阅读 · 0 评论 -
用N种方法实现各种元素的居中
行内元素以常用的span元素为例:HTML:<div class="father"> <span class="child">行内元素</span> </div>如果我们想实现如下效果,可以用三种方法实现。法1.father{ height: 200px; width: 200px; ba...原创 2020-03-20 16:02:54 · 189 阅读 · 0 评论 -
CSS实现单行、多行文本的溢出显示省略号
1、单行文本overflow: hidden; text-overflow: ellipsis; white-space: nowrap;white-space 设置如何处理元素中的空白normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 pre标签。nowrap文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止...原创 2020-03-16 15:17:56 · 106 阅读 · 0 评论 -
一张图彻底搞懂浮动和清除浮动
浮动的特点脱离标准文档流左浮动往左边贴,右浮动往右边贴,直到遇到父元素的边框。浮动元素虽然脱离标准文档流,但是仍然占据文档流中的文本空间。所以文本中浮动的图片会产生字围效果。浮动元素自动收缩为元素中内容的宽度。字体围绕效果浮动的缺点无高度的父容器高度塌陷...原创 2020-03-12 17:22:53 · 477 阅读 · 0 评论 -
一个例子搞懂CSS中word-wrap、word-break
1、处理长单词溢出长单词过长,不仅自动换行,而且也超出了父容器。<div class="longW">这有一个长单词叫 longggggggggggggggggggggggggggg </div> 首先,设置 word-wrap:break-word再设置 word-break:break-all 看看word-wrap 决定是否允许单词...原创 2020-03-12 16:55:08 · 483 阅读 · 0 评论