css - 随笔分类 - 清姿

移动端使用rem适配及相关问题

摘要：移动端适配方案，说多也很多。可以使用百分比布局，但百分比与em都是基于父元素进行计算的，在实际应用中不是很方便。使用rem不仅可以设置字体大小，块大小也可以设置。而且可以良好的适配各种终端，所以这方案很受欢迎。 rem定义及浏览器支持情况 rem（font size of the root elem 阅读全文

posted @ 2016-06-21 18:58 清姿阅读(18239) 评论(0) 推荐(0) 编辑

再谈vertical-align与line-height

摘要：每次遇到多个inline-block元素排列的怪异垂直位置的问题的时候都可以通过经验，设置vertical-align来解决，没深入研究过，现在需要分析总结下这个问题。问题引出有小鲜肉新做了个页面，其中一段代码是这样: 他很困惑，为什么两个inline-block的水平位置是这样。 1.首先要剔阅读全文

posted @ 2016-06-20 20:08 清姿阅读(278) 评论(0) 推荐(0) 编辑

Retina屏实现1px边框

摘要：问题描述通常我们实现边框的方法都是设置1px的边框，但是在retina屏上因为设备像素比的不同，边框在移动设备上的表现也不相同，例如在devicePixelRatio = 2的retina屏下会显示成2px。这对于拥有像素眼的设计同事来说是无法忍受的，他们会一眼看出这边框粗了很多(真可怕，不过经历阅读全文

posted @ 2016-05-17 14:25 清姿阅读(520) 评论(0) 推荐(0) 编辑

移动端网页fixed布局问题解决方案

摘要：问题说明移动端web的footer常常设计为fixed布局，但是在页面键盘被拉起时fixed的布局会出现问题，自己试了下，在较低版本ios和部分安卓机上会有此问题。具体问题看图示：样式：蓝色的footer是fixed定位，没有唤起软键盘的时候一切正常。唤起软键盘，在低版本ios里面就变成：（阅读全文

posted @ 2016-04-13 14:37 清姿阅读(9138) 评论(1) 推荐(0) 编辑

transition实现自定义tips淡入淡出效果

摘要：transition实现动画的时候，只能实现指定属性的渐变，元素显隐要通过opacity来实现：做了一个小的demo:transition-demo?Some information for help transition-property是用来指定当元素其中一个属性改变时执行transitio... 阅读全文

posted @ 2015-05-15 15:37 清姿阅读(2152) 评论(0) 推荐(0) 编辑

移动端页面布局相关问题

摘要：做了一组移动端的页面，在布局时遇到了一些问题，总结下以避免再次掉坑。遇到的问题： 1.图片及带背景图片的块宽高等比缩放布局 2.margin,padding百分比布局图片及带有背景图片的块的图片宽高等比缩放纯图片可以使用img标签，将其宽度设置成百分比，高度会自动按比例缩放。控制起来很方便。 ... 阅读全文

posted @ 2015-05-11 20:43 清姿阅读(1695) 评论(3) 推荐(1) 编辑

line-height的小技巧

摘要：CSS中的line-height属性控制着文字的行间距离。通常被设置为一个无单位的值（例如：line-height:1.4）,与文字尺寸是成比例的。它是排版中的一个重要的属性。太低了文字会挤在一起，太高了文字会分开很远。是不可读的。这篇文章会集中讨论一些技巧。如果你知道（或者可以算出）line-... 阅读全文

posted @ 2015-02-12 20:11 清姿阅读(1094) 评论(0) 推荐(0) 编辑

CSS3之动画相关

摘要：CSS3动画相关的属性：transform,transition,animation.变形Transform语法：transform: rotate | scale | skew | translate |matrix;rotate:旋转，通过指定一个角度对原元素进行2D旋转，正值表示顺时针旋转，负... 阅读全文

posted @ 2015-01-04 20:14 清姿阅读(301) 评论(0) 推荐(0) 编辑

CSS3之阴影

摘要：CSS3中新增属性-阴影，可以做出很多漂亮的效果。文字阴影text-shadowtext-shadow属性值的顺序：text-shadow: h-shadow v-shadow blur color;参数分别表示水平阴影位置，垂直阴影位置，模糊半径，阴影颜色。一个栗子： CSS3阴影 ... 阅读全文

posted @ 2014-12-30 20:11 清姿阅读(1488) 评论(2) 推荐(0) 编辑

CSS3之选择器

摘要：总结了下CSS3新增的一些选择器。CSS3的选择器有基本选择器、属性选择器、伪类选择器几类。CSS3选择器选择器举例例子描述element1~element2p~a选择前面有元素的每个元素。[attrtube^=value]a[src^="http"]选择其 src 属性值以 "https"... 阅读全文

posted @ 2014-12-29 19:28 清姿阅读(273) 评论(0) 推荐(0) 编辑

CSS长度单位

摘要：罗列了CSS中常用的长度单位及比较单位含义em相对于父元素的字体大小ex相对于小写字母"x"的高度rem相对于根元素字体大小px相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸ininch, 表英寸cmcentimeter, 表厘米mmmillimeter, 表毫米pt1/72英寸pc12... 阅读全文

posted @ 2014-12-25 19:54 清姿阅读(979) 评论(0) 推荐(0) 编辑

iphone分辨率

摘要：设备屏幕尺寸分辨率(pt)Reader分辨率(px)渲染后PPIiPhone 3GS3.5吋320x480@1x320x480163iPhone 4/4s3.5吋320x480@2x640x960330iPhone 5/5s/5c4.0吋320x568@2x640x1136326iPhone 64.... 阅读全文

posted @ 2014-12-24 19:19 清姿阅读(157) 评论(0) 推荐(0) 编辑

CSS用border绘制三角形

摘要：使用border绘制三角形的思路，就是border尺寸设置一个较大的值，元素自身的宽高设置为0，全部由边线占据，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。一个栗子：效果：如果设置了块的宽高，还是会呈现边线的效果，每个边线将会是一个等腰梯形，类似于相框：效果：利... 阅读全文

posted @ 2014-12-20 16:33 清姿阅读(494) 评论(0) 推荐(0) 编辑

下雪了-js下雪效果

摘要：Jingle Bells,Jingle Bells,圣诞来临，做了一个下雪的小程序玩。有大雪花和小雪花。效果图：转眼又是年末了，又要跨年了。希望新的一年所有愿望可以实现，加油。阅读全文

posted @ 2014-12-18 20:10 清姿阅读(400) 评论(0) 推荐(0) 编辑

LESS笔记

摘要：使用LESS可以简化CSS的书写。 LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。一个简单的例子：@color: #4D926F; ... 阅读全文

posted @ 2014-12-17 21:17 清姿阅读(295) 评论(1) 推荐(0) 编辑

CSS常用布局整理（二）

摘要：1-2-1单列变宽布局side列定宽300px，content列变宽，尺寸是100%-300px。核心的问题就是浮动列的宽度应该等于“100% - 300px”，而CSS显然不支持这种带有减法运算的宽度表达方法。但是通过margin可以变通的实现这个宽度。实现的原理为，在content外面再套一个d... 阅读全文

posted @ 2014-12-13 16:06 清姿阅读(850) 评论(0) 推荐(0) 编辑

CSS垂直水平居中方法整理

摘要：CSS定位中常常用到垂直居中，比如覆盖层上的弹框。兼容性比较好的方法：Hello World!这个方法只适用于已知宽高的块，因为要设置负边距来修正。如果是未知尺寸的块，可以使用以下方法：Hello World!原因是，绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的ma... 阅读全文

posted @ 2014-12-11 22:40 清姿阅读(255) 评论(0) 推荐(0) 编辑

CSS常用布局整理

摘要：固定宽度布局1-2-1布局（浮动）固定宽度-float Page Header Page Content 1 This is content.This is content.This is content.This is content.This is co... 阅读全文

posted @ 2014-12-11 19:29 清姿阅读(239) 评论(0) 推荐(0) 编辑

CSS浮动与绝对定位小记

摘要：浮动 float属性可以设置的值为none,left,right.对于设置了浮动的元素，会向其父元素的左侧或右侧紧靠，默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容来确定。浮动可以让一个元素移到它所在行的某一边，使得其他内容沿着该元素的边缘向下流。浮动的盒子会脱离文档流，形成环绕的效果。... 阅读全文

posted @ 2014-12-09 20:09 清姿阅读(1477) 评论(5) 推荐(1) 编辑

html块级元素&内联元素及其嵌套

摘要：块级元素和内嵌元素的区别：· 块级元素一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的，它包括以下这些标签：div、ul、li、dl、dt、dd、h1~h6、p、address……· 内嵌元素一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等... 阅读全文

posted @ 2012-11-15 19:56 清姿阅读(302) 评论(0) 推荐(0) 编辑

随笔分类 - css