css_蓝戒的博客
您当前位置 :
蓝戒的博客 » 所有属于 "css" 分类的文章
Apr 04 2020
CSS命名规范—BEM思想
BEM是什么：
BEM是一种非常有用、功能强大、简单的CSS命名约定，它使您的前端代码更易于阅读和理解，易于使用，易于扩展，更健壮，更容易协作，更容易控制。
团队开发痛点：
在团队开发中，由于缺乏规范，样式管理一直是开发中的痛点，样式污染，难以定制化，依赖性高，各种问题层出不穷。
css的样式应用是全局性的，没有作用域... 阅读全文
作者：cywcd | 分类：
css | 阅读： 3,536 次 |
Feb 20 2017
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。
当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被撑开到网页底部；但如果网页内容不够长，置底的页脚需要保持在浏览器窗口底部。
实现方法
1. 将内容部分的底部外边距设为负数
这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗... 阅读全文
作者：cywcd | 分类：
css | 阅读： 3,956 次 |
Mar 13 2016
概述
首先声明一下CSS三大特性—— 继承、 优先级和层叠。继承即子类元素继承父类的样式；优先级是指不同类别样式的权重比较；层叠是说当数量相同时，通过层叠（后者覆盖前者）的样式。
css选择符分类
首先来看一下css选择符（css选择器）有哪些？
1.标签选择器（如：body,div,p,ul,li）
2.类选择器（如：class="head",class="head_logo"）
3.ID选择器（如：id="name",id="name_txt"）
4.全局... 阅读全文
Jan 09 2016
写在前面
近年前端知识技术更新迭代加速，作为一名前端汪，你是否停留在刀耕火种的时代？让我们带着极客的精神去发现更好的，更优雅的编码之旅吧！兵欲善其事必先利其器，选择一个好的工具，认识它，了解它，用它更好的为我们解决问题。废话不多说，下面我们一起进入css的新世界PostCSS。
一. PostCSS是什么？
1. 初识PostCSS
PostCSS在以惊人的速度发展，而且越来越受人欢迎。越来越多的... 阅读全文
Dec 28 2015
网页顶部加载进度条仿智能手机上浏览网页一样，手机上的浏览器进度条一般都在屏幕顶部，一条极细的小线条，当页面加载的时候，它就不断的加载显示进度。这样做的目的与页面中加载提示及软件应用中的进度提示的目的都是一致的为了优化用户体验。
首先介绍一下css3的实现方法：
<style type="text/css">
body{ margin:0; padding:0;}
@-moz-keyframes progressing {
0% {width:0px;}
10... 阅读全文
Aug 26 2015
单行文本溢出的解决方法我们知道通常是使用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性，保险起见凡是要溢出的显示省略号的我们都要设置好宽，高。
单行文本溢出省略号css代码方案如下：
width:500px;
height:40px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
由于是做移动端页面遇到的多行文本溢出显示省略号... 阅读全文
Aug 10 2015
导语：
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了众多主流浏览器的支持，这意味着，flex有了更多的用武之地。
Flex布局是什么？
Flex是Flexible Box的缩写，意为"弹性布局"... 阅读全文
Jul 29 2015
nec更好的css解决方案之自适应布局
两列右侧自适应布局 [ 兼容 ]:
两列左侧自适应布局 [ 兼容 ]:
See the Pen VLVMow by cywcd (@webzsky) on CodePen.
三列中间自适应布局 [ 兼容 ]:
See the Pen mJQqbP by cywcd (@webzsky) on CodePen.
三列左侧自适应布局 [ 兼容 ]:
See the Pen zGMPOy by cywcd (@webzsky) on CodePen.
三列右侧自适应布局 [ 兼容 ]:
See the Pen GJwOjN by cywcd... 阅读全文
Jul 27 2015
Normalize.css 简介
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
官方网站：http://necolas.github.io/normalize.css/
浏览器支持情况：Chrome, Firefox, Opera, Safari 6+, IE 8+
一般前端工程师都会使用 reset.css 去处理不同浏览器的默认样式，这里推荐使用Normalize.css
Normalize.css有哪些优点
1)不像其他CSS resets，normalize.css... 阅读全文
Jul 23 2015
html5+css3钟表指针动画：
See the Pen OVoGpY by cywcd (@webzsky) on CodePen.
html5+css3星轨运转：
See the Pen gpdyoJ by cywcd (@webzsky) on CodePen.
html5+css3+js(canvas)线型心：
See the Pen vOzMaP by cywcd (@webzsky) on CodePen.
html5+css3波纹闪动：
See the Pen YXOMJg by cywcd (@webzsky) on CodePen.
html5+css3白云飘飘：
See the Pen eNLoxe by cywcd (@webzsk... 阅读全文
来自的朋友,欢迎您
点击这里 订阅我的博客 o(∩_∩)o~~~
CSS命名规范—BEM思想 BEM是什么： BEM是一种非常有用、功能强大、简单的CSS命名约定，它使您的前端代码更易于阅读和理解，易于使用，易于扩展，更健壮，更容易协作，更容易控制。 团队开发痛点： 在团队开发中，由于缺乏规范，样式管理一直是开发中的痛点，样式污染，难以定制化，依赖性高，各种问题层出不穷。 css的样式应用是全局性的，没有作用域...阅读全文作者：cywcd | 分类：css | 阅读： 3,536 次 |抢沙发
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被撑开到网页底部；但如果网页内容不够长，置底的页脚需要保持在浏览器窗口底部。 实现方法 1. 将内容部分的底部外边距设为负数 这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗...阅读全文作者：cywcd | 分类：css | 阅读： 3,956 次 |
概述 首先声明一下CSS三大特性—— 继承、 优先级和层叠。继承即子类元素继承父类的样式；优先级是指不同类别样式的权重比较；层叠是说当数量相同时，通过层叠（后者覆盖前者）的样式。 css选择符分类 首先来看一下css选择符（css选择器）有哪些？ 1.标签选择器（如：body,div,p,ul,li） 2.类选择器（如：class="head",class="head_logo"） 3.ID选择器（如：id="name",id="name_txt"） 4.全局...阅读全文
网页顶部加载进度条仿智能手机上浏览网页一样，手机上的浏览器进度条一般都在屏幕顶部，一条极细的小线条，当页面加载的时候，它就不断的加载显示进度。这样做的目的与页面中加载提示及软件应用中的进度提示的目的都是一致的为了优化用户体验。 首先介绍一下css3的实现方法： <style type="text/css"> body{ margin:0; padding:0;} @-moz-keyframes progressing { 0% {width:0px;} 10...阅读全文
单行文本溢出的解决方法我们知道通常是使用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性，保险起见凡是要溢出的显示省略号的我们都要设置好宽，高。 单行文本溢出省略号css代码方案如下： width:500px; height:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 由于是做移动端页面遇到的多行文本溢出显示省略号...阅读全文
导语： 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了众多主流浏览器的支持，这意味着，flex有了更多的用武之地。 Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"...阅读全文
nec更好的css解决方案之自适应布局 两列右侧自适应布局 [ 兼容 ]: 两列左侧自适应布局 [ 兼容 ]: See the Pen VLVMow by cywcd (@webzsky) on CodePen. 三列中间自适应布局 [ 兼容 ]: See the Pen mJQqbP by cywcd (@webzsky) on CodePen. 三列左侧自适应布局 [ 兼容 ]: See the Pen zGMPOy by cywcd (@webzsky) on CodePen. 三列右侧自适应布局 [ 兼容 ]: See the Pen GJwOjN by cywcd...阅读全文
Normalize.css 简介 Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。 官方网站：http://necolas.github.io/normalize.css/ 浏览器支持情况：Chrome, Firefox, Opera, Safari 6+, IE 8+ 一般前端工程师都会使用 reset.css 去处理不同浏览器的默认样式，这里推荐使用Normalize.css Normalize.css有哪些优点 1)不像其他CSS resets，normalize.css...阅读全文
html5+css3钟表指针动画： See the Pen OVoGpY by cywcd (@webzsky) on CodePen. html5+css3星轨运转： See the Pen gpdyoJ by cywcd (@webzsky) on CodePen. html5+css3+js(canvas)线型心： See the Pen vOzMaP by cywcd (@webzsky) on CodePen. html5+css3波纹闪动： See the Pen YXOMJg by cywcd (@webzsky) on CodePen. html5+css3白云飘飘： See the Pen eNLoxe by cywcd (@webzsk...阅读全文