简述 定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助 position详解 在css中，通过position属性，配合top,right,left,buttom对元素进行定位position属性有：static，relative，absolute，fixed四种，下面分别探讨 默认定位static Document .container { width: 400px; height: 400px; background-color: #DDDDDD; ...
继承（Inheritance）是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用那些值时，用户代理（浏览器）不仅要考虑继承，还要考虑声明的特殊性（specificity），另外需要考虑声明本身的来源。这个过程就称为层叠（cascade）。在此我们将讨论css这三种机制的原理和关联。 一、特殊性 考虑以下2对规则，假设每一对规则都匹配同样的元素： h1 {color: red; }body h1 { color:green;} ...
CSS中的float属性是一个频繁用到的属性，对于初学者来说，如果没有理解好浮动的意义和表现出来的特性，在使用的使用很容易陷入困惑，云里雾里，搞不清楚状态。本文将从最基本的知识开始说起，谈谈关于浮动的应用，出现的问题和解决方案。 基础知识 float，顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，我们称设置了float属性的元素为浮动元素。浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是...
position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性，本文将从最基础的知识讲起，谈谈关于positon属性的一些理论与应用。 基础知识 postion属性我们成为定位，它有4个不同类型的定位，这些类型会影响元素的生成方式，下面我们详细说明position属性。 position四种类型 （1）staticstatic是position属...
注册博客园也有一段时间了，一直都是看其他大牛的博客，感触颇多，都是我要学习和努力的目标，慢慢的心底也萌生了要写博客的嫩芽，虽然自己也是步入前端这一行业不久的工作者,希望各位大前端行业的前辈多多指教啦！ 我写博客的目的呢就是，一呢，总结自己学过和运用的的技术和知识，系统的梳理知识点和原理，加深印象；二呢，报着学习交流的态度，希望大家多多督促，有什么讲的不对的地方欢迎指出啦！当前是为了一份更好的更适合...
background复合属性是个很复杂的属性，花样非常多，比较神奇的是css3 中支持多图片背景了，这篇文章先讲讲background-image属性，其他背景属性会在后续的文章综合总结。 一、最基本的情况是指定一张图片的url作为背景： .parent{ height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(halfRombes.png); } 效果如下（浏览器默认背景...
----------------------------------------css 选择器---------------------------------------- 1,组合选择器： 1）e>f ：直接后代选择器。 2) e+f : 兄弟元素选择器，匹配紧随e元素之后的同级元素f。 3) e~f ：匹配任何在e元素之后的同级f元素。 4) e f : 后代选择器。 5) e,f : 群组选择器。 cation：+ 和 ~ 区别,+只能匹配一个紧随其后的同级元素；~匹配所有紧随其后的同级元素 2，属性选择器： 1) e[att] 匹配所有具有a...
CSS的margin用法详解:建议:尽可能的手写代码，可以有效的提高学习效率和深度。margin属性在网页中使用非常的频繁，所以这里详细介绍一下此属性的用法。此属性用来定义对象的外边距的，也称之为外补白，所谓的外边距就是围绕边框外侧的空白区域。可以单独定义上下左右某一方位的外边距。代码实例如下:实例一:子div没有外边距的情况： 蚂蚁部落.parent{ width:400px; height:400px; border:1px solid red;}.children...
今天在微博上看到@过气网红一丝 的一篇微博，codepen上贴出了twitter点赞那个动画效果的源码，地址 http://codepen.io/yisi/pen/LpXVJb 。我看了下效果很好看，源码也很简单，涉及到css3一些简单的动画，现在来介绍一下这个动画所用到的一些技术。 先上效果图，为了能看得清楚我把动画时间间隔设置的大了一些。 把源码贴出来：没用到js，只用到了html以及css。 html代码如下 Twitter heart button anima...
序言 长度单位可以总体的分为绝对长度单位和相对长度单位。CSS中最为大家熟知的无疑是px和em，但与此同时还存在pt, rem, vw, vh等其他计量单位，使用好它们可以大大增长我们的开发效率。本篇文章试图整理在前端开发中用到的CSS单位和其应用场景。 px——像素 px是pixel缩写，是基于像素的单位。在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800600分辨率下，要占屏幕宽度...
CSS的padding用法详解:建议:尽可能的手写代码，可以有效的提高学习效率和深度。padding属性在网页中使用非常的频繁，所以这里详细介绍一下此属性的用法。此属性用来定义元素的内边距或者内补白，所谓的内边距就是元素中的内容与元素内侧之间的空白区域。可以单独定义上下左右某一方位的内边距。代码实例:实例一:没有设置父div的内边距的时候： 蚂蚁部落.parent{ width:400px; height:400px; border:1px solid red;...
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。 语法规则 首先我们一起来看看@font-face的语法规则： @font-face { font-family: ; src: [][, []]*; [font-weight: ]; [font-style: ]; } font-family: ：自定义字库名称（一般设置为所引入的字库名），后续样式规则中则通过该名称来引用该字库。src ：设置字体的加载路径和格式，通过逗号分隔多...
一、概述 A、http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 B、Cache-control用于控制HTTP缓存（在HTTP/1.0中可能部分没实现，仅仅实现了Pragma: no-cache） 二、基本内容 meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞ ；其中...
在介绍了包含块之后，CSS2.1标准中介绍了width属性和height属性，这两个属性在我们的页面布局中也发挥着重要的作用。在盒模型中，width和height包围了一个框的内容区域(content area)， 是否拥有显式的定义、框的类型、框的布局方式、框与其他框之间的关系以及其他的额外信息 都会影响一个框的最终的width和height值，本文首先介绍width属性以及视觉格式化模型中如何决定width值的相关算法。 ...
本文承接CSS2.1SPEC： 视觉格式化模型之width属性详解(上)，继续分析CSS视觉格式化模型中width以及相关值的计算问题： 注：与上节不同，本节的demo中由于出现了float,absolute等定位方式，因此为了便于效果显示，所有的demo都把body的margin属性设为10px，并且增加了一个class为container的div元素，它具有10px的padding，3px的border，500px的width，并通过设置float:left，_zoom:1来形成一个BF...