CSS - 随笔分类 - douglasvegas

移动端边框1px问题

摘要：边框变粗的原因 css中的1px并不等于移动设备的1px，不同手机有不同的像素密度。window对象中有一个devicePixelRatio属性，即css中的像素 / 设备的像素比之前的解决方案 1. 0.5px 通过javascript检测浏览器能否处理0.5px的边框，如果可以则给html元素阅读全文

posted @ 2017-08-15 15:00 douglasvegas 阅读(178) 评论(0) 推荐(0)

BFC

摘要：在解释BFC之前，先说一下文档流。常说的文档流分为定位流、浮动流和普通流三种。而普通流其实就是BFC中的FC （formatting context）直译过来就是格式化上下文。它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC和I 阅读全文

posted @ 2017-08-07 15:42 douglasvegas 阅读(113) 评论(0) 推荐(0)

transition(动画属性)

摘要：CSS过渡（transition）是通过定义元素从起点的状态到终点的状态，在一定的时间区间内实现元素平滑过渡或变化的一种补间动画机制。 transition的四个子属性： transition property transition duration transition timing functi 阅读全文

posted @ 2017-08-07 15:32 douglasvegas 阅读(347) 评论(0) 推荐(0)

css之word-wrap和word-break属性

摘要：word wrap 属性允许长单词或 URL 地址换行到下一行。属性： normal 只在允许的断字点换行（浏览器保持默认处理） break word 在长单词或 URL 地址内部进行换行 word break 属性规定自动换行的处理方法。属性： normal 默认处理 break all 允许阅读全文

posted @ 2017-06-22 19:15 douglasvegas 阅读(158) 评论(0) 推荐(0)

css中的字体

摘要：.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 说明：加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体，STHeiti为华文阅读全文

posted @ 2017-06-16 15:19 douglasvegas 阅读(188) 评论(0) 推荐(0)

为什么overflow:hidden;属性可以清除浮动

摘要：overflow:hidden;顾名思义，溢出容器部分隐藏。为什么它可以起到清除浮动的作用呢？我们来制造一个父容器不定高，子容器进行浮动的界面。我们会发现这个不定高的父DIV有了高度，高度为子容器中最高的那个。如果去掉overflow:hidden，则父容器"消失"（因为没有高度了）。原因为何？阅读全文

posted @ 2017-06-09 18:11 douglasvegas 阅读(367) 评论(0) 推荐(0)

一些容易忽略的CSS3属性

摘要：1.-webkit-tap-highlight-color //这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何阅读全文

posted @ 2017-06-07 14:18 douglasvegas 阅读(163) 评论(0) 推荐(0)

浏览器的两种模式quirks mode 和strict mode

摘要：1、quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持。 2、历史原因:当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mo 阅读全文

posted @ 2016-08-01 12:14 douglasvegas 阅读(595) 评论(0) 推荐(0)

浏览器的标准模式和怪异模式

摘要：要想写出跨浏览器的CSS，必须知道浏览器解析CSS的两种模式：标准模式(strict mode)和怪异模式(quirks mode)。标准模式: 浏览器按W3C标准解析执行代码；怪异模式: 使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时阅读全文

posted @ 2016-07-31 10:34 douglasvegas 阅读(621) 评论(0) 推荐(0)

条件注释判断浏览器版本<!--[if lt IE 9]>

摘要： 除IE外都可识别 <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![ 阅读全文

posted @ 2016-06-24 17:52 douglasvegas 阅读(298) 评论(0) 推荐(0)

css超出一行添加省略号属性:text-overflow和white-space

摘要：css属性white-space 测试浏览器： IE6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.1180.89 m 1、text-overflow: ellipsis; 这里的重点样式是 text-overflow: ellipsis; 不过话说text- 阅读全文

posted @ 2016-04-22 10:56 douglasvegas 阅读(204) 评论(0) 推荐(0)

CSS样式适配杂记

摘要：1.问：input框的对齐，制作类似百度搜索框的时候，发现IE下前面输入框和后面按钮总是不能对齐。解答：给input框增加vertical-align:bottom;2.问：IE下display:inline-block不起作用。答：display:inline-block后面增加*displa... 阅读全文

posted @ 2015-10-15 17:19 douglasvegas 阅读(167) 评论(0) 推荐(0)

CSS3 icon font完全指南(CSS3 font 会取代icon图标)

摘要：大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，本文将详细讲解这种用法为什么要将icon做成字体？在很多网站项目中，我们常常会用到各种透明小图标，然... 阅读全文

posted @ 2015-08-26 23:51 douglasvegas 阅读(282) 评论(0) 推荐(0)

响应式Web图形篇 —— icon fonts 的探析及应用

摘要：前言像素完美（Pixel Perfection）、分辨率无关（Resolution Independent）和多平台体验一致性是设计师们的追求。可访问性（Accessability）、加载性能和重构灵活性是前端工程师们关心的主题。当下互联网设备「风起云涌」，显示分辨率「层出不穷」，为 Web 创建... 阅读全文

posted @ 2015-08-26 23:45 douglasvegas 阅读(271) 评论(0) 推荐(0)

彻底弄懂css中单位px和em，rem的区别

摘要：PX:PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页... 阅读全文

posted @ 2015-08-26 20:12 douglasvegas 阅读(158) 评论(0) 推荐(0)

douglasvegas

随笔分类 - CSS

公告