css学习

CSS的引入

1. 内嵌式：<stype type="text/css"> body{margin:0px;padding:0px;} </style>2. 行内式: <p  style="width:400px; padding:20px;">段落</p>3. 外链式: <link  href="CSS文件路径" rel="stylesheet"/>4. CSS中直接使用 @import url(./test.css)

link 与 @import 的区别和选择

import在html使用时候需要<style type="text/css">标签，同时可以直接“@import url(CSS文件路径地址);”1：link是html标签，只能放入html中，除了加载CSS外，还可以定义RSS等其他事务； @import 可看作为css样式，只能加载CSS。2：link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后加载。3：link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

W3C三层分离

1.html负责页面的结构和语义   2.css负责页面的样式    3.js负责页面的行为

语义的好处

1.让页面更加的友好，SEO会收录页面更多的信息。2.将页面的结构更加的清晰，对开发人员友好。3.对用户体验好

CSS三大特性

• 继承性: 子元素可以继承父元素的样式

a. text-   font-   line- 和块元素的width、color的属性都可以继承。b. 盒子相关的样式都不能继承，比如：高、背景色、边距、浮动、绝对定位等c. 继承特殊性  1. a标签的颜色不能继承，直接修改a标签。  2. h标签的大小不能继承，直接修改h标签。  3. div的高度如果不设置由内容来决定（没有内容为0），宽度默认由父元素继承过来。

• 层叠性

 a. 作用：一个属性通过多个选择器设置到同一个元素上面，这时一个属性就会将另一个属性层叠掉b. 不同的属性通过 多个选择器 设置到一个元素上面，不会发生层叠c. 层叠性的前提是CSS的选择器的优先级相同  是浏览器处理冲突的一个特性

• 优先级: 多个选择器作用在同一元素上， 谁的优先级更高

a. important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承样式 > 浏览器默认的样式  注意：!important(IE6不支持)，虽然important是一个变数，但是不能作用在继承上，!important无法继承b. 优先级是层叠的表现形式

权重： 优先级的一种算法

作用：多个复合选择器的作用在同一元素上的优先级：权重算法：（0，0，0，0）==》                     第一个0对应的是important的个数，                 第二个0对应的是id选择器的个数，                 第三个0对应的类选择器的个数，                 第四个0对应的是标签选择器的个数，                 就是当前选择器的权重。比较： 先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。选择器工作的原理：选择器查找元素时不是从左往右找，而是从右往左找。权重问题：   left 比 right， 权重高,有left又有right的时候，执行left的值。   top  比 bottom，权重高,有top又有bottom的时候，执行top的值。

盒子稳定性

a. 盒子稳定性:只给宽高的盒子（宽/高度剩余法）> 给padding的盒子 > 给margin的盒子b. 层级问题:定位的盒子(static除外)> 浮动的盒子 > 标准流盒子（层级高低和占不占位置无关）c. z-index的值为层级的值（不给默认为0，层级不取小数）,层级为0的盒子，也比标准流和浮动高,层级为负数的盒子，比标准流和浮动低c.标准流、浮动、定位的盒子，后面的盒子比前面的层级高  1.定位中：absolute、fixed是不占位置的，relative是占位的的  2.都是定位，又不给z-index值，那么，后面的盒子比前面的层级高  3.浮动或者标准流的盒子，后面的盒子比前面的层级高

行高

应用：将行高设置等于容器的高度可以让文本垂直居中定义：两行文本之间基线的距离就是行高行高的单位：px em %  无单位(与em一样)         em指的是当前标签设置的字体大小(当前字体大小16px，那2em=32px)         %(与em一样,字体大小18px，那line-height:200%;即line-height:36px)  一行文本的行高分为：上间距，文本的高度，下间距，且上间距是等于下间距，所以文字默认在这一行中是垂直居中的问题：为什么行高等于容器的高度，元素在父容器中垂直居中？    因为行高等于容器的高度，那么相当这个容器中只有这一行文本，并且容器被这一行文本占满,而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中行高可以继承：   注意： em % 无单位 以当前标签字体大小为基准1.在设置行高的时候，如果单位是em或者%，那么行高会先计算出来结果后再继承给子元素            2em*16px=32px2.在设置行高的时候，如果单位是没有，那么将来行高会先继承给子元素，然后再计算出行高  body { font-size: 20px;} .father { font-size: 25px; line-height: 2;} .son {font-size: 30px;} <div class="father">     <div class="son">哈哈</div> //60px</div>  

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)//代表当前所有的标签 通配符（兼容任何浏览器打开页面内容的边距都为0）。目前最常用的是Normalize.css ，它是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对只需要统一的元素样式，依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。-ms-（私有属性）；//IE-moz-（私有属性）；//Firefox -webkit-（私有属性）；//Safari 和 Chrome -o-（私有属性）；// Opera如：-moz-column-count:4;（分成4块显示） // Firefox 

文本与图片对齐

文本与图片在同一行中，那么将来文字与图片的默认对齐方式是文字的基线对齐图片的底线。vertical-align：设置文本与图片的对齐方式：设置在img上取值： middle:将中线对齐

常见居中

行内盒子的内容无所谓居中a. 文字/行内元素在块盒子水平居中：text-align:centerb. 垂直居中：行高等于盒子高 line-height:30pxc. 块盒子在父盒子水平居中：margin:0 auto块盒子在父盒子垂直居中：没有特别的直接属性可以做到图片和文字在垂直方向对此：在图片上使用vertical-align:minddle如果文本与图片在同一行中，那么文字与图片的默认对齐方式是文字的基线对齐图片的底线img {width: 200px;height: 200px;vertical-align: middle;}algby<img src="img/2.jpg"> 

隐藏/显示盒子

隐藏盒子  display: none;        隐藏盒子，不占位置  visibility: hidden;   隐藏盒子，占位置  overflow: hidden;     隐藏超出部分  type="hidden"  宽度和高度都显式设置为0显示盒子  display: block;     显示  visibility: visible;  显示  单行溢出文本显示省略号...的方法：white-space:nowrap;  //文字一行显示  overflow:hidden;   text-overflow:ellipsis;  //超出的...显示（超出部分省略号显示）参考地址：http://jssl915.github.io/overflow.htmltext-indent:-999px;overflow：hidden;  （隐藏按钮文字的小技巧）

长度单位

绝对长度单位：cm：厘米，mm：毫米，in：英寸，pc：派卡（Picas），相当于我国新四号铅字的尺寸。都不常用相对长度单位：  px：像素点，像素就是显示器显示的一个点。  em：1em 等于当前的字体大小，例如：当前元素的字体大小为16px，那么1em = 16px。单位之间的关系：1in = 2.54cm = 25.4 mm  = = 96px  p { width: 1in; height:20px; }在PC时代主要以px为主。在移动web时代主要以： em、rem、pw、ph、百分比等来做布局的设置。相对单位：像素是相对单位。不同平面尺寸可以是相同的分辨率，也就相同的像素大小，对应的实际的尺寸可能不同。例如，iphone和pc电脑相同的屏幕分辨率下，对应点的大小不同。

行内块级元素

1.行内元素(display: inline)：a span b u i s strong em ins del font  特点：1.一行可以显示多个        2.无法设置宽高，由内容来决定       3.通常不能放其他块盒子       4.行内盒子设置了内、外边距  水平方向起作用，垂直方向不起作用 2.块级元素(display:block)：p h1-h6 div ul li ol li dl dt dd pre   特点：1.独占一行  2.可以设置宽高 及margin，padding，border        3.默认宽度一整行,可以放置块盒子和行内盒子 以及普通文字3.行内块级元素(display:inline-block)：img input   特点：1.可以设置宽高  2.一行内可显示多个

元素嵌套

元素嵌套，要满足下面几条： 嵌套了浏览器会解析成并列关系显示  1. 行内元素只能包含行内元素 禁止嵌套 块级标签  2. 块级元素可以包含所有的行内元素和部分块级元素  3. p标签，h标签都不能包含块级元素  dt、h1-h6、p等标签禁止嵌套其他块级标签，只能嵌套文字类型的行内标签  a链接可以嵌套图片等标签，但不可以嵌套input标签

消除inline-block中的空隙

1. 去除空格，把代码放在一行上  2. 使用margin负值   3. 给父级添加font-size:0；  4. 使用float的方式5. <!---->连接6. 使用letter-spacing或者  word-spacing div {  border: 1px solid red;  background-color: blue;  width: 100px;  height: 400px;  color: #fff;  /*word-break: break-all; */  /*可以把一个单词放到两行中，充分利用行的空间*/  word-break: keep-all;}  <div>    I  am  itcast teacher theather theather theather    http://www.itcast.cn/i/id/ljljljj  </div>

盒模型

盒模型包括margin  盒子的大小不包括盒子宽：border-left-width + padding-left + width + padding-right + border-right-width盒子高：border-top-width + padding-top +height + padding-bottom + border-bottom-width行内盒子的宽高：  宽度： 左右margin左右padding  左右border-width    内容区width由其内容决定  高度： 上下border-width   内容区的height由其内容决定

精灵图

精灵图(sprite)：就是将页面上一些较小的图片放在一张大图上 也叫雪碧图，雪碧技术１为什么要有精灵图：早期网速有限，提升用户的体验，将一张大图分解成为多张小图来提高页面的打开速度。但是网速得到提升，要减少浏览器对服务器的请求，使用精灵图，从而减轻服务器的压力

其他

font :  加粗  字号/行高  格式；    行高如果不写，默认为0；opacity:0.5;   filter: Alpha(opacity=50);text-decoration 后可以赋多个值，用于给文本添加多种显示效果层级必须有定位z-index: 2; position: absolute;（除去static）border-collapse: collapse; 去掉单元格之间的间隙文本letter-spacing：字母之间的字间距，包括中文单字 字间距就是字符与字符之间的空白,允许使用负值，默认为normalword-spacing： 单词（或字）之间的间距，对中文无效,允许使用负值，默认为normalword-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距white-space：规定如何处理元素中的空白  normal：正常的显示，超过盒子宽度换行显示。 nowrap：文本超过盒子宽度，也不换行显示，除非遇到<br/>，若超出浏览器页面则会自动增加滚动条。  pre：预格式化，按文档的书写格式保留空格、空行原样显示  word-break:自动换行  normal：使用浏览器默认的换行规则。  break-all：允许在单词内换行。  keep-all：只能在半角空格或连字符处换行。 word-wrap：允许长单词或 URL 地址换行到下一行normal  normal  只在允许的断字点换行（浏览器保持默认处理）。  break-word：在长单词或 URL 地址内部进行换行，几乎得到了浏览器的支持  font-family(尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示)1.英文字体一般不需要加引号，中文字体需要加英文状态下的引号，逗号隔，英文字体名必须位于中文字体名之前2.字体名中包含空格、#、$等符号，该字体必须加英文状态下的单引号或双引号，3.直接写中文是可以的,但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误,为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。  font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。  可以通过escape()  来得到