发表于： 2018-10-20 22:37:15
1 682
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
用sass手写了一边栅格布局
不用bs写完了页面页脚，下拉菜单
明天计划的事情：（一定要写非常细致的内容）
完成包括轮播图在内的第一个页面
遇到的问题：（遇到什么困难，怎么解决的）
下拉菜单时候，点击button按钮出现菜单 不能点击就消失了
解决方法。放入一个div中。点击父级元素 出现子级元素。但是这样我的按钮做的没有意义~~
今天的footer，a，header等标签都不能被子元素高度撑起来，需要给他们设置display：inline-block；
但是后续看了下 他们有默认属性block，不应该撑不起来。~~~~
收获：（通过今天的学习，学到了什么知识）
@if
@if指令是一个SassScript，它可以根据条件来处理样式块，如果条件为true返回一个样式块，反之false返回另一个样式块
@for
第一种形式是：
@for $var from <start> through <end>
从<start>开始循环，到<end>结束，非常简单明了。来看一个简单的示例：
第二种形式是：
@for $var from <start> to <end>
循环从<start>开始，一直遍历循环到<end>结束。这种形式的循环只要碰到<end>就会停止循环（将不会遍历<end>值）。我们来看一个示例：
@each
@each指令形式：
@each $var in <list>
如果你没有接触过列表，也不要紧，他也非常简单，就是把２变成１。
在下面的例子中你可以看到，$var就是一个变量名,<list>是一个SassScript表达式，他将返回一个列表值。变量$var会在列表中做遍历，并且遍历出与$var对应的样式块。
@while
@whild指令也需要SassScript表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。著作权归作者所有。
关于空格符的使用
| 字符以及HTML实体 | 描述以及说明 |
|---|---|
| 这是我们使用最多的空格，也就是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用 html实体表示才可累加。为了便于记忆，我总是把这个空格成为“牛逼(nb)空格(sp – space)”，虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在inline-block布局中会搞些小破坏，在两端对齐布局中又是不可少 的元素。是个让人又爱又恨的小东东。 |
  | 该空格学名不详。为了便于记忆，我们不妨就叫它“恶念(e n-ian)空格”。此空格传承空格家族一贯的特性：透明滴！此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。 |
  | 该空格学名不详。为了便于记忆，我们不妨就叫它”恶魔(e m-o)空格”。此空格也传承空格家族一贯的特性：透明滴！此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。 |
  | 该空格学名不详。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。我目前是没用过这个东西，这里亮出来是让其过一下群众演员的瘾。 |
block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。
- display:block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
- display:inline
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
- display:inline-block
- 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。
返回列表
评论