盒子模型
- 局学习三大核心：盒子模型 浮动 定位
- 页面布局的过程：
1. 先准备好相应的网页HTML元素，网页元素基本上都是盒子
2. 利用CSS设置好盒子的样式，然后摆到相应的位置
3. 往盒子里装内容 - CSS盒子包括：边框，外边距，内边距，实际内容
1. 边框
要学习三部分： 边框的宽度（粗细）， 边框的样式（是实线或虚线） 边框的颜色
1. 边框的宽度（粗细） border-width
border-width :5px; 一般以像素作为单位
2. 边框的样式 border-style
属性值：
- solid 实线
- dashed 虚线
- dotted 点线
3. 边框的颜色 border-color
4. 边框的复合写法 border：无顺序 各属性之间以空格隔开
border: 1px solid red;
5. 边框的各边分开设置样式：
上边框： border-top:1px solid red;
下边框： border- boottom:
左边框： border- left:
右边框： border- right:
此处会出现简写或者合并的情况：
例如：要做一个盒子：只有上边框是红色，其余边框是蓝色
<style>
div {
width:300px;
height:200px;
/*border-width:5px;
border-style:solid;
border-color:red;*/
/*以上等同于border: 5px solid red;*/
/*border-top:5px solid red;
border-bottom: 5px solid pink;
border-left:5px solid red;
border-right:5px solid pink;*/
border : 5px solid blue;
border-top: 5px solid red;
/*以上代码不可以出现颠倒顺序，因为相同的选择器会用层叠性解决冲突部分，就近原则*/
}
</style>
</head>
<body>
<div>
</div>
</body>
6. 表格的细线边框： border-collapse
在对表格进行css设置时除了给table 设置边框之外，还要所以还要给单元格进行边框设置, 可以采用并集选择器 table,td{} 来设置边框 但注意不要给单元格设置高和宽
但是发现表格里面的边框是比较粗的，因为它是两个单元格重合在一起，就像两个td的边框都是1px,一重合就是2px了
border-collapse 属性可以控制单元格的边框
使用： border-collapse：collapse； 合并单元格的边框
<style>
table {
width:"400";
hight:"400";
/*原来html中的 width height border 现在都可以在css中进行设置*/
}
table,td{
border : 1px solid blue;
/*此时，发现表格只有外围的边框，里面没有分行和列，所以还要给单元格进行边框设置*/
/*控制单元格的边框 别忘记了th也要设置*/
border-collapse:collapse;
}
</style>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="2">
<thead>
<tr>
<th colspan="3">表格的细线边框</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
7. 盒子的边框会影响盒子的大小，若盒子加了边框，盒子的高和宽都要加上边框的2倍
2. 内边距 padding
- 盒子的内容与盒子的边的距离
padding-top : 上内边距
padding- bottom : 下内边距
padding-left : 左内边距
padding-right : 右内边距
2. 简写形式
-
padding:5px; 一个值，代表上下左右都有5像素的内边距
-
padding:5px 10px; 两个值，代表上下内边距是5像素，左右内边距是10像素
-
padding:5px 10px 20px 三个值，代表上边距5px, 左右边距10px 下边距20px
-
padding:5px 10px 20px 30px 四个值， 代表 上，右，左，下（按顺时针）
-
给盒子设置内边距也会增加盒子本身的大小，宽=原来width+2倍的（内边距）
通过在盒子的width或heigh上减去多出来的内边距来保持盒子的大小
4. padding影响盒子的好处，巧妙利用：
要做新浪的导航栏：导航栏里每个模块的字数不一样多，若直接给每个模块设置宽度，因为里面的字数不同，文字与盒子懂的边的距离会不同，导致文字有点偏，不给盒子固定的宽度，直接给盒子合理的内边距padding，内边距会撑开盒子
<title>新浪导航栏</title>
<style>
.nav {
height:41px;
border-top:3px solid #ff8500;
border-bottom: 1px solid #CCC;
background-color:#FFF;
line-height:41px;/*行高等于盒子高度，文字垂直居中*/
}
/*若想给超链接a指定高度，因为a是行内元素，此时必须要转换为行内块元素*/
.nav a{
font-size:12px;
color:#666;
text-decoration:none;
display:inline-block;
height:41px;
padding: 0px 20px;
/*此时a也是一个个的小盒子，给他设置高度，上下内边距为0，左右内边距是20 使用伪类选择器给a 鼠标经过时的背景和字体变色 */
}
.nav a:hover{
background-color:#666;
color:#CF3;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">新浪</a>
<a href="#">导航</a>
<a href="#">新浪航</a>
<a href="#">手机端导航</a>
</div>
</body>
5. padding不会撑开盒子的情况：不给定盒子的高度和宽度
3. 外边距：margin(盒子与盒子间的距离)
- margin-top 上边距
margin-bottom下边距
margin-left 左边距
margin-right 右边距 - margin的简写：（与padding相同）
margin：x; 盒子的上下左右的外边距都是x;
margin：x,y; 盒子的上下x, 左右y;
margin：x y z; 盒子的上x 左右y 下z;
margin：x y z w; 盒子的上x，右y , 左，下; - 盒子模型由内到外：内容 内边距 边框 外边距
- 外边距可以让块级盒子水平居中
1. 首先，盒子必须指定了宽度（width）
2. 盒子的左右的外边距都设为auto(自动的意思)
3. 写法： margin: 0 auto; - **使行内元素或者行内块元素水平居中，要给其父元素添加 text-align:center 行内元素指的是文字段落，行内块元素用的最多指的是图片水平居中对齐 **
<style>
.one {
width:900px;
height:500px;
background-color:pink;
margin: 0 auto;
}
.two {
width:900px;
height:500px;
background-color: #CCC;
text-align:center;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two">
<span>会好的，一切都在向好的发展 </span>
<img src="sa.jpg">
</div>
</body>
6. 定义块元素的垂直方向的外边距合并常见的现象说明：
- 相邻块元素垂直外边距的合并：
当上下相邻块元素相遇时，若上面的元素有下外边距，下面的元素有上外边距，则他们之间的垂直间距并不是二者的边距之和，而是取两个值中的较大者
解决方案：尽量只给一个盒子添加margin值 - 嵌套块元素垂直外边距的塌陷：
对于两个嵌套关系(父子关系)的块元素，若父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案： 1. 可以为父元素定义上边框，若怕影响外观，可以令边框的颜色是透明的， border: 1px sold transparent;
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden;(1与2都增大盒子本身的大小，此方法最好用)
4. 还有其他：例如：浮动，固定，绝对定位的盒子不会有塌陷，之后总结 - 清除内外边距
网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致，在布局网页前，首先要清除网页元素的内外边距，这也是设计网页的css的第一句代码
使用通配选择器
<style>
* {
padding:0;
margin:0;
}
注意：行元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了
4. 补充：（新增的内容）
1. 圆角边框： border-radius
- 属性值是圆角所在的小圆的半径，数值越大，弧度越来越大
属性值是 像素值或者百分比
border-radius:50px; - 当想要一个圆形的盒子时：
首先需要一个正方形的盒子，然后设置它的圆角边框border-radius 是它的边长的一半就可以了,或者写百分比：50%
<style>
div{
width:400px;
height:400px;
background-color:pink;
margin: 0 auto;
border-radius: 200px;
或者 border-radius: 50%;
}圆形的盒子
}
</style>
3.圆角矩形：
首先需要一个矩形的盒子，然后设置它的圆角边框border-radius 是它的高度的一半就可以了 不可写百分比：50%
4. 可以设置不同的圆角：该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角，（顺时针）
也可以设置：
border-top-left-radius:左上角
border-top- right-radius:右上角
border-bottom-right-radius:右下角
border-bottom-left-radius:左下角
2.盒子阴影： box-shadow: h-shadow v-shadow;(可取5个属性值)
属性值：h-shadow 和 v-shadow 是必须的属性，
h-shadow 必须的属性，水平阴影的位置（影子在x轴上的取值,取值变大往左移动），允许负值
v-shadow 必须的属性， 垂直阴影的位置 （影子在 y轴上的取值，取值变大往 下移动），允许负值
blur 可选，指的是影子的模糊距离（影子是模糊的还是显得实心的）
spread 可选，指的是影子的尺寸（影子的大小）
color 可选，指的是影子的颜色，一般取半透明 rgba(0,0,0,n), n可取0到1的小数值
inset 可选，指的是外部影子（outset）改为内部阴影
但默认的是外部影子（outset），一般用的也是外部阴影，且outset 不允许写
若只写box-shadow: h-shadow v-shadow，此时其他的属性取默认值，就是不太好看
盒子阴影不占用空间，不会影响其盒子排列
原先盒子没有影子，当我们鼠标经过盒子就添加阴影效果
不仅仅超链接可以添加鼠标经过的效果，任何盒子都可以添加
<style>
div{
width:400px;
height:400px;
background-color:pink;
margin: 0 auto;
border-radius: 50% ;
}
div:hover{
box-shadow:10px 10px 10px -4px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div></div>
</body>
3. 文字阴影 text-shadow: h-shadow v-shadow;(可取4个属性值)
属性值：h-shadow 和 v-shadow 是必须的属性，
h-shadow 必须的属性，水平阴影的位置（影子在x轴上的取值,取值变大往左移动），允许负值
v-shadow 必须的属性， 垂直阴影的位置 （影子在 y轴上的取值，取值变大往 下移动），允许负值
blur 可选，指的是影子的模糊距离（影子是模糊的还是显得实心的）
color 可选，指的是影子的颜色
text-shadow : 5px 5px 5px rgba(0,0,0,0.3);
