页面完成（一）

经过了这段时间的学习，已经学习完了HTML和CSS的大部分知识，可以简单的做出一个静态页面。

最大的感受是，知识非常的多，需要进行大量的练习来巩固。

这一周我尝试自己独立完成一个页面。但是过程非常难，常常让人很emo。呜呜！一晚上就只做了一个标题，真的需要大量的练习，而且还有很多小点需要注意，需要经常回顾之前的笔记，否则真的会遗忘的很快。希望下一周我可以完成这个页面。

大家有什么建议可以提出来，帮帮萌新，呜呜！

下面是我这周做页面时觉得需要注意的一些小点

1. 要紧跟在com后面加 /favicon.ico来查看网站的图标

2. 查找到图标后用

 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

来引用

3. 可以在html文件中导入需要的每个css文件，也可以导入本身的css文件，其他的放到css文件中用@import导入

4. 图片底部白边问题

原因 

因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p, q, y等字母，这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。

解决方法

1.）设置font-size为0

2.） 设置为块盒

3.）给图片加父元素，设置overflow：hidden

4.）设置verti-align:middle

5. 将元素隐藏的方法

1. ）overflow：hidden

2. ）通过设置元素大小，宽高设置为0（但是只是视觉上的）

3. ）z-index=-9999，再将自己设置为绝对定位

4. ）display：none

5. ）visibility：hidden

6. ）opacity：0

7.） 通过position，再用左右上下调位置，让其超出或者离开可视范围

6.BFC

1.） 名称：块级格式化上下文

2.）意义：

- 清除浮动

- BFC可以阻止标准流元素被浮动元素覆盖

- 利用BFC解决包含塌陷

- 解决外边距的塌陷问题(垂直塌陷)

3.） 使用方式： 触发方式：

给父级元素添加以下任意样式

- overflow: hidden;

- display: flex;

- display: inline-flex;

- display: inline-block;

- position: absolute;

- position: fixed;

4.） 规则：

- Box会在垂直方向，一个接一个地放置（从左上角开始排列）

- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（仅仅是垂直方向水平方向不会）

- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

- BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响，外面的也不受BFC区域里面的影响（设置的浮动的元素，脱离了文档流，正常的相邻的元素会跑到它下面）

- 计算BFC的高度时，浮动元素也参与计算（就是子元素设置浮动，脱离文档流，造成父元素高度塌陷，给父元素设置BFC，那么父元素高度就不会忽略浮动的子元素，从而高度就不会塌陷，这样理解，好像是BFC又把脱离文档流的元素，又拉回来了，但保持了浮动的特点）

7. 等边三角形

透明色transparent

设置  border-left: border-right  可以改变三角形底边长度

设置  border-bottom: 可以确定三角形的高

.two{
    border:80px solid;
   position: absolute;
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 130px solid transparent;
    border-right: 130px solid transparent;
    border-bottom: 225px solid green;
    top: -100px;
    left: 19px;
    /*设置  border-left: border-right  可以改变三角形底边长度
      设置  border-bottom: 可以确定三角形的高*/
}

好啦！这一周的分享就到这里啦！我们下一周同一时间同一地点不见不散！！！