1 关于 inline block inline-block的一些注意点:<img>是行内块标签
1. <p>, <h1>..<h6>标签内放置的是文本,因此这几个标签内部不能嵌套块级标签。
2. <a> 链接内不能嵌套链接
3. 行内标签一般只能嵌套行内标签和行内块标签, inline 或者 inline-block 但是,
<a> 标签是个例外,他可以嵌套块级标签。
文字的高度
行高: 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会撑开盒子,因此盒子会变大,这样回合设计稿相违背,需要我们设置盒子的宽高的时候把内边距的数值减去 而且值得注意的是内边距是两边的,因此计算的时候不要遗漏。