<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
内容区：content
内边距：padding
边框：border
外边距：margin
element:元素
边框(border)
<!--
width:内容区宽度、
height：内容区高度
盒子可见大小由内容区、内边距和边框共同决定，
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
可见框高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
为元素设置边框，必须制定三个元素：
border-width:边框宽度，
指定四个值：上，右，下，左（顺时针） 不仅限于边框宽度
指定三个值：分别设置给 上 左右 下
指定两个值：分别设置给 上下 左右
border-xxx-width:top right bottom left
border-color:边框颜色
border-xxx-color:
border-style:边框样式
border-xxx-style:
none:默认值，无边框
solid:实线
dashed：虚线
dotted:点状边框
double：双线
ps:大部分浏览器边框宽度高度都有默认值，边框样式默认为none,所以单写样式时边框会显示。
border：
可同时设置样式，颜色，样式，且无顺序要求，但同时设置四个边
border-xxx：
单独设置四个边样式，规则和border一样，只对一个边生效
例：设置三边样式，另一边无样式
border:red solid 10px;
border-top:none;
-->
内边距(padding)
<!--
内容区与边框之间距离
内边距会影响可见框的大小，元素背景会延伸到内边距
padding-top:
padding-left:
padding-right:
padding-bottom:
使用padding同时设置四个内边距，规则与边框相同
-->
外边距(margin)
<!--
·盒子与盒子之间的距离，不会影响盒子可见框位置，会影响盒子位置
·页面中元素会靠左摆放，设置上、左外边距会改变盒子自身位置，设置下、右会改变邻近盒子位置
·外边距可设置负值，元素会向反方向运动
·margin还可以设置为auto,一般只设置为水平方向的margin,如果只指定左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距设置为auto，则外边距默认为0。如果同时设置left和right为auto,则会将两侧外边距设置为相同值，使子元素在父元素中水平居中。
·相邻兄弟元素 在垂直方向 外边距会发生外边距重叠现象，取外边距的最大值，而不是求和。
·父子元素的垂直边距相邻了，设置给子元素的外边距会传递给父元素
·ps:解决外边距重叠：
使用元素隔开
为盒子添加样式
父元素添加边框，内边距
子元素添加外边框
margin-top
margin-right
margin-bottom
margin-left
margin：简写，规则等同于padding
margin:0 auto;
-->
默认样式
<!--
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding
而他的默认样式，正常情况下我们是不需要使用的
所以我们在编写样式之前需要将浏览器中的默认的margin和padding去掉
清楚浏览器默认样式
*{margin:0;
padding:0;
}
-->
<!--
·垂直方向内边距，内联元素可以设置为垂直方向内边距，但是不会影响页面布局
·为元素设置边框，
内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
·水平外边距
内联元素支持水平方向的外边距
·为右边的元素设置一个左外边距
水平方向的外边距不会重叠，而是求和
·内联元素不支持垂直外边距，支持水平方向的内边距
-->
display
<!--
将一个内联元素变成块元素：
通过display样式可以修改元素的类型：
可选值：
inline:可以将一个元素作为内联元素显示
block:可以讲一个元素设置为块元素显示
inline-block:讲一个元素转换为行内块元素
可以使一个元素既有行内元素的特点，又有块元素的特点
既可以设置宽高，又不会独占一行
none：不在页面中显示元素，并且元素不会在页面中继续占有位置
visibility（可以用来显示元素的隐藏和显示的状态）：
visible：默认值，元素是可见的
hidden:元素是不可见的，隐藏
ps:使用visibility；hidden；隐藏的元素虽然不会在页面中显示，但是它的位置依然还在。
-->
overflow
<!--
子元素默认存在于父元素的内容区中，理论上讲子元素的最大等于附院故事内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称之为溢出的内容
父元素默认1是将溢出内容，在父元素外边显示
通过overflow,可以设置父元素如何设置溢出内容
可选值：
visible:默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
hidden：溢出的内容会被修剪，不会显示
scroll:为父元素添加滚动条，通过拖动滚动条来查看完整内容
该属性不论内容是否溢出，都会添加水平和垂直方向的滚动条
auto:根据需要自动添加滚动条
需要水平就加水平，需要垂直就加垂直，都不需要就都不加
-->
文档流
<!--
文档流处在页面最底层，他表示的是一个页面中的位置，
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自伤向下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列
如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
ps:当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框的大小
而是自动修改宽度和高度，以适应内边距
-->
</body>
</html>
11-23
77
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
