随笔分类 -  DIV+CSS

1 2 下一页
CSS 居中布局
摘要：前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局。 居 中 布 局 水平居中 （1）原理、用法 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 用法：对子框设置display:inline-blo 阅读全文
posted @ 2018-03-23 10:02 墨锦念 阅读(190) 评论(0) 推荐(0)
Css3 选择器
摘要：Css3 选择器 --属性选择器(1) Css3 选择器 –结构性伪类 Css3 选择器 --伪类 阅读全文
posted @ 2016-06-18 16:21 墨锦念 阅读(183) 评论(0) 推荐(0)
行内元素与块级函数的三个区别
摘要：版权声明：本文为博主原创文章，未经博主允许不得转载。 版权声明：本文为博主原创文章，未经博主允许不得转载。 引言 一次偶然的面试遇到的题目，虽然当时知道块级元素和行内元素的区别，但是没有仔细去想。 一、行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 阅读全文
posted @ 2016-04-15 14:41 墨锦念 阅读(717) 评论(0) 推荐(0)
em（倍）与px的区别
摘要：在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少 px。国外人 阅读全文
posted @ 2016-03-18 10:25 墨锦念 阅读(193) 评论(0) 推荐(0)
行文本的溢出显示省略号
摘要：如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;效果如图：但是这个属性只支持... 阅读全文
posted @ 2015-10-28 13:47 墨锦念 阅读(121) 评论(0) 推荐(0)
iOS下移除按钮原生样式
摘要：按钮样式，在 Android 手机浏览器中显示正常，但在 iOS Safari 浏览器中会看到按钮显示为圆角样式，设置 border-radius:0; 也不好使。这是因为iPhone、iPad 设备上的 Safari 解析 input[type=”submit”] 和 input[type=”re... 阅读全文
posted @ 2015-08-26 13:06 墨锦念 阅读(251) 评论(0) 推荐(0)
css文字两端对齐
摘要：css文字两端对齐text-align:Justify(火狐);text-justify:inter-ideograph(IE)text-justify(IE)基本语法text-justify : auto |distribute | distribute-all-lines | distribut... 阅读全文
posted @ 2015-08-17 17:09 墨锦念 阅读(1057) 评论(0) 推荐(0)
CSS 技术关键字
摘要：CSS 技术关键字元素替换元素非替换元素------替换元素和非替换元素的分类是CSS范畴内的，其它的分类都不属于CSS定义的替换元素和非替换元素的定义是出于“我要不要管你内容区域的样式”考量的。行内元素块元素行内块元素 --- 行内元素、块元素、嵌套规则属于HTML里面定义里的语义范畴。具体而言... 阅读全文
posted @ 2015-08-12 11:21 墨锦念 阅读(200) 评论(0) 推荐(0)
< meta > 元素 概要
摘要：元素概要标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School必要属性属性值描述contentsome text定义与http-equiv或name属性相关的元... 阅读全文
posted @ 2015-08-09 15:08 墨锦念 阅读(160) 评论(0) 推荐(0)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
摘要：转载的，这个基本知识http://www.cnblogs.com/yoosou/archive/2012/07/27/2612443.htmlx-ua-compatible 用来指定IE浏览器解析编译页面的modelx-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除... 阅读全文
posted @ 2015-08-06 10:18 墨锦念 阅读(820) 评论(0) 推荐(0)
Less函数说明
摘要：索引escape(@string); // 通过 URL-encoding 编码字符串e(@string); // 对字符串转义%(@string, values...); // 格式化字符串unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位color(@st... 阅读全文
posted @ 2015-07-31 14:48 墨锦念 阅读(420) 评论(0) 推荐(0)
less入门
摘要：、前言 说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT） 众多CSS预处理器中Less... 阅读全文
posted @ 2015-07-28 14:01 墨锦念 阅读(354) 评论(0) 推荐(0)
sass、less和stylus的安装使用和入门实践
摘要：sass、less和stylus的安装使用和入门实践文章目录一、什么是CSS预处器二、Sass、LESS和Stylus背景介绍三、Sass、LESS和Stylus的安装四、Sass、LESS和Stylus转译成CSS五、Sass、LESS和Stylus的语法六、Sass、LESS和Stylus特性七... 阅读全文
posted @ 2015-07-27 11:41 墨锦念 阅读(354) 评论(0) 推荐(0)
编译SASS
摘要：编译SASSsass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。2. 命令行编译;//单文件转换命令sas... 阅读全文
posted @ 2015-07-27 10:49 墨锦念 阅读(467) 评论(0) 推荐(0)
sass和compass安装
摘要：安装Sass和Compasssass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your ... 阅读全文
posted @ 2015-07-27 10:47 墨锦念 阅读(193) 评论(0) 推荐(0)
sass教程
摘要：sass教程1. 使用变量;sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。sass使用$符号来标... 阅读全文
posted @ 2015-07-27 10:47 墨锦念 阅读(376) 评论(0) 推荐(0)
word-wrap: break-word;和word-break: break-all;的区别
摘要：word-wrap是控制换行的。使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。word-break是控制是否断词的。break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。兼容 IE 和 FF 的... 阅读全文
posted @ 2015-07-15 15:42 墨锦念 阅读(405) 评论(0) 推荐(0)
block，inline和inline-block概念和区别
摘要：总体概念block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行... 阅读全文
posted @ 2015-07-15 15:11 墨锦念 阅读(173) 评论(0) 推荐(0)
Microsoft.AlphaImageLoader滤镜讲--透明处理<转>
摘要：Microsoft.AlphaImageLoader是IE滤镜的一种，其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片，但是就IE5-IE6而言还是有一定的意义。语法：filter : progid:DXImageTransform.Microso... 阅读全文
posted @ 2015-07-15 11:33 墨锦念 阅读(238) 评论(0) 推荐(0)
IE6下不能定义1px高度的容器和IE6 双边距
摘要：（1）触发的条件---定义一个div,将容器的高度设置成1px（2） 编码得到的结果---在IE6浏览器中，容器的高度不是1px 而是18px（3）出现问题的原因---是因为IE6浏览器下默认的行高（4）解决的方法---添加属性 line-height:1px overflow:hidden; （可... 阅读全文
posted @ 2015-07-02 21:32 墨锦念 阅读(1725) 评论(0) 推荐(0)

1 2 下一页