前端知识点总结之css清除浮动

解释下浮动和它的工作原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1
2
3
4
5
6
7
8
9
10
11
12
1.使用空标签清除浮动。

   这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

2.使用overflow。

   给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。

   该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。
   一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

展开全文 >>

前端知识点总结之css居中方法

水平居中

  • 需要居中 inline 或者 inline-* 元素（如文字或者链接）？
  • 需要居中 block 类的元素？
  • 需要居中多个 block 元素？

垂直居中

  • 需要居中 inline 或者 inline-* 元素（如文字或者链接）？
  • 需要居中 block 类的元素？

既水平又垂直

  • 固定宽高
  • 不固定宽高

使用 flexbox

  • 水平居中
  • 水平居中 inline 或者 inline-* 元素

1. 你可以轻松的在一个 block 元素中水平居中一个 inline 元素，以下代码对 inline，inline-block，inline-table 和 inline-flex 等有效

1
2
3
.parent {
  text-align: center;
}

2. 水平居中 block 类的元素

1
2
3
4
5
在 block 元素被设定固定宽度的情况下，可以使用设置元素 margin-left 和 margin-right 的值为 auto 的方法实现水平居中。
.child {
  width: 400px;
  margin: 0 auto;
}

3. 水平居中多个 block 类的元素

1
2
3
4
5
6
7
8
9
通过 inline-block实现

.parent {
  text-align: center;
}
.child {
  display: inline-block;
  text-align: left;
}
1
2
3
4
5
6
通过 flexbox 实现

.parent {
  display: flex;
  justify-content: center;
}

4. 垂直居中 inline 或者 inline-* 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
单行
inline/text 元素可以简单的用设置相同的上下 padding 值达到垂直居中的目的。

.center {
  pading-top: 30px;
  padding-bottom: 30px;
}
如果因为某种原因不能使用 padding 的方法，你还可以设置 line-height 等于 height来达到目的。

.center {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
多行

相同的上下 padding 也可以适用于此种情况，如果不能生效，你可以尝试将该元素的父元素的 dispaly 设置为 table ，
同时该元素的 dispaly 设置为 table-cell，然后设置 vertical-align。

.parent {
  display: table;
  width: 200px;
  height: 400px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

如果上述方法不能使用，你可以尝试使用 flexbox,一个单独的 flexbox 子元素可以轻易的在其父元素中居中。谨记，这种方法需要父元素有固定的高度。

1
2
3
4
5
6
.parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

如果上述两种方式均不能使用，你可以使用“幽灵元素”技术，这种方法采用伪元素 ::before 撑开高度 ，文字垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
  position: relative;
}
.parent::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

5. 垂直居中 block 类的元素

已知元素高度

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

未知元素高度

1
2
3
4
5
6
7
8
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

使用 flexbox

1
2
3
4
5
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

6. 既水平又垂直

固定宽高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

不固定宽高

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 flexbox

1
2
3
4
5
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

展开全文 >>

前端知识点总结之css-浮动

浮动元素引起的问题和解决办法？

浮动元素引起的问题：

1
2
3
4
5
（1）父元素的高度无法被撑开，影响与父元素同级的元素

（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后

（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：

1
2
3
4
5
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

    .clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1，额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

2，使用after伪类

#parent:after{

    content:".";

    height:0;

    visibility:hidden;

    display:block;

    clear:both;

    }


3,浮动外部元素

4,设置overflow为hidden或者auto

展开全文 >>

前端知识点总结之css-reset

什么是CSS Reset。

1
2
3
4
HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。
不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，
而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，
影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉，这就是CSS reset。

部分CSS reset内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html {color:#000;background:#FFF;}t5
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select {*font-size:100%;}
legend {color:#000;}

展开全文 >>

风起于青萍之末,浪成于微澜之间。

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true