weixin_45768538的博客

（一）CSS 简介与基础选择器1. CSS 简介1.1 HTML 的局限性HTML 是网友的骨架，只关注内容的语义。例如<h1>表示大标题，<p>表示段落。早期的时候，HTML 只能做一些简单的样式，网页非常丑，而且使 HTML 代码臃肿。1.2 CSS-网页的美容师CSS 是 层叠样式表（Cascading Style Sheets）的简称。CSS 也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式

（二）CSS 复合选择器与特性1. Emmet 语法快速生成 HTML 结构代码快速生成 CSS 样式代码2. 复合选择器由基础选择器组合而成。后代选择器子选择器并集选择器伪类选择器2.1 后代选择器（重要）后代选择器又称为包含选择器，可以选择父元素里的子元素。写法是将外层标签写在前面，内层标签写在后面，中间空格分开。语法元素1 元素2 { 样式声明; }上述语法表示选择元素 1 里面所有的元素 2可以连续嵌套，比如可以是孙子等元素 1、2 可以是任何基础标签

（三）盒子模型1. 盒子模型1.1 看透网页本质网页布局过程：准备网页元素，网页元素基本都是盒子 box利用 CSS 设置好盒子样式，然后摆放到相应位置。往盒子里放东西。本质：利用 CSS 摆盒子。1.2 盒子模型（Box Model）组成CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距和实际内容。1.3 边框（border）border 可以设置元素边框。边框有三个组成：border-width、border-style、border-c

（四）CSS 浮动1. 浮动（float）1.1 传统网页布局方式网页布局的本质——用 CSS 来摆放盒子，把盒子放到相应位置。CSS 提供了三种传统布局方式：普通流浮动定位1.2 标准流（普通流/文档流）所谓的标准流，就是标签按照规定好的默认方式排列。块级元素会独占一行，从上到下顺序排列常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em标准流是最基

（五）定位1. 为什么需要定位一些固定盒子的效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。2. 定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移。定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。2.1 定位模式定位模式决定元素的

CSS选择器的相关补充(+,>, ,~)

（六）CSS 高级1.1 精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites. CSS 雪碧）。1.2 精灵图的使用使用精灵图核心总结：精灵图主要针对于小的背景图片使用。主要借助于背景位置来实现———background—position.一般情况下精灵图都是

（七）HTML5与CSS3新增特性1. HTML5新特性1.1 HTML5新增语义化标签<header>：头部标签<nav>：导航标签<article>：内容标签<section>：定义文档某个区域<asider>：侧边栏标签<footer>：尾部标签1.2 HTML5新增多媒体标签1. 视频 <vedio>所有浏览器支持 mp4 格式。autoplay="autoplay"controls=

（八）移动端 Web 开发1. 移动端基础1.1 浏览器现状 PC端常见浏览器360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据W

HTML+CSS实现下拉菜单

Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器），就可以减少重复编码的工作。1.调用方法Emmet使用Tab作为自动生成HTML代码的触发器。输入完生成HTML的缩写语句后，按下Tab，即可生成对应的HTML代码2.相关语法后代：>缩写：div>ul>li <div> <ul> <li></li> .

1. 单行文本溢出处理方式 /*强制文字一行内显示*/ white-space: nowrap; /*溢出部分隐藏起来*/ overflow: hidden; /*文本溢出时用省略号来显示*/ text-overflow: ellipsis;2. 多行文本溢出处理方式 overflow: hidden; text-overflow: ellipsis; /*弹性伸缩盒子模型显示*/ display: -webkit-box; /*限制在一个块元素显示文本的行数*/ -webkit

html解决嵌套块级元素垂直外边距塌陷问题1.为父元素定义上边框border-top: 1px solid transparent;2. 可以为父元素定义内边距padding: 0px;3. 可以为父元素添加 overflow:hidden 属性overflow:hidden;

1. 块级元素居中首先为块级元素设定宽度再将块级元素左右外边距设置成auto【上下外边距无所谓】 width: 500px; margin: 0 auto;2. 行内元素或行内块级元素居中需要为父元素添加 text-align 属性 text-align: center;3. 行内元素与行内块元素竖直居中使用 vertical-aline 属性。使用场景：经常用于设置图片或表单(行内块元素)和文字垂直对齐。语法：vertical-align : baseli

CSS案例(2D转换+过渡动画)实现效果HTML代码<div class="con"> <div class="div_1"></div> <div class="div_2"></div> <div class="div_3"></div> <div class="div_4"></div></div>CSS代码.con {