前面几遍中我们分别说到了id选择器和class选择器，以及它们的区别和联系，下面大家一起来探究一下神奇的为类和伪元素吧。其实以前我对伪类和伪元素也是搞得稀里糊涂的，现在决定剥开它神秘的外衣，首先，究竟什么是伪类？什么是伪元素？伪类和伪元素的理解：官方解释：伪类一开始只是用来表示一些元素的动态状态，典型的就是大家常用的链接的各个状态（link、active、hover、visited），随后css2标准扩展了其概念范围，使其成为了所...
今日这篇是整合前面的css补充知识的。我觉得前面的关于css的知识补充进去有点乱，今日整理整理一下。层叠样式表层叠是什么意思？为什么这个词如此重要，以至于要出现在它的名称里。层叠可以简单地理解为冲突的解决方案。什么是冲突？就是同个元素在使用不同的选择器选择中后添加相同的样式。优先级规则可以表述为行内样式>ID样式>类别样式>标记样式在复杂的页面中，某一个元素有可能会从很多地方获取样式，例如一个网站的某一级标题...
前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！垂直居中用到的地方有很多，解决的方法也有很多。已知元素宽度 可以用position定位 + margin负值的方法绝对定位 + 4个方向全部0px + margin：auto 可以做到基于父容器水平垂居中；如果只需要垂直居中，那可以把left和right删掉，并且水平居中的方法也很多绝对定位 + 左50% + margin左：宽度一半的负值 可以做到水平居中 右也可以绝...
居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1. 把margin设为auto具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对...
本章内容：知识点一：盒子模型：Box Model，由有内容（element content）、填充（padding）、边框（border）、边界（margin）这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。从w3school上下载的图片，以图来看看盒子模型的四个组成部分说明：图中元素框的最内部分是实际的内容（element）；直接包围内容的是内边距（padding），内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框...
在项目中经常会遇到设置元素水平垂直居中的需求。而且具体的场景也不同，所以将个人总结的方法做个汇总，希望对浏览者有用。以下所举的例子都以一个html为准，这里规定好一些公用样式。body {background-color: #efefef; } main {background-color: #fff;padding: 10px;margin:10px 0px; } main p {background-color: #aaf; }水平居中1 相对块级父元素，可将子级设置成行内或者行内块元素，父元素设置text－align属性举例如下：.p...
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}box-shadow属性的参数设置取值：阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影...
这是《前端总结·基础篇·CSS》系列的第一篇，主要总结一下布局的基础知识。一、显示（display）1.1 盒模型（box-model）1.2 行内元素（inline） & 块元素（block）1.3 行内块元素（inline-block IE8+ IE6-7/tools）1.4 flex（IE11+ IE10/-ms-）1.5 none 二、位置（position） 三、补充3.1 浮动（float）3.2 层叠（z-index）3.3 溢出（overflow）3.4 resize（notIE）（CSS3）3.5 分栏（column）（IE10+ notOperaMini）（CSS3）一、显...
说到选择器大家都不陌生，估计用的最多的还是id选择器和类选择器，至于其他的选择器，今天在这里我避而不谈。类选择器：将html元素取一个响亮的名字，用class来标记，就可以使用类选择器了，如<p class="p1">这是段落1</p>,这里我将p元素class设置为"p1",然后再写css样式就可以直接使用了，举个栗子：<style type="text/css">p.p1{color:red;}</style></head><body><p class="p1">This paragraph will also be center-aligned.</p>...
相关知识点布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法......题目&答案如何理解CSS的盒子模型？每个HTML元素都是长方形盒子。 （1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。 （2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。link和@import的区别？（1）link属于XHTML标签，而@import是CSS提供的。 （2）...
- 仅作用于块级元素的属性width，height（这俩可用于替换元素）text—align， text—indent， vertical—align（也可用于表单元格和替换元素如input/img）background-position(注意百分数和绝对值的区别，同时这个属性会影响平铺效果)［基本视觉格式化］1. 框模型： － background包括内容框、内边距和边框，外边距通常是透明的，显示父元素的背景；2. 水平属性：－子元素的左（右）margin，左（右）padding，左（右）border和内...
我们都知道，要做WD（web designer）,首先得伺侯好几个浏览器:IE6,IE7,Firefox.一般的页面，都只要求在IE6,IE7,Firefox下正常工作就行了。但是实际上，浏览器远远不止这几个,Firefox分为Firefox 1.5,Firefox 2,Firefox 3几个主要版本，IE7,IE6中也各有好几个系列,另外除开这两个主流厂商的产品之外，还有Opera,Konqueror,Netscape,chrome等一系列。 这些浏览器，各有各的一套，往往在这里运行正常，在那里运行就不正常了。于是...
今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前，渐变效果和阴影、圆角效果一样都是做成图片，直接编写 CSS 代码就可以实现。《CSS3 经典教程系列》的前一篇文章向大家详细介绍了 text-shadow 文本阴影特性的用法，今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前，渐变效果和阴影、圆角效果一样都是做成图片，直接编写 CSS 代码就可以实现。CSS3 G...
******* CSS 常用属性 *********【font】 font 设置或检索对象中的文本特性。该属性是复合属性。 使用第一种声明方式参数必须按照如上的排列顺序，且font-size和font-family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。 ： 指定文本字体样式 ： 指定文本是否为小型的大写字母 ： 指定文本字体的粗细 ： 指定文本字体尺寸 ： 指定文本字体的行高 ： 指定文本使用某个字体或字体序列 capt...
******* CSS 常用属性 ********* z-index: auto (默认值) 检索或设置对象的层叠顺序。 并级的对象，此属性参数值越大，则被层叠在最上面。 如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。 必须定义position属性值为 relative | absolute | fixed | center | page，此取值方可生效。 对应的脚本特性为zIndex。 ------------------------------------------------------...