发表于： 2018-07-24 22:39:59
1 586
今天完成的事情:
1.写任务14；
2.学习组件库；
3.了解js基础知识
明天计划：
1.继续写任务14；
2.学习自适应导航栏；
遇到的问题：
研究如何不通过bootstrap实现响应式导航栏；
收获总结：
在IE6-8和FF3.0-浏览器版本不支持伪类选择器 nth-child() ，须声明 <!DOCTYPE>
:nth-child()选择某个元素的一个或多个特定的子元素；可以按下列这几种方式进行选择：
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
:fist-child选择属于其父元素的首个子元素
:last-child选择某个元素的最后一个子元素
// 这里要注意fist-child选择的是属于其父元素的首个子元素
eg: p:first-child {background-color:yellow;}
</head>
<body>
<p>这个段落是其父元素（body）的首个子元素。</p>
<h1>欢迎访问我的主页</h1>
<p>这个段落不是其父元素的首个子元素。</p>
<div>
<p>这个段落是其父元素（div）的首个子元素。</p>
<p>这个段落不是其父元素的首个子元素。</p>
</div>
<p><b>注释：</b>。</p>
</body>
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
:nth-last-child()选择器和前面的:nth-child()很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，
他只要是从最后一个元素开始算，来选择特定元素。
eg：li:nth-last-child(4) {background: red;}/*把倒数第4个li的背景设为红色*/
2.了解BFC布局：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，一个环境。
布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
触发条件：满足下列条件之一就可触发BFC
1.根元素，即HTML元素
2.float的值不为none
3.overflow的值不为visible
3.display的值为inline-block、table-cell、table-caption
5.position的值为absolute或fixed
BFC的作用：
自适应两栏布局
可以阻止元素被浮动元素覆盖
可以包含浮动元素——清除内部浮动
分属于不同的BFC时可以阻止margin重叠
eg:
清除内部浮动:
float: left; }
.box { overflow: hidden ; } // 触发BFC效果后；
3.学习js基础知识：
基本数据类型:
Number --> 数字类型，包括整型和浮点型。
String --> 字符串。
Boolean --> 布尔型，true / false.
Undefined类型 --> 该类型只有一个值，即undefined，当声明的变量未初始化时，该变量的默认值
是undefined，当函数无明确返回值时，返回的也是值undefined。
Null类型 --> 只有一个专用值 null，用于表示尚未存在的对象，如果函数或方法要返回的是对象，那么
找不到该对象时，返回的通常是 null。
数据类型转换:
JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换
数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false
返回列表
评论