文章目录
垂直方向布局
宽度width是auto时，子元素会占满父元素；
高度height是auto时，父元素的高度由其内容的高度决定；
垂直方向的等式：
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom = 父元素的高height
高度产生溢出现象
如果不指定父元素高度，则父元素自动适应子元素的高度，确保能容纳所有的子元素；
如果指定父元素高度，则指定多少就是多少；此时如果子元素的大小超过了父元素，则会导致子元素从父元素中溢出。溢出的子元素不会影响到页面的布局。
关于溢出采用overflow处理溢出内容
overflow属性值介绍：
| 属性值 | 说明 |
|---|---|
| visible 默认值 | 溢出内容不会被裁剪，而是直接在父元素外部显示 |
| hidden | 溢出的内容会被裁剪，超出父元素的不会显示 |
| scroll | 生成滚动条，可以通过滚动条查看完整内容 （这个属性挺笨的，不管有没有溢出都会显示滚动条的边框） |
| auto | 根据需求生成滚动条 |
外边距
作用： 用于检测元素在水平方向是否满足水平布局中的等式要求，属于过度约束，浏览器会自动调整右外边距的大小
具体设置情况说明：
- 设置margin、margin-right = 0 没有效果；（浏览器自动调整右外边距）
- 设置margin-top、margin-bottom = auto也没有效果；
- 设置margin-right、margi-left = auto，或者 margin auto ，或者 margin 0 auto，实现子元素居中；
- 设置margin-top、margin-left调整自己，而设置margin-bottom、margin-right是调整其他盒子；
外边距折叠现象
案例：
box1和box2一个设置下外边距100和上外边距100，理论上理解为两者之间的距离为200，但实际中却是两者之间距离100；
案例证明：
外边距会存在折叠，垂直方向相邻的外边距，会发生外边距折叠现象。
注意：这个效果是好的，假如没有上述外边距折叠现象，两个p元素分别有下外边距和上外边距16，若相加则会造成两者之间距离过大。
外边距折叠原理
- 兄弟元素相邻的外边距，会取两个外边距中的最大值。（都是正值）
- 如果存在负外边距，则会取绝对值最大的。（都是负值）
- 如果是一正一负，则取两个值的和。（一正一负）
父子元素外边距的折叠
案例：
将box2（子元素）向下移动100px，采用margin-top: 100px; 结果父子元素都向下移动了100px。
外边距的折叠
- 兄弟元素：兄弟元素相邻会取最大值；
- 父子元素：父子元素的相邻垂直外边距，子元素的外边距会传递给父元素。
解决子元素外边距会传递给父元素的问题： - 不使用外边距而使用padding修改
- 将父子元素之间放一个别的东西隔开，使它们的外边距不相邻
- 实际上，父子元素之间还隔着边框和内边距，只要对父元素的它们进行设置即可隔开
注意：上述方式解决都不是很好，目前只了解这种现象即可。
文档流
概念：
文档（document），就是页面；
文档流（标准流、常规流）—是网页中的一个位置，默认情况页面中的所有元素都在文档流中排列。
对于中文和英文，中文的单位是汉字，可以在任意字换行；而英文的单位是单词，只有当出现空格时才认为不是一个单词才会换行。对于连续的字母，系统默认是一个单词所以不还行。
元素在文档流中的特点：
| 元素名 | 说明 |
|---|---|
| 块元素 | 自上而下进行排列（独占一行） 默认宽度和元素一样（值是auto，效果是充满） 默认高度被内容撑开 |
| 行内元素 | 自左向右水平排列，如果一行中不足以容纳所有的元素，则切换到下一行继续自左向右水平排列 默认高度和宽度都是被内容撑开 |
内联元素的盒模型
- 内联元素不支持设置宽度和高度
- 内联元素支持水平方向的内边距padding、边框border、外边距margin；
- 内联元素可以设置垂直方向的内边距、边框，但是不会影响布局；设置的padding可能会盖住某些元素；
- 水平方向相邻的外边距不会重叠，而是求和
- 关于子元素与父元素之间的相对位置的设置，margin和padding都是可以相互替换的，用子元素的margin还是父元素的padding取决于具体的情况
display
案例：
想给超链接设置一个宽度和高度使它变大一点。由于超链接a标签是行内元素，不能通过width和height属性直接设置宽高。
但是可以在style标签中使用display属性，设置值是block实现。
<style>
a{
display:block;
}
</style>
概念：display 指定元素所产生的框的类型
可选值：
| 可选值 | 说明 |
|---|---|
| inline | 行内元素 |
| block | 块元素 |
| inline-block | 行内块元素 |
| none | 元素不在页面中显示 |
| table | 元素会作为一个表格显示 |
| flex | 元素会作为一个弹性容器显示 |
| inline-flex | 元素会作为行内弹性容器显示 |
解释：
- inline-block：既有行内元素的特点，不独占一行，又有块元素的特点，可以设置宽高。
将块设置成行内块这个模式，则可以实现并排布局。但是两个块之间会有空白条，原因是body中书写两个元素的时候换行默认产生的空白被显示出来了。 - none：使用场景（课程例子：京东页面中的下拉菜单，当鼠标放在元素上的时候显示下拉菜单）
visibility
作用： 让元素不显示的方式除了display：none，还有visibility，它也可以设置元素显示的状态。
可选值：
| 可选值 | 说明 |
|---|---|
| visible 默认值 | 元素正常显示 |
| hidden | 不显示元素，但是元素依旧占据位置 |
隐藏元素的visibility和display的区别
display：none 设置的元素：隐藏之后就和没有存在过一样。
visibility：hidden 设置的元素：不显示，但是依旧占据位置。
默认样式
浏览器的框对于我们来说就是视口，即能看的见的部分。
具体的默认样式：
- 加入div发现，div和浏览器的上边框和左边框都有空隙；经过直接打开html文件发现，空隙是由于body设置的。
- 加入p发现，每两个p之间都有空隙；
- 加入lu和li，发现li前面有空隙；
说明： - 为了确保网页中在没有样式的情况下，也可以浏览，所以浏览器都会为网页设置一些默认的样式，这些默认样式对于我们的开发来说是没有任何作用，并且不同的浏览器所设置的默认样式也是不同的，所以在开发中我们要做的第一件事往往就是去除掉浏览器的默认样式。
- 关于样式的去除，已经有权威人士写好文档，只需要调用即可（P5文件夹css中）——reset是直接重置，而normalize是统一样式。
块和内联元素
块元素（block）：用于页面的布局；
行内元素（inline）：主要用于在页面中选中文字；
注意：
- 一般情况下只会在块中去放内联元素，不会向内联元素放块元素。
- p元素（块元素）中不能放任何的块元素；
- a元素（内联元素）里边什么都能放，除了它自己；
练习
练习1：下拉菜单
需求：想要的效果是页面只显示一级菜单，当鼠标移到一级菜单时显示二级菜单；
思考对谁设置hover？对一级菜单的li设置hover。当鼠标移动到一级菜单的li时，显示二级菜单（即便鼠标移动到二级菜单依旧显示，因为二级菜单是li的子元素）；
隐藏的元素和绑定hover的元素必须是祖先和后代的关系，不然只使用css是不能实现，但是js可以实现。
此案例中的隐藏元素是 二级菜单，绑定hover的是 一级菜单的li。
/* 设置二级菜单隐藏 */
.inner{
display: none;
}
/* 给outner的li绑*/
/*
.outner > li:hover .inner{
display: block;
}
*/
/* 给a绑也可以，但是在功能上不方便。当鼠标移出a时则二级菜单隐藏；*/
.outner > li > a:hover + .inner{
display: block;
}
练习2
需求：设置将三个图片元素竖排放置。
思路：使用列表ul的li放图片标签img。
<head>
<style>
.img_list{设置图片最外侧容器的大小}
.img_list li{设置图片之前的边距}
.img_list img{设置图片的样式}
</style>
</head>
<body>
<ul class="img_list" >
<li><img src="图片路径1"></li>
<li><img src="图片路径2"></li>
<li><img src="图片路径3"></li>
</ul>
练习3
需求：设置关于很多超链接的一个纵向菜单栏。
思路：使用ul和li完成，其中li中有a标签。
<head>
<style>
.text_list{}
.test_list li{}
.test_list li:hover{设置超链接鼠标选中的样式}
.test_list li a{设置超链接文字的具体样式}
.test_list li a：hover{设置选中超链接的样式}
</style>
</head>
<body>
<ul class="text_list">
<li><a herf=""></li>
<li><a herf=""></li>
</ul>
</body>
练习4
需求：主要应用了盒子属性等内容。
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
