基础介绍

CSS 基础介绍

CSS（层叠样式表） 用来表现html，不仅可以静态的修饰网页，还可以适配各种脚本语言动态的对网页各元素进行格式化 在css中用户看到的大部分效果都是各种样式重叠之后形成的 核心是层叠，多重属性叠加共同作用 实现了内容与样式相分离 提高了代码的可重用性

css3介绍 相对于css2来说，css3更新了很多的内容，其中包括选择器、颜色、阴影、背景、文本、边框、新的布局方案、2d、3d、动画等等。 为了更好的兼容，在我们使用某些css3的属性的时候，是需要加上浏览器内核前缀的，例如-webkit-border-radius:10px;。 如果在开发过程中，需要大量的写浏览器前缀，可以通过编辑器的插件或者通过在线的平台进行前缀补全。

样式表的特性 继承性 直接使用其父元素已经声明好的样式 大部分的属性都是可以被继承的 层叠性 可以为一个元素设置很多选择器 只要样式不发生冲突，就可以看作一个 优先级 当样式发生冲突时，他们会按照不同使用方式的优先级来应用 浏览器的缺省设置（忽略不计） 外部样式或者内部样式 中等——遵守就近原则，从上向下执行，后面的会覆盖前面的 内联样式优先级最高 !important 调整优先级的 不管什么时候全部以!important为准，尽量少用

CSS统筹 文档统筹 整站里相同的css样式提取到一个样式表里,各个页面调用相同的样式文件即可 网站较大的情况下一班会把网站的头部,尾部单独分离出来,包括样式文 网站自身优化 页面头部优化: 页面头部指的是代码部分,具体的就是(Description)描述和(Keywords)关键字两部分 描述 应该用近乎描述的语言写下一段介绍网页的文字,在其中,你应该适当的对你的网站的特色内容加以重复以求突出

<meta name="description" cntent="">告诉搜索引擎你的站点的主要内容 关键字 应该列出你认为合适的,能突出网站内容的关键字就可以了,关键字不要设置太多,可设置8-10个,搜索引擎智慧浏览靠前的几个关键字 <meta name="keywords" content="">向搜索引擎说明你网页的关键字 超链接优化 搜索引擎有个会自动爬行于互联网上的机器人程序,这个机器人顺着网站之间的链接游览世界 采用纯文本链接; 尽量不要用flash动画设置链接和图片链接,因为搜索引擎识别不了flash上为文字 按规范书写超链接,title:起到提示访客的作用,也可以让搜索引擎知道它要去哪 图片优化 图片优化是为每个图片添加alt属性 alt属性的作用是当图片无法显示时,以文字的形作为替代显示出来,而对于eso来说,他可以令搜索引擎有机会索引到你网站上的图片 对于一些没有什么意义的图片,最好也写alt,可以写作 alt="" 避免大体积的页面 有经验表明,搜索引擎不喜欢索引过大的页面,即一个页面代码部分的体积不要太大,控制在100kb内为佳 合理的代码结构 搜索引擎细化格式清晰,结构分明的页面,理论上XML是最合乎 搜索引,当然这太极端 如果采用XHTML+CSS技术将页面数据同表现分离,即避免大量嵌套表格和其他冗余的代码,还是能够完美实现这一要求的 CSS规范 命名方法 语义化命名 结构化命名 css命名 建议使用小写字母 以英文字母开头,后面可以连接数字,字母,下划线,连字符,建议尽量使用英文字母,适当使用下划线和连接线 词必达意,名称要反映用途和相关信息,同时也要简短 CSS reset 在html中有默认的样式, 例如: p标签有上下边距 strong标签有字体加粗样式 em标签有字体倾斜样式 不同浏览器默认样式之间也会有差别 例如缩进的样式 在ie下是通过margin来实现的, 在firefox下时通过padding实现的 在切换页面的时候浏览器的默认样式通常会给我们带来麻烦,影响开发效率. 解决方法: 一开始就去掉浏览器额默认样式,准确的说是通过重新定义标签样式,覆盖浏览器的css默认属性,最简单的说法就是把浏览器提供的默认样式覆盖掉,这就是css reset 为什么用css reset: 因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

​

BFC 块级格式化上下文,是利用布局块级盒子的一块渲染区域 触发机制: 根元素 html元素 float的值不为none overflow的值不为visible diasplay的值为inline-block,table-cell,tabel-caption position的值为absolute或fixed 作用: bfc是页面上的一个隔离的独立容器,容器里面的子元素不会影响外面元素,反之亦然 清除浮动带来的影响 解决maigin塌陷的问题 bfc与普通块级元素的差异 可以阻止元素被浮动元素覆盖 可以包含浮动元素

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ css三种使用方式： ​ 内联样式：把css样式写在标签的style属性当中 ​ 内部样式：通过style标签写在head标签中 ​ 外部样式：通过link标签，将css写在外部css文件中 ​ 引入外部样式表的多种方式 ​ html中的方法：<link rel="stylesheet" href="./css/style.css"/> ​ rel的作用就是用来告诉浏览器我即将引用的外部文件的类型 ​ css中的方法：@import url(./css/style.css); ​ 三种使用方式的区别： ​ 优先级不同: ​ 内联样式>内部样式=外部样式 ​ link引入的外部样式表和style标签的内部样式表，优先级相同。谁在后面听谁的。后来者居上 ​ 请使用一种方式证明三种方式的优先级： ​ 用三种方式同时对一个标签的属性进行设置，看最后显示的效果 ​ 作用域： ​ 内联样式的作用域最小，只有当前标签 ​ 内部样式表作用域是当前的html文件 ​ 外部样式表作用域适用于所有的文件 ​ css统筹 ​ 文档统筹 ​ 将一个网站几十个网页相同的css提取到一个css样式表里 ​ 例如一个网站的头和尾 ​ ​

背景属性： 背景颜色： 属性：background-color 取值： 合法的颜色值 transparent:透明颜色 注意： 背景颜色会填充到所有区域 背景图片 background-image： 取值： url（""） background-image img 背景重复（重铺） 当元素区域大于背景图，则默认是以平铺的方式出现 属性： background-repeat 取值： repeat 默认值（背景重复的） repeat-x 在水平方向上平铺 repeat-y 在垂直方向上平铺 no-repeat 不平铺 背景图片尺寸 属性： background-size 取值： width height width% height% cover 将图片等比放大直到覆盖整个区域为止 contain 包含 背景图片的固定： 作用： 让背景一直保持在可视化区域中，不随着滚动条的改变而改变 属性： background-attachment 取值： scroll 滚动（默认值） fixed 固定 background-position 取值： x y x为正，则背景图片向右移 x为负，则背景图片向左移 y为正，则背景图片向下移 y为负，则背景图片向上移 x% y% 0% 0% 当前容器左上角 100% 100% 当前容器右下角 50% 50% 当前容器正中央 关键字 x:left right center y:top bottom center 雪碧图/精灵图 CSS sprites 将若干小图片放进一张大图中 以减少HTTP请求次数

背景图片的简写 background:color url("") repeat attachment position; url("")和position必须同时使用，其他随意组合

渐变： 什么是？ 两种或者多种颜色平缓过渡的效果 重要元素 色标：指定每一个颜色出现的位置以及值 分类： 线性渐变 是以直线的方式来填充颜色 径向渐变 是以圆形的方式来填充颜色 语法： 线性渐变 属性： background-image 取值： 线性渐变取值： linear-gradient（angle,color-point1,color-point2,color-point3） angle: 关键值： to top to tight to left to bottom 具体的角度值 0-360deg 径向渐变取值： 属性： background-image 取值： 径向渐变取值： radial-gradient（color-point1,color-point2,color-point3） angle: 关键值： to top to tight to left to bottom 具体的角度值 0-360deg

定位：改变元素在网页中的默认位置 分类：普通流定位：页面中默认的固定方式 margin padding来微调 浮动定位：使多个块级元素在一行内显示 相对定位 绝对定位 固定定位 粘性定位

普通流定位：又称“文档流定位” 特点：所有块级元素都是从父元素左上角开始排列 每个元素都有自己的控件，默认是不允许被重叠的 所有的块级元素从上向下排列 行内块元素&&行内元素都是从左向右排列，放不下换行 浮动定位： 浮动：如果将一个元素进行浮动，具有以下特性： 浮动 将元素排除在文档流之外（脱离文档流），不占据页面的空间， 其他元素上前占位 浮动元素会停靠在父元素左边或右边，或者其他已浮动元素的边缘上 语法：属性：float 取值： none:默认值，及元素无任何浮动效果 left:左浮动，让元素停靠在父元素左边，或紧挨已有浮动元素右边 right:右浮动，让元素停靠在父元素右边，或紧挨已有浮动元素左边边 浮动的特性： 浮动的元素脱离标砖文档流 元素一旦脱离了文档流就不存在等级之分 浮动的元素产生的字围效果 浮动的元素当一行的宽度不够使用的时候会自动往前面的空隙挤 子元素浮动之后最好把同级的其他子元素都浮动 浮动带来的恶劣影响影响： 如果父元素没有设置高度，儿子元素全部都浮动了，那么父元素高度将变为0 前面的元素浮动之后会影响网页后面元素的布局 如何清除浮动带来的影响： 隔墙法：clear both none:默认值，不做任何清除效果,允许两边出现浮动 left:清除前面元素左浮动带来的影响 right:清除前面与元素右浮动带来的影响 both:清除前面元素任何一种浮动带来的影响 清除浮动 最成熟的方法。可以直接写在预格式样式中 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } 给父元素设置一个具体的高度 overflow: hidden; 有效果是因为触发了BFC

相对定位：元素相对与它原来的位置发生偏移 属性：position 取值：relative 注意：相对定位元素原来位置会被保留，不能被其他元素占位 相对定位的元素如果一定，只不过是视觉上的位置移动，本身并没有进行移动 相对定位并没有多里标准文档流 好处： 通过相对定位可以让元素视觉上灵活的移动到指定的位置上去，并不会影响元素本身的布局 缺点： 相对定位的元素位移参考是相对于元素本身的位置，一旦原来本身的位置发生了改变，那么相对定位的元素的视觉位置也会影响。 元素形影分离，看到元素位移了，但原来的位置还占着。只是看起来位移了。 移动的影子可以重叠 看到的元素移动只是移动影子，实际本体还在原来的地方。 margin与position区别： 是否影响其他元素的位置 绝对定位：脱离文档流，即不占据页面空间 只会相对于离他最近的已定位的祖先元素发生位置的改变 绝对定位:position:absolute 一旦设置绝对定位,元素就脱离的标准文档流,不再手袋文档流中标签的等极限制 同时元素也会脱离的标准文本流,不会再形成类似于浮动的字围效果了. 绝对定位的位移问题 定位参考 绝对定位的元素位移,是以具有定位属性的祖先元素为参考.只要是长辈都行. 如果所有的祖先元素都没有定位,那么就会以body为参考 定位默认值 无论是相对定位,还是绝对定位,位移参数在没有设置的情况写,默认值不是0,而是auto 以body为参考时的特殊情况 top: 当一个绝对定位的元素以body为参考时,设置top为首屏,参考点为首屏左上角. bottom: 当一个绝对定位的元素以body为参考时,设置bottom,参考点为首屏左下角 子绝父相 子元素绝对定位,父元素相对定位.如果多个绝对子元素,最外层父元素一定要相对元素. 如果祖先元素中具有定位属性,那么将会以祖先元素为参考 如果一个祖先元素的低端功能为属性值为static,那么将不能够作为子元素定位的参考 相对定位和绝对定位区别: 参照物不同: 绝对定位参照物是包含块(父级) 相对定位参照物是本身 所占空间: 绝对定位是将对象从文档流中脱离出来,因此不占据空间 相对定位不破坏正常的文档流顺序,无论是否进移动,元素仍然占据原来的空间

固定定位:position:fixed 固定定位参考,以网页浏览器为参考

粘性定位:position:sticky 定位基于用户滚动的位置 在页面中时,跟随用户滚动,开始超出可视框后,会固定在目标位置

层级关系 z-index:数字. 默认auto 数字大的层叠在上面,相对定位就可以在不影响,可以设置页面的情况下使用z-index值 只能被设置了定位的元素使用 层级排序 如果大家都不去设置z-index就会采用后来居上的原则 如果大家都设置了z-index那么谁大听谁的 如果父元素的z-index较大,另一个父元素的z-index值较小,那么较小的父元素的子元素永远无法压倒较大的父元素的子元素 (父亲怂了,儿子再NB也没用) z-index:两个已经定位的元素发生重叠时，通过该属性确定重叠层次

显示：属性：display 　　取值：none 让生成的元素脱离文档流，从页面消失 block 让生成的元素跟块级元素一样 inline-block 让生成的元素跟行内块级元素一样 显示效果： 可见性： 属性：visibility 取值：visible 默认值，元素可见 hidden 隐藏，但未脱离文档流

定位元素的层级关系: z-index: auto:默认 number:无单位的整数值,可为负数,数值越大,层的顺序越靠上 Tip:此属性仅仅作用域position属性值relative或absolute,fixed的对象 子元素的层级关系会受到父元素的影响 包含块: 包含块是决定定位的基础,包含块就是为绝对定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移期待和百分比长度的参考; 默认状态下,body是一个大的包含块,所有绝对定位的偏移起点和百分比大小的显示的,如果我们定义了包含元素为包含元素块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级元素来定位自己显示位置 定义元素为包含块: 给绝对定位元素的父元素添加声明position:relative/absolute

置换元素/非置换元素 置换元素: 一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固定尺寸的元素, 这些元素网往往没有实际的内容,即是一个空元素.置换元素就是浏览器根据元素的属性和属性值,来决定元素的具体显示内容,被称之为置换元素 非置换元素: 非置换元素/不可置换元素/HTML中除了可替换元素外,其他都是不可替换元素 即其内容直接表现给用户端例如浏览器

浏览器前缀 -ms- ：IE -moz-：firefox -o- ：opera -webkit- ：chrome|safari

css bug CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

css hack CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。 之前说过的filter，其实也属于hack的一种 副作用 降低代码可读性 增加代码负担 常见的css hack及css bug IE6常见CSS解析Bug及hack 图片间隙 在元素中直接插入图片时，图片下方会产生约3像素的间隙(该bug出现在IE6及更低版本中) hack1: 将转为块状元素，给添加声明：display:block; hack2:hack2:将img设置vertical-align:top/middle/bottom;只要不为baseline 双倍浮向（双倍边距） 当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示。 hack:给浮动元素添加声明：display:inline; 默认高度 在IE6及以下版本中，部分块元素拥有默认高度（低于16px高度） hack1:给元素添加声明：font-size:0; hack2：给元素添加声明：overflow:hidden; 百分比bug 在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。 hack:给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。 列表阶梯BUG（IE6及更低版本的浏览器中） 在给的子元素中使用了Float:left;父元素中没有设置浮动属性，li阶梯状效果。 hack:给父元素设置浮动便能解决此问题 当给LI里的A转成块元素，并设置了固定高度时，且给父元素写了浮动后在IE6及更低的版本浏览器里会出现垂直显示。 hack:给a也设置左浮动便可解决。