CSS基础学习03

盒子是网页布局的关键点
（一）盒子模型有：元素内容、边框（border)、内边距（padding）、外边距（margin）
盒子里的文字和图片是内容区域
盒子的厚度是盒子的边框
盒子内容与边框的距离是内边距
盒子与盒子之间的距离是外边距
1、边框：border
边框的宽度在实际开发中都是跟px单位
例：border-width: 1px;
边框的样式：
solid：实线
dashed：虚线
dotted:点线
例：border-style: solid;
边框的颜色：border-color
边框的综合设置
border:border-width border-style border-color
但是顺序也没有具体要求
（1）边框可以单独指定样式，并不需要指定4个边框
border-top:
border-left:
border-right：
border-bottom:
（2）表格的细线边框
border-collapse:collapse:表示相邻边框合并在一起

2、内边距：padding
padding-left:左边距
padding-right: 右边距
padding-top：上边距
padding-bottom：下边距

padding的综合写法：
（1）padding: 10px;表示上下左右都是20内边距
（2）padding: 10px 20px;表示上下是10，左右是20
（3）padding: 10px 20px 30px;上10，左右20，下是30
（4）padding: 10px 20px 30px 40px; 上10，右是20，下是30，左是40（是一个顺时针值效果）
3、内核尺寸的计算（元素实际大小）
盒子的实际大小=内容宽度+内边距+边框
解决方法：内边距是一定要给的，我们只能改变内容宽度，因此就用内容宽度减去内边距=盒子的大小
特殊情况：若盒子没有写宽度，则padding不会撑开盒子
4、外边距：margin
其中综合写法和padding一样

（1）块级盒子居中对齐
让块级盒子居中对齐：1、必须有宽度（若没有了宽度，则就是统揽的宽度为百分之百，那谈何而来的居中对齐），
2、左右外边距设置为auto;
写法有三种：
<1> margin-left: auto;
margin-right: auto;
<2> margin:auto;
<3> margin:0 auto;
注意第二种中，就算上下写了auto ,但是并不会在正中间对齐，还是在上面对齐，所以上下指定了auto并没有用

（2）文字居中和盒子居中的区别：
盒子内的文字水平居中是 text-align: center;而且还可以让行内元素和行内块元素居中对齐

（3）插入图片和背景图片的区别：
<1> 插入图片我们用得最多，比如产品展示类，通过padding,margin来移动位置
<2> 背景图片一般用于小图标背景或者超大背景图片，背景图片只能通过background-position

（4）清除元素默认内外边距（重要！！！）
利用通配符：

• {
  margin: 0;
  padding: 0;
  }
  这句代码非常重要，在以后的CSS代码中是写在开头的一句。

注意：以后行内元素只设置左右内外边距，不设置上下内外边距

5、外边距合并
（1）相邻块元素垂直外边距的合并
当上下的两个块元素相遇时，如果上面的元素有下外边距margin-bottom,下面的元素右上边距magrin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,取两个值中的较大者这种现象被称为相邻元素垂直外边距的合并（也称外边距塌陷）

解决方法：尽量只给一个盒子添加margin值

（2）嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套元素的块元素，如果父元素没有上内边距级边框，父元素的上边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

解决方案：可以为父元素定义上边框
可以为父元素定义上内边距
可为父元素添加overflow:hidden

6、盒子模型布局稳定性
（1）大部分情况下内外边距可以混用，自己觉得那个方便就用哪个。

建议：优先使用宽度，其次使用内边距，再次使用外边距
width > padding（内边距） >margin（外边距）
原因：
margin会有外边距合并，在某些浏览器下会有Bug；
padding 会影响盒子的大小，需要进行加减计算（麻烦）其次使用
width没有问题，经常使用宽度剩余法和高度剩余法来做

7、去掉列表默认的样式
li {
list-style :none
}

拓展内容：
1、圆角边框：border-radius:length;
其中每一个值可以为数值或百分比的形式
技巧：让一个正方形变为圆形
例：
border-radius:50%
经常用这个写法

2、如果要做长方形的那种圆角矩形，要这样做
例：border-radius: 10px;
注意：只能给高度的一半，此时不能写百分数了

3、盒子阴影：box-shadow
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内\外阴影
一般都是默认外阴影，因此我们不用写内外阴影
注意：前两个属性必须写，其他的可以省略
例：box-shadow: 0 15px 30px rgba(0,0,0,.3);

CSS书写规范：
1、空格规范
选择器与{ }之间必须包含空格
属性的冒号后面和值之间必须要有一个空格
2、选择器规范
并集选择器，每个选择器声明必须另占一行
大括号的后面合格括号必须和属性值对齐
建议：一般选择器的嵌套不要大于三级
3、属性值定义完必须以分号结束