web前端 -- Day5基础知识
css准备工作
1、清空默认边距和样式；
2、设置正文的默认样式；
3、设置超链接的默认样式；
css准备工作
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像素的上边框或上内边距。
- 可以为父元素添加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:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
盒子阴影属性
