css
文章平均质量分 62
碉堡飞哥
这个作者很懒,什么都没留下…
展开
-
CSS伪类和伪元素及CSS3新增伪类
1、伪类与伪元素CSS伪类:用于向某些选择器添加特殊的效果。伪类 作用:hover 将样式添加到鼠标悬浮的元素:active 将样式添加到被激活的元素:focus 将样式添加到获得焦点的元素:link 将样式添加到未被访问过的链接:visited 将样式添加到被访问过的链接:first-child 将样式添加到元素的第一个子元素:lang 定义指...转载 2018-08-17 23:32:07 · 712 阅读 · 0 评论 -
CSS三大特性—— 继承、 优先级和层叠。
CSS三大特性—— 继承、 优先级和层叠。 继承:即子类元素继承父类的样式;优先级:是指不同类别样式的权重比较;层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。css选择符分类 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class=”head”,class=”head_logo...转载 2018-08-28 20:56:43 · 461 阅读 · 0 评论 -
rem原理和@media媒体查询
rem用于移动端响应布局 rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小//html<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0...转载 2018-08-28 21:12:15 · 589 阅读 · 0 评论 -
项目初始化css
我常用雅虎的,全部清除body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font...原创 2018-08-24 16:00:26 · 666 阅读 · 0 评论 -
常见几种浏览器兼容性问题与解决方案
常见几种浏览器兼容性问题与解决方案 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。碰到频率:100%解决方案:CSS里 *{margin:0;padding:0;}备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标...转载 2018-08-29 23:34:09 · 531 阅读 · 0 评论 -
css 无消息时背景完全居中
//html<div> <img class="noImgView" src="../assets/noMessage.png" /> <div class="nomedication">暂时没有收到消息哦!</div></div>//css.noImgView{ pos原创 2018-08-30 10:21:18 · 135 阅读 · 0 评论 -
让一个图片虚化
让一个图片虚化<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style type="text/css"> .content { color: #ffffff;原创 2018-09-03 13:51:45 · 599 阅读 · 0 评论 -
首页背景虚化
首页背景虚化//html <div class="index"></div> <div class="index2"> 111 </div>//css.index { position: fixed; width: 100%; he...原创 2018-09-03 15:11:08 · 1409 阅读 · 0 评论 -
小程序通告栏
wxml如下:这武器那都好,就是不吃药只能战斗15秒,15秒内不是你死就是我亡,这才是90级史诗该有的王者风范!wxss如下:.srcoll_view{position: absolute;top:0rpx;height: 100rpx;font-size: 30rpx;white-space: nowrap;line-height: 100rpx;color: #00bf...原创 2018-09-20 15:15:49 · 2999 阅读 · 0 评论 -
CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题,那就是这个属性会被子元素所继承。如下代码,则子元素中也将是半透明效果,无论你将子元素的半透明值重置还是如何都不会改变这一情况。.parent{opacity:0.5...转载 2018-09-26 16:57:32 · 1063 阅读 · 0 评论 -
可移动悬浮按钮案例
可移动悬浮按钮案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .div{原创 2018-10-12 11:32:57 · 1160 阅读 · 0 评论 -
伪类before/after中的图片大小是不能设置的
:before /:after伪元素默认是一个行内元素,所以这个元素设置width/height是无效的就像你对a元素设置width/height一样你可以把图片设为背景图片,通过bakckground-size来设置大小#center_box:before{content:’’;background-image:url(http://localhost/quding/photos/u1...原创 2018-11-01 14:55:04 · 13511 阅读 · 0 评论 -
多个img叠会有间隔问题
修改:把图片css设置为display: block;即可display: block;原创 2018-11-09 19:31:14 · 275 阅读 · 0 评论 -
css的list的颜色交替更换
#list li:nth-of-type(odd){ background:#00ccff;}奇数行#list li:nth-of-type(even){ background:#ffcc00;}偶数行原创 2018-11-27 08:56:01 · 896 阅读 · 0 评论 -
长图截取放数据
以后遇到这种长图片,用分解图片法,在要动态数据的地方截取成2张原创 2018-12-03 18:15:33 · 135 阅读 · 0 评论 -
解决div内图片下方空白的问题
img {display: block;}原创 2018-12-28 10:15:07 · 710 阅读 · 0 评论 -
样式穿透
// 使用 css 时可以用 >>> 进行样式穿透.test-wrapper >>> .ant-select {font-size: 16px;}// 使用 scss, less 时,可以用 /deep/ 进行样式穿透.test-wrapper /deep/ .ant-select {font-size: 16px;}// less CSS mo...转载 2019-07-18 14:22:31 · 1857 阅读 · 0 评论 -
用CSS实现二栏与三栏布局
两栏布局方法一:BFC构建两栏布局是主内容区为主,左(右)侧有一栏,代码如下: &amp;lt;style&amp;gt; #header, #footer{ height: 100px; background: red; } #content .main{ heigh...转载 2018-08-21 13:54:36 · 292 阅读 · 0 评论 -
全面地理解BFC
一、BFC是什么?在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个...转载 2018-08-21 11:38:46 · 158 阅读 · 0 评论 -
html单行(多行)超出省略并显示省略号,案例不能用回来砍我!
实例效果 html:&amp;lt;div class=&quot;ell1&quot;&amp;gt;1111111111111111111111111111111111111111111111111&amp;lt;/div&amp;gt;&amp;lt;div class=&quot;ell2&quot;&amp;gt;22222原创 2018-08-16 12:45:20 · 1020 阅读 · 1 评论 -
css js放置位置和原因
网站加载的整个完整过程。1.首先浏览器从服务器接收到html代码,然后开始解析html2.构建DOM树(根据html代码自顶向下进行构建),并且在同时构建渲染树3.遇到js文件加载执行,将阻塞DOM树的构建;遇到css文件,将阻塞渲染树的构建(script标签中的defer属性:构建DOM树的过程和js文件的加载异步(并行)进行,但是js文件执行需要在DOM树构建完成之后scr...转载 2018-08-16 14:47:12 · 292 阅读 · 0 评论 -
Dom学习指南
W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:整个文档是一个文档节点 每个 HTML 元素是元素节点HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点HTML DOM 将 HTML 文档视作树结构。...转载 2018-08-16 15:25:36 · 249 阅读 · 0 评论 -
attribute和property的区别
一:Attribute和Property的区别1.含义区别首先在定义上更准确的来说,Attribute和Property分别为特性和属性,作为区别。 其次,这样理解下来,我们知道Attribute就是DOM节点自带属性,例如我们在HTML中常用的id,class,src,title,alt等。而Property则是这个DOM元素作为对象,其附加的属性或者内容,例如childNodes,...转载 2018-08-22 16:23:45 · 3383 阅读 · 0 评论 -
css3动画,transition和animation的区别,及实现旋转图片(transform: rotate)
1transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and transition-delay。注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。 &lt;style&gt; div{...转载 2018-08-26 21:56:45 · 1381 阅读 · 0 评论 -
padding ,margin百分比赋值时(无论竖,横)都是相对于容器宽度的
你未必知道的CSS小知识:元素竖向的百分比设定是相对于容器的宽度,而不是高度!这是一个很让人困惑的CSS特征,我之前也谈到过它。我们大家都知道,当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bottom等,当按百分比设定它们时,依据的也是父容器的宽度,...转载 2018-08-22 20:56:11 · 1616 阅读 · 0 评论 -
Emmet插件常用
可安装 Emmet插件 Emmet(前身是Zen Coding),它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。新建一个HTML文档,输入“!”或“html:5”,然后按Tab键: 即可生成基本html5结构基本语法: 1、生成后代元素:> 大于号表示后面...转载 2018-08-27 10:32:25 · 719 阅读 · 1 评论 -
css:我有5种方法让你消失
css隐藏元素的方法1、利用opacity透明度来隐藏,opacity设置为0,它只是一种视觉隐藏,元素本身依旧占用它的位置并对网页的布局起到作用,它也同样影响用户交互。在读屏软件中会被识别。2、visibility:规定元素 是否可见,一般设置为hidden,它可以很好的隐藏,不会影响用户的交互,在读屏软件中不会被识别。(visibility可能的值) 属性 意义...转载 2018-08-20 10:45:28 · 2100 阅读 · 0 评论 -
CSS:盒子模型和box-sizing属性-前端不看后悔系列
盒子模型(分2个而已嘛):IE盒子模型和W3C盒子模型 相关box-sizing的属性。 box-sizing: border-box; width = content+padding+border (横向相关) box-sizing: content-box; width = content (横向相关) 这两个模型的唯一区别是计算width和height时,IE盒子模型包含...原创 2018-08-17 17:53:44 · 3898 阅读 · 0 评论 -
CSS水平垂直居中常见方法总结
1、元素水平居中当然最好使的是:margin: 0 auto;居中不好使的原因: 1、元素没有设置宽度,没有宽度怎么居中嘛! 2、设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区别以及如何将行内元素转换为块元素请看我的另一篇文章! 示例 1:&lt;div class="box"&gt; &lt;div class="content&quo转载 2018-08-20 11:25:26 · 103 阅读 · 0 评论 -
说说position,display
1、display属性的值与作用常用的值有none、inline、block、inline-blocknone 1)表示该元素不会显示,并且该元素的空间也不存在,可理解为已删除; 2)visibility:hidden只是将元素隐藏,但不会改变页面布局,但也不会触发该元素已经绑定的事件; 3)opacity:0,将元素隐藏,不会改变页面布局,但会触发该元素绑定的事件。in...转载 2018-08-20 11:45:58 · 1634 阅读 · 0 评论 -
理解浮动以及解决浮动带来的问题
要解决浮动带来的各种问题,首先我们得了解浮动的特点和造成的问题,方能对症下药。一、浮动的特点在CSS2.1 规范中,对浮动的解释如下:浮动元素脱离文档流,在当前行的左边或是右边对齐,如果当前行没有足够的空间,它将下移一行,直到有足够的空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。二、浮动造成的问题(1)父元素的高度无法被撑开关于这个一点,就不演示了。(2)浮动元...转载 2018-08-20 14:42:06 · 1945 阅读 · 0 评论 -
CSS引入的方式有哪些? link和@import的区别是?
有 4 种方式可以在 HTML 中引入 CSS。1.内联方式内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。示例:<div style="background: red"></div>这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 拥有相同的样式,你不得不重复地为每个 添加相同的样式,如果想要修改一种...转载 2018-08-20 14:49:56 · 228 阅读 · 0 评论 -
flexbox(弹性盒布局模型)以及适用场景
FLEX布局是什么?2009年,W3C提出了一种新的布局方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。 目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。2.知识剖析一,怎么运用FLEX布局 flex布局非常灵活,任一容器都可以指定为flex布局。块状只需要display属性规定为flex即可。 行内元素也可以指定为flex布局,将d...转载 2018-08-20 15:16:59 · 1990 阅读 · 0 评论 -
block,inline和inline-block的区别
总体概念block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。 大体来说HTML元素各有其自身的布局级别(block元素还是inlin...转载 2018-08-20 15:38:59 · 107 阅读 · 0 评论 -
table布局的作用-out了,还问这种lowB问题
table的主要作用:用于布局(过时)用于显示批量的数据早期的使用table来布局网页,但是table有一个缺点,就是加载页面的时候,需要全部的数据都请求到,才显示页面,否则就是一片的空白。因此现在一般不采用table来做布局,而是使用div+css进行布局。table的结构:<table> <caption></caption> ...转载 2018-08-20 17:04:26 · 208 阅读 · 0 评论 -
响应式布局
//共同的css样式&lt;link rel="stylesheet" href="./css/common.css" /&gt;//指大于500px宽度时调用desktop.css样式&lt;link media="(min-width:500px)" rel="stylesheet" href=&qu原创 2018-08-28 07:25:23 · 93 阅读 · 0 评论 -
(实用)移动端背景图,铺满页面
小小的问题,往往使我们最容易疏忽的.give-book {background: url("…/images/bg-book.png");background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed;}background-attachment 属性设置背景图像是否固定或者随着...转载 2019-07-19 11:07:22 · 967 阅读 · 0 评论