CSS

现在的互联网前端分三层:

　　HTML:超文本标记语言,从语义的角度描述页面结构.

　　CSS:层叠样式表,从审美的角度负责页面样式.

　　JS:Javascript,从交互的角度描述页面行为.

CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果,将网页内容和显示样式进行分离,提高了显示功能.

1.CSS的引入方式:

　　1.内嵌式

<h1 style="font-size:10px; color:yellow">呵呵哒</h1>

　　2.内联式

<style type="text/css">
h1{
  font-size:30px;
  color:red;    
}
</style>

　　3.外链式

<link rel="stylesheet" type="text/css" href="./css/index.css">

　　4.导入式

@import url("./css/index.css")

2.CSS选择器

　　1.基础选择器:

　　　　通配符选择器:匹配所有标签,通常不建议使用通配符选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需谨慎使用.

　　　　#wrap id选择器:匹配以唯一标识符id属性等于wrap的对象作为选择符,唯一的只有一个.

　　　　div 标签选择器:匹配div标签的选择器.

　　　　. 类选择器:以class属性包含myclass的对象作为选择符,不同于ID选择的唯一性,类选择符可以同时定义多个.

　　2.高级选择器:

　　　　ul>li:子代选择器:只能命中子元素,而不能命中孙辈

　　　　ul a:后代选择器:选择符将会命中所有符合条件的后代,包括儿子,孙子......

　　　　li+a:相邻选择器:选择紧贴在li元素之后的a元素

　　　　li a:兄弟选择器:选择li元素后面的所有兄弟元素a

选择器的权重:行内样式1000>ID选择器100>类选择器10>标签选择器1

　　3.属性选择器:

　　　　E[att]:选择具有att属性的元素

　　　　E[att="val"]:选择具有att属性且属性值等于val的E元素

　　　　E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素

　　　　E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素

　　　　E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素

　　4.伪元素算择期:

　　　　E:before:设置在对象前(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用,并且必须定义content属性.

　　　　E:after:设置在对象后(依据对象树的逻辑结构)发生的内容,用来和content属性一起使用,并且必须定义content属性.

3.CSS的继承性和层叠性

继承性:给父级设置一些属性,子级继承了父级的该属性,

有一些属性可以继承下来:color,font-*,text-*,line-*,主要是文本级的标签元素.

但是像一些合资元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承.

层叠性:权重的标签覆盖掉了权重小的标签,谁的权重大,浏览器就会显示谁的属性.

数:id的数量,class的数量,标签的数量.

总结:

1.先看标签元素有没有被选中,如果选中了,就数数(id,class,标签的数量),谁的权重大,就显示谁的属性,权重一样大,后来者居上.

2.如果没有被选中标签元素,权重为0

3.如果属性都是被继承下来的,权重都是0.权重都是0:"就近原则":谁描述的近,就显示谁的属性.

4.继承来的元素权重为0,跟选中的元素没有可比性.

5.!important:设置权重为无限大,只影响选中的元素.

4.盒模型

盒子内容的宽度

height:盒子内容的高度

padding:内边距,内容区域(content)到边框(border)的距离,内边距会扩大元素所在的区域,一些padding的属性和border类似.

margin:外边距,四个方向

　　外边距合并的情况:

　　　　1.外边距合并只会发生在上下两个方向上,并且只有块级元素上

　　　　2.当两个垂直外边距相遇时,会形成一个外边距,称为外边距合并,所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之.(毗邻的定义为:同级或者嵌套的盒元素,并且他们之间没有非空内容,padding或border分隔)

　　　　3.父子嵌套设置垂直外边距之后,会形成外边距合并,影响页面布局

　　　　　　解决办法:

　　　　　　　　1.父级或子元素使用浮动或者绝对定位absolute

　　　　　　　　2.父级overflow:hidden

　　　　　　　　3.父级设置padding(破坏非空白的折叠条件)

　　　　　　　　4.父级设置border

 border边框:

　　border-分别设置四个边框宽度

　　　　如果提供全部四个参数值,将按上,右,下,左的顺序作用于四边

　　　　如果只提供一个,将用于全部的四边

　　　　如果提供两个,第一个用于上,下,第二个用于左,右.

　　　　如果提供三个,第一个用于上,第二个用于左,右,第三个用于下.

　　border-style:

　　　　none:默认,无轮廓

　　　　dotted:点状轮廓

　　　　dashed:虚线轮廓

　　　　solid:实线轮廓

　　　　double:双线轮廓

　　border-color:和border-width使用一样

　　border-left:

　　　　border-left-width

　　　　border-left-style

　　　　border-left-color

　　　　border-left:1px solid red

　　border-right,border-top,border-bottom:和border-left用法一样

　　border-radius:border-radius:50%圆

　　　　

5.浮动

　　1.浮动效果:可以使元素按指定位置排列,直到遇到父元素的边界或另一个元素的边界停止

　　　　float:left　　左浮动,左侧为起始,从左往右依次排列

　　　　float:right　　右浮动,右侧为起始,从右往左依次排列

　　　　float:none　　默认不浮动

　　2.浮动特性:

　　　　①浮动可以使元素脱离文档流,不占位置

　　　　②浮动会使元素提升层级,不建议

　　　　③浮动可以使块元素在一行排列,不设置宽高的时候,可以使元素适应内容

　　　　④浮动可以使行内元素支持宽高

　　　　浮动可以使元素脱离文档流,它可以使元素并排显示,有贴边和收缩现象,只要盒子浮动了,不区分行内还是块级标签,可以任意的设置宽高,但是,要浮动一起浮动,要不一起不浮动.

　　3.浮动产生的问题:

　　　　在页面布局中,一般情况父元素的高度是不设置的,通过子元素来填充它的高度,但是子元素设置浮动之后,不会撑开父元素的高度,因为子元素不占位置.

　　4.浮动解决方案:

　　　　①给父盒子设置固定高度(缺点:不灵活)

　　　　②给浮动元素最后一个子元素后面添加一个空的块级元素,且该元素不浮动,设置clear:both,缺点:结构冗余

　　　　③官方写法:给父盒子设置:.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:"0"}

　　　　④给父元素添加overflow:hidden

6.定位

　　static:默认没有定位

　　relative:相对定位:相对于自身进行定位

　　　　1.不设置偏移量的时候,对元素没有任何影响

　　　　2.可以提升层级关系

　　　　3.微调元素

　　absolute:绝对定位

　　　　1.无父级元素定位时,以浏览器的左上角为基准

　　　　2.有父级元素的情况下,父级设置相对定位,子级设置绝对定位,是以父盒子为基准进行定位,这就是"父相子绝".

　　fixed:固定定位:设置固定定位之后,当前元素不会发生改变

 

7.z-index

　　1.z-index属性设置元素的堆叠顺序(层级关系),拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素前面

　　2.对于同级元素,默认position:static情况下文档流后面的元素会覆盖前面的

　　3.对于同级元素,position不为static且z-index存在的情况下,z-index大的元素会覆盖z-index小的元素,即z-index越大,优先级越高.

　　4.从父原则:子级的永远大于父级的.