Box model
Box model four parts: the content area, borders, padding, margins; the first three together determine the size of the box visible box.
frame
To set the border element
.box1{
width:100px;
height:100px;
background-color red;
/ * Set the contents of the box width and height and the color area. * /
border-width:10px;
border-color:yellow;
border-style:solid;
/ * Set the border, three styles are indispensable, missing directly not show. * /
}
border-width
Border-width can be specified using four border width, respectively.
Specify four values: setting clockwise;
Specify three values: the left and right are provided to the next;
Specifying two values: are set to the up and down;
Specify a value: all four sides to this value.
border-width:10px 20px 30px 40px;
/ * The top border is 10px, right border is 20px, so *. /
// convenience, this custom rules as "4321."
// Digression: If you know 3421 ... hhh
border-color
4321 has the same principle:
border-color:red blue green;
/ * The top border of red, blue border around the lower border is green. * /
border-style
Border-style use to set the border style.
Optional values: none default value, no border;
solid solid line;
dotted dot;
dashed dotted line;
double double;
border-style with 4321 are:
border-style:solid dotted;``
/*上下边框为实线，左右边框为点状。*/
border 边框的简写形式
通过它可设置四个边框的样式、宽度、颜色（顺序无要求）。
boeder:red solid 10px;
/*这对四个边起作用。*/
border-top border-bottom border-right border-left可单独用来设置四边。
border:red solid 10px;
border-top:yellow solid 20px;
/*除了上边框为黄色实线20px，其余三边均为红色实线10px*。/
border:red solid 10px;
border-top:none;
/*常用的去除不要的边的方法。*/
内边距
内边距指盒子的内容区与盒子边框之间的宽度。
内边距会影响可见框的大小；
元素的背景会延伸到内边距；
即如果给元素添加背景，背景会应用于内容和内边距组成的区域。
可通过padding-top padding-bottom padding-right padding-left来单独设置四边之一。
<style type="text/css">
.box1{
width:100px;
height:100px;
}
.box2{
width:100%; /*创建子元素box2来占满父元素box1的内容区，
height:100%； *注意：不占内边距*/
}
</style>
外边距
外边距指当前盒子与其他盒子之间的距离；
不影响可见框的大小，但影响盒子的位置；
有四个方向的外边距：margin-top margin-bottom margin-right margin-left ；
设置上、左边距时，会改变盒子自身的位置；
设置下、右边距时，则会改变其他盒子的位置；
margin可设置auto；
若只指定左/右外边距的margin为auto，
则会将外边距设置为最大值；
若垂直方向设置为auto，则外边距默认为0；
即垂直方向的盒子会紧挨在一起。
常用的使元素自动在父元素中居中的方法：
将left和right同时设置为auto。
margin 外边距的简写形式
同样符合“4321方向规则”
margin: 0 auto;
/*将上下外边距设置为0，将左右外边距设置为auto，即这也是居中的写法。*/
垂直外边距的重叠
在网页中垂直方向的相邻外边距会发生外边距的重叠。
外边距的重叠指的是兄弟元素之间的相邻外边距会取最大值。
假设盒1和盒2为垂直方向的相邻兄弟元素，
a、给盒1设置底面外边距为100px，给盒2设置顶部外边距为100px。
那么两个盒子之间的效果还是100px。
b、把盒1设置底面外边距为100px，盒2的顶部外边距设置为200px，
那么两个盒子之间的距离就变成了200px(取最大值)。
若父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。
即给子元素设置上外边距为100px时，子元素和父元素保持相对位置一起下移100px。
解决途径：
法一：给父元素设置上边框，把父子隔开；
法二：把父元素的内边距设置成 “能使子元素下移到你想要位置 ”的数值。
常用去除浏览器默认样式的代码
*{
margin:0;
padding:0;
}
内联元素的盒模型
内联元素不能设置width和height；
能设置水平方向的内边距，也能设置垂直方向的，
但垂直方向的内边距不会影响页面的布局（不会挤掉，而是覆盖）；
能设置边框，水平、垂直效果同“内边距”；
支持水平方向的外边距，不支持垂直方向的。
display
可通过display样式来修改，将一个内联元素转化为块元素。
可选值：inline 将一个元素作为内敛元素显示；
block 将一个元素作为块元素显示；
inline-block 将一个元素转化为内联元素，使其既有内联元素的特点又有块元素的特点；
既可设置宽高，又不会独占一行。【典型：image】
none：不显示元素，且元素在页面中也不会继续占有位置。
visibility
通过visibility来设置元素的隐藏和显示的状态。
可选值：visible 默认值，元素默认在页面显示；
hidden 元素会隐藏，但在页面中继续占有位置（显示空白）。
overflow
父元素默认将溢出内容在父元素外显示。
通过overflow可设置父元素如何处理溢出内容。
可选值：visible 默认值 不对一处内容处理；
hidden 溢出内容会被修剪，即不显示；
scroll 为父元素添加滚动条，通过滚动条可查看完整内容，
该属性不管内容个是否溢出，都会添加水平和垂直方向的滚动条；
auto 会根据需求自动添加滚动条。
，
这些是我在看网课之后手打的笔记，然而学完整套视频之后发现有源码这种东西，枯了；如果你觉得这些知识点对你有一些帮助的话就给我一点回应叭，安慰我一下我这个小菜鸟呲呲。