本周听了B站《尚硅谷前端HTML5视频_HTML & CSS 核心基础教程》之盒模型部分的内容，已经习惯了两倍速播放，下面是笔记
盒子模型
使用width来设置盒子内容区的宽度；使用height来设置盒子内容区的高度；
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定
边框（border）
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度，border-color:边框颜色，border-style:边框的样式
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，则四个值会分别设置给 上、右、下 、左（顺时针），按照顺时针的方向设置的；如果指定三个值，则三个值会分别设置给上、左右、下；如果指定两个值，则两个值会分别设置给 上下、左右 ；如果指定一个值，则四边全都是该值
除了border-width，CSS中还提供了四个border-xxx-width，xxx的值可能是top right bottom left
专门用来设置指定边的宽度
设置边框的颜色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色，border-xxx-color
设置边框的样式，可选值：
- none，默认值，没有边框
- solid 实线
- dotted 点状边框
- dashed 虚线
- double 双线
style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边。
设置边框：大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none
border
- 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色，而且没有任何的顺序要求
- border一指定就是同时指定四个边，不能分别指定
border-top 、border-right、 border-bottom、 border-left可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
内边距（padding）
指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：
padding-top
padding-right
padding-bottom
padding-left
来设置四个方向的内边距
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
使用padding可以同时设置四个边框的样式，规则和border-width一致
外边距（margin）
指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。
盒子有四个方向的外边距：
margin-top
margin-right
margin-bottom
margin-left
由于页面中的元素都是靠左靠上摆放的，
所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置
margin还可以设置为auto，auto一般只设置给水平方向的margin
如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto，则外边距默认就是0
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
以使子元素在父元素中水平居中
外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
规则和padding一样
垂直外边距的重叠
在网页中相邻的垂直方向的外边距会发生外边距的重叠
- 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
- 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
浏览器默认margin和padding
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
/*
* 清除浏览器的默认样式
*/
*{
margin: 0;
padding: 0;
}
网友评论