随笔(一)1

原创 Jessie_FANTASY 随笔 web前端 246阅读 2017-05-17 19:18:25 举报

1、如何让各种情况下的div居中
.text-align:center方式:水平居中块级元素中的行内元素,如inline,inline-block;但是如果用来居中块级元素中的块级元素时,如div中的div,一旦内层的div有自己的宽度,这种方法就会失效。只能让里面div的文字等内容居中,而div仍然是左对齐的。还有一种情况,当内部的元素脱离了文档流,display:absolute的情况下,不管是否是块级元素,都会居中,但是这种居中不是基于内部div的内容的,而是内部div最左端,内部div的最左端在div的中间(前提外部div设置了position:relative/absolute/fixed);
margin:0 auto方式:这种对齐方式要求内部元素(.content_text)是块级元素,并且不能脱离文档流(如设置position:absolute),否则无效。
脱离文档流的居中方式:这种通常应用在自定义弹框当中,把背景层设置成透明灰色,内容居中显示在最前面。这种居中方式,把内部div设置宽高之后,再设置top、left各为50%,设置完之后,这里是按照左端居中的,接着我们使用负边距的方式调整,将margin-top设置为负的高度的一半,margin-left设置为负的宽度的一半,就可以居中了。

这种方式还有一种居中方法就是设置margin:-(内部div高度的一半) auto;这用就不用设置left的值了。
2、display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit
其中常用的的有none、inline、block、inline-block。分别的意思是:
none: 元素不会显示,而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden, 是保留元素的空间的。
inline: display的默认属性。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的display 属性设为 inline, 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度(font-size)和padding。
block: 将元素将显示为块级元素,元素前后会带有换行符。设置为block后,元素可以设置width和height了。元素独占一行。
inline-block:行内块元素。这个属性值融合了inline 和 block 的特性,即是它既是内联元素,又可以设置width和height。

这里提及下内联元素和块级元素的一些特点:

内联元素:
和其他元素都在一行上;
元素的高度、宽度及顶部和底部边距不可设置;
元素的宽度就是它包含的文字或图片的宽度,不可改变。

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

块级元素:

每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行);
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form

内联块状元素:

和其他元素都在一行上;
元素的高度、宽度、行高以及顶和底边距都可设置。

常用的内联块状元素有:
<img>、<input>

其他display的属性值不是很常用,其具体的含义如下:

list-item: 此元素会作为列表显示。
run-in: 此元素会根据上下文作为块级元素或内联元素显示。
table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table: 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group: 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group: 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group: 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row: 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group: 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column: 此元素会作为一个单元格列显示(类似 <col>)
table-cell: 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption: 此元素会作为一个表格标题显示(类似 <caption>)
inherit: 规定应该从父元素继承 display 属性的值。

3、CSS权重:

1、权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。

2、当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先级的过程。
3、每个选择器都有自己的权重。你的每条css规则,都包含一个权重级别。 这个级别是由不同的选择器加权计算的,通过权重,不同的样式最终会作用到你的网页中 。
4、如果两个选择器同时作用到一个元素上,权重高者生效。
CSS权重优先级:
1、内嵌样式 > 内部样式表 > 外联样式表
2、important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
important的权重为1,0,0,0

  ID的权重为0,1,0,0

 类的权重为0,0,1,0

 标签的权重为0,0,0,1

伪类的权重为0,0,1,0

属性的权重为0,0,1,0

伪对象的权重为0,0,0,1

通配符的权重为0,0,0,0

4、浅谈ES6
15年接触了CoffeeScript,代码之简单,让我惊讶。之前也写过javascript,但发现太冗余了,基本没有动力继续写下去。16年开始接触React以及React Native,也就正式了解了ES6语法,发现它和CoffeeScript很相近,并有了很大的改进。这几天参考了http://es6-features.org/,对ES6重新简单的学习,有以下几点思考。

ES6支持新的特性有:

  1. 常量
      常量,这个不多说,大多数语言都有,如c,c++,java,go等。python之前也没有,PEP8中有部分支持。 加入常量之后,虽然不如之前灵活,但会常量会做类型检查,同时加快编译速度。
  2. => 函数定义
      =>函数定义, 类似于 CoffeeScript中函数绑定,可以将javascript中this关键词动态地绑定设定为当前函数挂在所在的对象上。=>绑定,使得原先函数绑定变得容易。同时由于ES6中语法中需要用{}()来进行代码分割,使 得代码相比于CoffeeScript更加清晰,容易阅读。
  3. 模板
      模板,自动支持了模板机制,比之前ES5,不需要额外引入其他模板引擎。
  4. 扩展参数处理
    1. 解构赋值
        扩展参数处理,是非常好的,用...来扩展参数,类似于go语法。相对容易理解。另外在函数解构赋值中,也和Go很相近,支持多变量赋值,以及默认参数。
    2. 模块
        是一种抽象。类似于Package或者namespace的概念。
    3. 类(最大的改进)
        终于开始支持面向对象编程,支持了继承,以及静态函数等相关操作;
    4. Iterators 和 Generators
        迭代和生成器,我理解如C++中的Iterator,以及Python中的迭代和生成器。但感觉语法还是有些复杂,希望之后还能够改进。
    5. Map/Set/WeakMap/WeakSet
        对数据函数的进一步支持
      10.内嵌函数
        提供更多的内部函数封装,主要用模块以及面向对象来实现。
    6. Promise
        对异步操作进行更好的封装,在React-Native中已经直接可以使用React.
    7. 反射机制
        反射机制类似于Go中Reflect,或者typeof 等机制
    8. 国际化和本地化支持
        这个很不错,在其它语言中也有支持。
      以及其它

    ES6语法使得JS越来越容易学习,也具有通用性,我感觉比较深的,以上是和其它几种语法的分析和对比。

5、requirejs实现原理
RequireJs已经流行很久了,我们在项目中也打算使用它。它提供了以下功能:

声明不同js文件之间的依赖
可以按需、并行、延时载入js库
可以让我们的代码以模块化的方式组织
require.js
require函数实现用一句话概括:
依次加载require的模块,然后监测script的onload事件,判断所有模块加载成功,执行require的callback, 如果只带一个参数且不是数组,就是加载成功后return 模块。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复