小飞的博客

1.css发展历程层叠样式表 (Cascading Style Sheets)，用来渲染HTML标签的外观样式。• CSS是由万维网联盟（W3C）制定的标准。• CSS的目的是控制网页元素的外观与位置。2.css的引入方式（1）内联式(Inline Style):也叫内嵌式或行内式，在html代码中嵌入css样式，只对当前标签起作用。(不推荐)（2）嵌入式(Embedding):也叫内页样式,在网页上使用style标签包裹样式代码。(不推荐)type属性可以缺省。声明在head标签内。（

css样式表/层叠样式表（7）元素的隐藏与显示（1）dispaly显示（2）visibility可见性（3）overflow溢出css用户界面样式鼠标样式cursor轮廓线outline防止拖拽文本域resizevertical-align垂直对齐图片、表单和文字对齐去除图片底侧空白缝隙溢出的文字省略号显示white-spacetext-overflow 文字溢出css精灵技术（sprite）滑动门margin负值过渡获得焦点元素元素的隐藏与显示（1）dispaly显示设置或检索对象是否及如何显示d

css样式表/层叠样式表（6）定位定位模式静态定位（static）相对定位（relative）绝对定位（absolute）固定定位（fixed）堆叠顺序（z-index）定位改变display属性定位将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面 )标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）定位 = 定位模式 + 边偏移边偏移属性示例描述toptop: 80px顶端偏

css样式表/层叠样式表（4）css属性书写顺序布局流程chrome调试工具css属性书写顺序布局定位属性display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）自身属性width / height / margin / padding / border / background文本属性color / font / text-decoration / text-align / ver

css样式表/层叠样式表（4）css布局的三种机制浮动浮动（float）的扩展清除浮动额外标签法（隔墙法）父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮动常用图片格式PS切片工具切图插件css布局的三种机制CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位普通流（标准流）块级元素会独占一行，从上向下顺序排列；常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父

css样式表/层叠样式表（3）（1）盒子模型（2）盒子边框（3）表格的细线边框（4）内边距padding内盒尺寸计算（元素实际大小）padding不会影响盒子大小的情况（5）外边距margin块级盒子水平居中文字居中和盒子居中的区别插入图片和背景图片的区别清除元素的默认内外边距外边距合并（6）盒子模型布局稳定性（7）ps基本操作以及常用快捷键（8）去掉列表默认的样式（9）圆角边框（css3）（10）盒子阴影（1）盒子模型盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（

css样式表/层叠样式表（2）（1）css复合选择器后代选择器子元素选择器交集选择器（不常用）并集选择器链接伪类选择器（2）标签的显示模式块级元素block-level行内元素inline-level行内块元素inline-block标签显示模式转换（3）单行文本垂直居中（4）css背景（5）css三大特性权重计算公式权重叠加（1）css复合选择器选择器作用特征使用情况隔开符号及用法后代选择器用来选择元素后代是选择所有的子孙后代较多符号是空格 .nav a子代选

CSS样式表（1）（1）css概念引入css的三种方法行内式（内联样式）内部样式表（内嵌样式表）外部样式表（外链式）（2）css选择器css基础选择器标签选择器类选择器id选择器通配符选择器用*号标识（3）css文字文本样式font字体字体风格字体粗细字号大小字体（4）css外观属性文本颜色文本水平对齐方式行间距首行缩进文本修饰（1）css概念CSS（Cascading Style Sheet），CSS样式表或层叠样式表（级联样式表）作用设置HTML页面中的文本内容（字体、大小、对齐方式等）、图