随笔分类 - CSS
摘要：今天看到一篇不错文章，在原来CSS3图形创建基础上扩展了很多。 这里记录总结下 心形 原理：利用 圆形 和 正方形实现 HTML： CSS： 气泡三角形 原理：利用 border 的 transparent 特性实现 HTML： CSS： 切角 切角 原理：使用线性渐变实现 HTML： <div c
阅读全文
摘要：Sublime Text、webstorm等编译器，如果你从事Web前端开发的话，对这几款软件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示： 一、快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签，比如<html>、
阅读全文
摘要：对于flex盒模型的设计期望 flex盒模型是被期望设计成 1：在任何流动的方向上(包括上下左右)都能进行良好的布局 2：可以以逆序 或者 以任意顺序排列布局 3：可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列 4：可以弹性的在任意的容器中伸缩大小 5：可以使子元素们在容器主轴方向上 或者 在容
阅读全文
摘要：半透明边框 背景知识： background-clip 多重边框 box-shadow相信很多人都已经用透了，可用来给元素添加各种阴影效果，反过来，也只有我们需要实现阴影时才会想起它，其实，box-shadow还接受第四个参数作为阴影扩张半径，当我们只设置扩张半径时，零偏移，零模糊，产生的效果其实相
阅读全文
摘要：html,body{height:100%} 今天看到一个CSS样式：html,body{height:100%}，第一次看到，感觉挺奇怪，为什么html还需要设置height:100%呢，html不就是整个窗口吗？我是这样认为的。然后就把html去掉只剩下body的height:100%，麻烦了，
阅读全文
摘要：先来看两个overflow:hidden的使用例子 1、嵌套布局内部块元素设置float:left时，导致外部元素塌方，高度为0的问题。 通过去掉wrap CSS中的overflow: hidden;的注释，显示效果如下： 2、左右布局DIV，左侧DIV设置为float: left， 当右侧DIV高
阅读全文
摘要：1. 文件名规范 文件名建议用小写字母加中横线的方式。为什么呢？因为这样可读性比较强，看起来比较清爽 那为什么变量名不用小写字母加小划线的方式 因为下划线比较难敲(shift + -)，所以一般用驼峰式命名变量的居多。 引入CSS文件的link可以不用带type="text/css" 因为link里
阅读全文
摘要：居中布局 水平居中 1）使用inline-block+text-align 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 用法：对子框设置display:inline-block，对父框设置text-align:center。 缺点:child里的文字也会水平居
阅读全文
摘要：PX: PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web
阅读全文
摘要：跨浏览器的CSS3动画库，使用方便 animate.css 是一个集合酷的，有趣的和跨浏览器的动画。 基本用法 在页面的 <head>中引入样式文件： 给你想要添加动画效果的元素加上 animated 样式，如果想要动画循环执行的话，你需要加上 infinite 样式。 最后，你需要加上下面中的一个
阅读全文
摘要：盒模型分为IE盒模型和W3C标准盒模型。 IE盒模型和W3C标准盒模型的区别是什么？ 1. W3C 标准盒模型： 属性width,height只包含内容content，不包含border和padding。 2. IE 盒模型： 属性width,height包含border和padding，指的是co
阅读全文
摘要：1. 页面顶部阴影 2. 给 body 添加行高 你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可： line-height:1; 的意思是 根据该元素本身的字体大小 设置行高 比如该元素字体是15px line-height:1; 的行高就是15px; 3.
阅读全文
摘要：flex 基本概念 使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。 CSS： 是的，flex 的确没有那么简单，这就要从两个基本概念说起了。
阅读全文
摘要：border属性是在实际的应用中使用频率比较高的一个属性，除了作为边框使用，利用border属性的一些特征以及表现方式，可以在实现一些比较常见的效果（如等高布局，上下固定内容滚动布局和绘制CSS图标等），利用css3新增的属性值（如使用图片填充边框）可以实现一些更复杂的效果。 本文不介绍border
阅读全文
摘要：display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。 display:inli
阅读全文
摘要：css选择符分类 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如：body,div,p,ul,li) 2.类选择器(如：class="head",class="head_logo") 3.ID选择器(如：id="name",id="name_txt") 4.全局选择器(如：*号
阅读全文
摘要：炫酷时钟 Js 炫酷时钟 ： ： ： ：
阅读全文
摘要：基本样式 一：基本灰色 2：优雅的Aero样式 3：简单绿色
阅读全文
浙公网安备 33010602011771号