css随笔
关注
分享
扫一扫
文章平均质量分 70
zerlinda_c
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css3 background-size属性--ie兼容
background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :原创 2015-11-24 18:10:26 · 5779 阅读 · 0 评论 -
当表单自动填充_去除chrome浏览器自动添加的默认样式
事实是，并不能一劳永逸去除谷歌在自动填充表单时的默认样式。对于浏览器工具自动添加的样式，这里采取算是一种比较怪异的方法。除非你关闭它的表单自动填充功能，那姑且这篇文章可以不看了。 今天在写账号登录页面时，给input表单添加了背景图片和图标，看起来小清新了不少。可是当用chrome登录自动填充，淡黄色输入框代替了背景样式，看起来有些怪异。在自动填充之后，chrome自动填充的样式如下图原创 2015-12-10 17:04:20 · 5729 阅读 · 0 评论 -
CSS定位机制：position
CSS的定位机制分为三种，分别是文档流，浮动和定位。 其中文档流的意义就 是按照html里面的写法从上到下从左到右的布局。 浮动包括两种，左浮动和右浮动，直到它的外边框边缘碰到包含框或另一个浮动框的边缘。任意的浮动使元素脱离了文档的普通流，就像在文档中不占据空间。但如果包含块太窄，无法容纳水平排列的浮动元素，那么其他浮动块会向下移动，直到有足够多的空间。 position原创 2015-12-14 19:48:51 · 848 阅读 · 0 评论 -
移动web开发响应式布局总结
首先来理解三个概念。一、viewport深入理解 我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 该meta标签的作用是让当前viewport的原创 2015-12-17 19:02:28 · 5981 阅读 · 0 评论 -
web开发弹性盒模型flexbox新旧比较
一、flexbox弹性盒子布局兼容性：iOS可以使用最新的flex布局Android4.4以下，只能兼容旧版的flexbox布局Android4.4及以上，可以使用最新的flex布局注：CSS的columns在伸缩容器上没有效果。float、clear和vertical-align在伸缩项目上没有效果。首先还是从两个版本的语法开始讲吧。<div class = "box"> <原创 2015-12-17 19:28:06 · 1500 阅读 · 0 评论 -
float闭合问题
首先,必须知道两件事: 1. 浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的. 2. HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是占据整行; in-line对象则相反,允许其他对象与它在一行中显示. 现在来看float属性, 它的作用就是改变block对象的默认显原创 2015-11-26 23:03:19 · 591 阅读 · 0 评论 -
css盒模型margin折叠问题解决方案总结
<div id = "header"> <div class = "header_cap"><h1>test</h1></div> </div>#header { width: 100%; height: 6rem; text-align: center; background-color: #CCC; overflow: hidden;}原创 2015-11-26 13:12:50 · 2115 阅读 · 0 评论 -
placeholder兼容写法
placeholder作为html5表单新特性，提供了很多便利，它能够在表单域提示用户输入的内容，而在用户输入内容后自行消失。ie对其兼容性并不是很好，ie9以下不能兼容html5，所以对placeholder这个属性也是不支持的。实际开发过程中的页面要做到能够兼容各个浏览器尤其是ie，就要额外多写很多代码了。单单如果是文本输入框来说，placeholder很容易实现，但如果是密码框，考虑的因素就很原创 2016-01-21 18:28:37 · 1375 阅读 · 0 评论 -
CSS优先级机制
样式的优先级多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。示例如下：<head转载 2015-12-15 18:39:59 · 426 阅读 · 0 评论 -
如何更改html文档中的element.css样式
用css控制网页元素的样式的时候，按f12打开审查元素，可能会碰到这种情况element.style { height: 50px;} 尽管你更改了css文件中元素的高度，它的高度依旧是50px。然后查看css文件，element.css属性在css文件中查阅不到，这一般就是由js文件动态添加的了，这种样式通常由js计算得来，优先级高于style.css。 最近在使用插件的时候遇到原创 2015-12-07 11:52:43 · 1303 阅读 · 0 评论 -
总结CSS3变形transform属性
在网页设计中，css被习惯于理解为擅长表现静态样式，动态的元素必须借助于flash或javascript才可以实现，CSS3将来改变这一思维方式。CSS3除了增加很大革命性的创新功能外，还提供了对动画的支持，可以实现旋转，缩放，移动，倾斜和过渡效果等等，这些功能再一次证明了CSS功能的强大和无限潜能。 CSS3实现元素变形的基础。来源于新增的transform属性，该元素可用于实现元素的旋转，缩放原创 2015-12-08 19:27:04 · 965 阅读 · 0 评论 -
css3属性集合
一、边框属性： 1、border-radius 2、box-shadow 3、border-image 二、颜色属性： 1、RGBA（R,G,B,A（透明度）） 2、渐变linear-gradient 三、文字与字体 1、text-overflow 2、word-wrap 3、嵌入字体@font-face 4、文本阴影text-shadow 四、背景样式 1、backgro转载 2015-12-16 10:08:20 · 502 阅读 · 0 评论 -
CSS伪元素选择器:before与:after
在css标签中有这样子的标签div:before、div:after，对于before、after来说有部分人是相当陌生的，那么这两个标签是什么呢？有什么用处？ :befor、:after是CSS的伪元素，用CSS手册可以查询到其基本的用法： E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 E::after 设置在对象后（依据对象原创 2015-12-07 16:54:58 · 13890 阅读 · 0 评论 -
css隐藏/显示文字的方法
最近做了一个demo，写了一个图片轮播，在图片轮播的时候显示对图片的文字解释，要求文字不跟随图片滚动默认显示。花了一点点时间，解决了这个办法，最后总结了一下在html中用css隐藏文字的方法。（1）偏移掉字体的方式 使用text-indent:-9999px; 这种方法有一个局限性只适用于块级元素。 （2）字体为零不显示，能完美“隐藏”掉你background之上的字体，经转载 2015-11-26 12:34:42 · 13398 阅读 · 0 评论 -
CSS标准盒子模型
CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。以FireFox标准盒子模型为例：原创 2015-12-04 18:49:10 · 4409 阅读 · 0 评论