1、盒模型
盒模型： 在网页中 基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型。重要的属性： width,height,padding,border, margin
盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充，内边距，壳子-边框），content（内容区域）
width: 指的是内容的宽度，而不是整个盒子真实的宽度；height: 指的是内容的高度，而不是整个盒子真实的高度。
做一个宽度402*402的盒子，你应该如何设计？盒模型的计算
盒模型的计算 内容
1 2 3 4 5背景 6 7 20 21 22 23 24
padding
padding:内边距 控制内容到边框的距离
1.只写一个padding代表四个方向，也可以单独指定某一个方向
2.元素设置了padding值是额外加在原来大小之上的width+padding。如果不想改变实际大小，那就在width-padding对应方向的值
3.padding是添加给父级的，改变的是父级包含的内容的位置，自身位置不变
4.简写方法 1）一个值：4个方向 2）两个值：上下 左右 3）三个值：上 左右 下 4）四个值：上 右 下 左（顺时针方向）
注意：padding不支持负值
Title 我非常地幸运，能从那些对这一点深信不疑的人身上学习，他们清楚地知道改变世界的起点是 “跟随一种远见卓识，而不是某一条道路”。这就是我的朋友和导师——史蒂夫·乔布斯。 乔布斯的远见便是，伟大的想法从拒绝接受事情原本的样子中诞生出来。这些原则在今天依旧指导着苹果公司的员工。
padding 123
一些标签默认有padding
body有默认的margin：8px， 比如说通常我们做站的时候，要清除默认的padding，margin *它的效率不高。所以我们要使用并集选择器来选中页面中应有的标签（不同去背记，因为有人已经给咱们写好了这些清除默认的样式表） 百度一下reset.css body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } border
边框样式
1.border会改变元素的实际大小； 2.背景色会渲染到border区域
四个值： 上 右 下 左 顺时针 border-style:dotted dashed double solid;三个值： 上 左右 下两个值： 上下。左右一个值： 四个方向
Title
用border制作小三角形
Title
margin
margin： 外边距，控制元素与元素之间的距离。
1）margin 的4个方向
2）margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，但是也属于盒子的一部分
3)margin是添自身的,如果哪个想要改变自己的位置，就给谁添加margin
html的部分标签自带margin padding p body ul
相邻两个元素或者嵌套时都会遇到这样的问题：一个是往上走一个往下走，它们的外边距是相遇了，就会形成一个外边距，它们的外边距会进行合并（这是一种效果，不是人为的），当这两个值是以最大值为基准进行设置的，就是说如果我的外边距是20，它的是40，就以它的为基准进行设置。如何解决呢？可以给它设置个border：见下面，这样就设置成100了
margin
在有父子关系的时候
margin
margin
子元素margin-top如何影响父元素：https://blog.csdn.net/sinat_27088253/article/details/52954688
margin塌陷问题
Title 内容1 内容2
margin 0 auto
1.使用margin: 0 auto;水平居中盒子 必须有width，要有明确width，如果没有会继承父盒子宽度，靠父盒子来填充它的宽度； 文字水平居中使用text-align: center; 2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 不能用了 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
Title 文字
善用父padding，而不是margin
1 2 3 4 5Title 6 29 30 31 3233 3435 36
什么是标准文档流 宏观的讲，我们的web页面和ps等设计软件有本质的区别 web 网页的制作 是个“流”像水流一样， 从上而下 ，像 “织毛衣” 而设计软件 ，想往哪里画东西 就去哪里画 标准文档流下 有哪些微观现象？ 1.空白折叠现象；多个空格之间或者只要换行了都被当做一个空格 2.高矮不齐，底边对齐； 3.自动换行，一行写不满，换行写。
2、display的用法
display1.控制HTML元素的显示和隐藏 2.块级元素与行内元素的转换。display:block（块级）默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。display:inline（行内）行内元素只要设置了display: inline，那么元素的width、height、margin-top、margin-bottom和 float属性都不会有什么影响。display:inline-block（行内块级）行内块元素同时具有行内元素和块级元素的特点。display:noneHTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
块级元素特点：display:block;1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。行内元素特点：display:inline;1、和其他元素都在一行上；2、元素的高度、宽度及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变。行内块状元素的特点：display:inline-block;1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置
块级元素和行内块元素的转换
Title 内容1内容1内容2alex kris
display 123块级元素234百度一下 行内元素行内块状元素
3、浮动
浮动产生的效果
先来了解一下block元素和inline元素在文档流中的排列方式。block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。float属性值：1、left：左浮动 左侧为起始，从左向右排列2、right：右浮动 右侧为起始，从右向左排列3、none ：不浮动，默认不浮动浮动产生的影响浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止浮动的特性文档流是：可见元素在文档中排列位置，元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。1.浮动会使元素脱离文档流2.浮动会使元素提升层级3.浮动可以使块元素在一行排列，不设置宽高的时候，可以使元素适应内容 4.浮动可以使行内元素支持宽高
浮动 123456789111213
浮动是css里面布局最多的一个属性 效果： 两个元素并排了，并且两个元素都能够设置宽度和高度 浮动想学好：一定要知道它的四个特性： 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有“字围”效果 4.收缩的效果
浮动的元素脱标
Title 小红小黄span标签1 span标签2
浮动元素互相贴靠
Title 123
浮动元素字围效果
所谓字围效果： 当div浮动，p不浮动 div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果 关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则 永远不是一个盒子单独浮动，要浮动就要一起浮动。
Title 我们都可以从他们的例子中学习。如果你希望改变世界，你必须激起你的无畏。现在， 如果你像我毕业那天一样，也许你并不感到无所畏惧。也许你正在考虑你希望得到的那份工作，或者想知道你要住到哪里，或者如何偿还学生贷款。 这些，我都知道，它们是实实在在的忧虑。我也有这些忧虑，但不要让这些烦恼阻止你做出改变。 无畏意味着要勇敢迈出第一步，即使你不知道它将你引至何处。这意味着被更高尚的目标所驱动，而不是掌声。无畏意味着当你远离人群、站在别处时， 才会发现自己的特性，这将比你在众声喧哗中获得更多。 如果你想加快速度，就要不惧怕失败；如果你想与他人互相倾听和交谈，就不要担心被拒绝；如果你举止得体，充满善意，即使没有人看到，你期待的一切也会来到。 对你们来说，现在是时候在前进的道路上添砖加瓦了。也是时候，让我们所有人共同前进了。同时，未来该由你们带路了。 谢谢你们， 祝贺你们，2018届毕业生。
浮动元素紧凑效果就是收缩
收缩：就是一个浮动元素。如果没有设置宽度width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
产生的浮动效果，为什么要清除浮动？
浮动的特性
浮动特性 哈哈哈哈爽歪歪
浮动产生的问题和解决方法
父元素不设置高度，子元素设置浮动之后，不会撑开父元素的高度,那么此时父盒子没有高度了。如果在次父盒子下面还有一个标准流的盒子，那么就会影响页面的布局。所以我们要解决浮动带来的页面布局错乱问题------清除浮动。
解决方法：
1.给父元素固定高度。不灵活 2.在浮动元素最后加一个空的块元素，且块元素不浮动，设置其属性为clear：both 结构冗余 3.常用方法：.wrap:after{ clear: both; content: ""; height: 0; visibility: hidden; display: block; }4.给父盒子 添加overflow:hidden属性 Title
清除浮动1：给父盒子设置高度
Title
- python
- web
- linux
清除浮动2 clear both
给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响。
内墙法 ，无缘无故加了div元素 结构冗余
- Python
- web
- linux
清除浮动3 伪元素清除法 （常用）
Title
- python
- web
- linux
清除浮动4 overflow hidden（常用）
伪元素清除法（常用）
- Python
- web
- linux
overflow
Title 我们都可以从他们的例子中学习。如果你希望改变世界，你必须激起你的无畏。现在，如果你像我毕业那天一样，也许你并不感到无所畏惧。 也许你正在考虑你希望得到的那份工作，或者想知道你要住到哪里，或者如何偿还学生贷款。这些，我都知道，它们是实实在在的忧虑。我也有这些忧虑，但不要让这些烦恼阻止你做出改变。 无畏意味着要勇敢迈出第一步，即使你不知道它将你引至何处。这意味着被更高尚的目标所驱动，而不是掌声。无畏意味着当你远离人群、站在别处时，才会发现自己的特性， 这将比你在众声喧哗中获得更多。
练习京东导航栏（用float）
