web前端 -- Day5基础知识

css准备工作

1、清空默认边距和样式；
2、设置正文的默认样式；
3、设置超链接的默认样式；

css继承性和层叠性

1、继承性
继承性指的是给父标签写属性，后代标签也可以生效；

那些属性可以继承?
css属性可以分成两大类：文字控制属性和区块控制属性；
文字控制属性都是控制文字内容的，因此文字控制属性是可以继承的；而区块控制属性只是控制标签本身，所以区块控制属性不会继承。

注意事项：超链接的颜色是需要单独针对修改的。

2、层叠性
css的层叠性指的是后写的属性会把前面写的属性覆盖掉；
css的层叠性可以给后面维护工作提高很大便利性；

文本缩进和字词间距

text-indent — 文本缩进 ，一般写2em表示缩进两个文本大小；
letter-spacing — 字间距；
word-spacing — 词间距

注意事项：词间距只在有空格的时候才会生效。

复合选择器的权重

复合选择器是由基础选择器组成的一类复查选择，由于网站结构复杂因此会产生复合选择器的权重问题。

针对性越强，权重越高

注意事项：css的层叠性跟权重无关！层叠性只有在权重相同的时候才会发生，而权重不一样的情况就是谁的权重高谁生效。

权重的计算方式
1、通过浏览器右击 — 检查/查看元素，最上面的样式条，权重最高。
2、权重比较： 一个标签选择器 <一个类选择器 <一个id选择器 ；

溢出隐藏属性

溢出隐藏属性经常调试错误以及处理尺寸有误的时候；
overflow:hidden; 将超出范围的内容隐藏掉；
overflow:auto; 将超出范围的区域添加滚动条；

注意事项：溢出隐藏效果只有在指定了尺寸才会生效。

内外边距

内边距：padding
外边距：margin

1、外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。最终两个盒子的距离是，最大的那个为准。

2、外边距塌陷
外边距存在着一个情况叫做边距塌陷，他是两个盒子间的垂直外边距紧挨在一起的情况下发生，发生的时候外边距并不是相加而是发生合并，以最大的外边距来计算，这是浏览器的一个bug。

浏览器的bug:当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

解决方法：
1、两个同级盒子发生塌陷，这种情况不会造成，不用解决；
2、嵌套关系的盒子，在一个盒子内部，内部的盒子有margin-top，会将父级盒子直接带下去，发生外边距塌陷，讲解方法就是给父级盒子添加overflow:hidden;（内部的盒子浮动也可以解决）；

解决方案：

1. 可以为父元素定义1像素的上边框或上内边距。
2. 可以为父元素添加overflow:hidden。

content的宽度高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

/*外盒尺寸计算（元素空间尺寸）*/ 
Element空间高度 = content height + padding + border + margin 
Element 空间宽度 = content width + padding + border + margin 
/*内盒尺寸计算（元素实际大小）*/ 
Element Height = content height + padding + border （Height为内容高度） 
Element Width = content width + padding + border （Width为内容宽度）

注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。

圆角边框 （CSS3）

// 让一个正方形  变成圆圈。 注意兼容性问题 IE8以下不兼容
border-radius: 50%;   

####盒子阴影 （CSS3）

// 注意兼容性问题
box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；