前端学习第二天 CSS层叠和属性

1 关于 inline block inline-block的一些注意点：是行内块标签

  1. 
, 
..
标签内放置的是文本，因此这几个标签内部不能嵌套块级标签。
  2.  链接内不能嵌套链接
  3. 行内标签一般只能嵌套行内标签和行内块标签, inline 或者 inline-block 但是，      
     标签是个例外，他可以嵌套块级标签。

文字的高度

v2-643fff1278b05976fb0d489020f5b610_1200x500.jpg

行高： inline-height： 表示的是基线和基线之间的距离。

行高 = 上间距 + 内容高度 + 下间距  其中 上下间距的高度总是一致的
因此 让文本垂直居中的方法 inline-height：盒子高度， 这样的话由于上下间距是一致的，内容就是垂直居中的。
如果行高设置的高于盒子的高度，文字会偏下
行高小于盒子的高度，文字会偏上。

CSS的层叠性

1 对于相同的优先级，定义在CSS文件书写的顺序， 下部的样式会覆盖上面的同样的样式（即 发生相同的样式定义，样式冲突的时候，就近原则，越是靠后覆盖上层）长江后浪推前浪

2 子标签会继承父标签的一些特性，不是所有特性，一般来说对于文本的设置样式可以继承，比如 font-(font-style, font-weight, font-size, font-family),text-(text-decoration, text-indent color) line-(line-height) 注意:继承的优先级是0；

CSS的优先级

  1. 标签选择器的优先级为 0001;
  2. 类选择器的优先级为    0010;
  3 id选择器的优先级为      0100；
  4 行内标签的优先级为     1000；   也就是写在html标签中的样式，一般不推荐这么写
  5 !import 表示优先级最高，这个用的也不多，这个优先级是无穷。

注意：
1 继承的优先级为0，如果标签选择的是我们的标签的父类标签，不管这个选择器多高，这个优先级都为0，如果有一个标签选择器能够选到我们的标签，这个优先级都比继承的高，也就是说父类再牛，也看自己；
2 如果标签的优先级相等，这样就看CSS的书序顺序，写在后面的覆盖前面的；
3 选择器的优先级是可以相加的， h1.a {} 就是 0001 + 0010 = 0011；比较优先级是比较的相加后的值，其中需要注意的是，这个优先级没有进位的概念
0001 + 0001 +....12个+ 0001 还是小于0010 因为 00012 < 0010 不能进位。低位永远不能大于高位。
4 伪类的优先级为 a:hover = 0001 + 0010 = 0011 伪类的优先级也属于类，前面有个a标签，所以是相加的0011优先级。

这里有个 难点在于 div p {} 这个定位到的是div的所有后代p 因此 子孙代p也是被选中的，而不是选中子代p，因此这个不是继承优先级为0的问题。犯过的错误记录一下。

CSS的其他属性

1 background ：

            background-color: 颜色；
            background-image: url(images/1.jpg);
            background-position: 
            background-repeat: repeat;
            background-attachment: scroll;

background-repeat 的值：
1 repeat：重复 x,y重复；
2 no_repeat: 不重复，只显示一张图；
3 repeat-x : 沿着x轴重复；
4 repeat-y:沿着y轴重复；

background-attachment :的值
1 scroll ：滚动时图片一起滚动
2 fixed ： 滚动时图片固定

background-position:
1 可以使用方位名词：

background-position: center bottom;  
1 使用方位名词时候，定义两个值，默认是第一个值代表x轴的位置，第二个代表y周位置，但是如果全都是用方位名词，则前后顺序 无关；

2 background-position: bottom; 如果使用一个方位名词，另一个缺省的方位名词默认为center 也就是说 bottom center 由于前后顺序无关，所以都是一样的显示

3 background-position: 12px 20px;  使用具体的长度值时，x轴在前， y轴在后，前后是有顺序的，不能调换，

4 混合使用：background-position: 12px bottom;  数值和方位名词可以同时使用，一旦出现了方位名词，就表示x y 轴方位顺序不能随便写。

5 background-position: 12px ;  又具体的数值的时候，方位名词也可以省略，默认值也是center -等价于- 12px center

background的连写：
1 background的连写没有特定的顺序： 一般来说

颜色-图片-重复-滚动-位置（位置有两个值，因此放在最后） 带有颜色的图片重复滚动形成背景
background : color image repeat attachment position;
这些属性值又默认值， 因此有时直接写一个image 也是可以的，默认是 no-repeat left top ;

背景透明色 CSS3

css3有个特性可以使得背景有一个透明度，因此可以看到下一层的图片的颜色
background: rgba(0,0,0,0.3); 前面是颜色值，后面就是 透明度 0-完全透明，1 完全不透明。

CSS定位盒子模型

1 每个标签都是一个盒子，盒子又 boder padding margin 也就是边框 内边距和外边距

border属性

            border-style:  
 none：没有
  solid： 实线
  dashed: 虚线
  dotted： 点线
            border-color: 边框的颜色;
            border-width: 边框的宽度 2px 
            border-top: 表示上边框 还有bottom left right;
            border-collapse: collapse;  合并相邻的边框，否则相邻的边框会变为设置的2倍，

边框的连写：

border: with style color;
border: 1px solid red;
也就是 粗细，样式 颜色 ---> 粗盐在两边 粘不到一起

有一个技巧 去掉所有边框： border : 0;

padding 内边距

padding: 10px； 上下左右的内间距都是10px
padding-top:
padding-left:
padding-right:
padding-bottom:

padding 可以连写

padding : 10px 20px 30px 40px；表示 上右下左的距离--也就是顺时针方向设置

注意： padding 可以设置 1个 2个 3个 4个值
1 padding:10px; 上下左右都是10px
2 padding 10px 20px; 上下是10px 左右是 20px
3 padding 10px 20px 30px; 上10px 左右20px 下30px；
4 padding 10px 20px 30px 40px; 上 右下左 顺时针

2 padding的注意点：
给设置了宽高的盒子设置padding会撑开盒子，因此盒子会变大，这样回合设计稿相违背，需要我们设置盒子的宽高的时候把内边距的数值减去 而且值得注意的是内边距是两边的，因此计算的时候不要遗漏。