工作日常记录和读css世界总结

我是一个可爱的小前端
223 阅读9分钟
获取元素的样式

  • 获取内部样式和外部样式方法一样

    • javaScript实现方法

      // html
<div id="js-bg">各种获取前端样式的方法</div>
//js
let dom = document.getElementById('js-bg');
let domStyle = getComputedStyle(dom);
console.log(domStyle.backgroundColor)

// IE可是使用(只兼容IE)
dom.currentStyle.backgroundColor

      注意：

      • 使用getComputedStyle，IE11是兼容的，模拟的IE9也兼容，获取的是rgb或者rgba
      • currentStyle只有IE可以使用，并且获取的是定义的色值
      • getComputedStyle和currentStyle获取是最终读到的值
      • 如果使用getElementById获取的是确定的DOM是个obj，如果是使用其他（比如getElementsByClassName）获取到的是数组，需要选择到确定的DOM才可以

    • jquery实现

      $('#js-bg').css('backgroundColor')

  • 获取内联样式的方法

    • 能获取内部样式和外部样式的方法都可以获取内联样式

    • javaScript实现方法

      var dom = document.getElementById('js-bg');
console.log(dom.style.backgroundColor);

      **注意：**如果设置的值是十六进制的获取时得到的是rgb，如果设置的是单词，获取的也是单词（比如red）

    • jquery实现同上

设置元素的样式

  • javaScript实现方法

    var dom = document.getElementById('js-bg');
dom.style.color = '#b50029';
dom.setAttribute('style', 'color: #b50029;');
dom.style.cssText = "color: #b50029;font-size: 30px";

  • jquery使用css实现

判断数据类型

  • 判断是否是数组的方法

    • Object.prototype.toString.call(arr)，如果是数组打印[object Array]，如果是对象打印[object object]

      const arr={};
// const arr=[];
console.log(Object.prototype.toString.call(arr));

    • arr instanceof Array，如果是数组返回true，如果是对象或其他类型返回false

    • Array.isArray(arr)，如果是数组true，如果是对象或其他类型返回false，兼容IE9+

    • arr.constructor==Array，如果是数组返回true

  • 判断数据类型的方法汇总

    • typeof

      • 返回number,boolean,string,function,object,undefined，typeof Array、Object、null、Date、RegExp、Error都会返回object，所以判断这些类型不能使用typeof

      • 使用typeof判断一个值是否存在，if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a)因为如果a不存在(未声明)则会出错

        typeof 123 //"number"
typeof 'dsfsf' //"string"
typeof false //"boolean"
typeof [1,2,3] //"object"
typeof {a:1,b:2,c:3} //"object"
typeof function(){console.log('aaa');} //"function"
typeof undefined //"undefined"
typeof null //"object"
typeof new Date() //"object"
typeof /^[a-zA-Z]{5,20}$/ //"object"
typeof new Error() //"object"

    • instanceof

      • 返回true或者false，用于判断a是否是b的实例，常用于判断一个变量是否是对象

      • 定义一个数组a，使用a instanceof Object会返回true，因为数组也是引用类型

      • null/undefined instanceof Object会返回false

        123 instanceof Number //false
'dsfsf' instanceof String //false
false instanceof Boolean //false
[1,2,3] instanceof Array //true
{a:1,b:2,c:3} instanceof Object //true
[1,2,3] instanceof Object //true
function(){console.log('aaa');} instanceof Function //true
new Date() instanceof Date //true
/^[a-zA-Z]{5,20}$/ instanceof RegExp //true
new Error() instanceof Error //true

undefined instanceof Object //false
null instanceof Object //false

// 使用下面方法才可以检测出Number、String、Boolean的类型
var num = new Number(123);
var str = new String('dsfsf');
var boolean = new Boolean(false);

// 判断是否是构造函数的实例
function Person(){}
var tom = new Person();
console.log(tom instanceof Person)// true

    • constructor

      • 是prototype对象上的属性，指向构造函数，根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用constructor属性的

      • undefined和null没有constructor属性

        var num  = 123;
num.constructor==Number; // true
var str  = 'abcdef';
str.constructor==String; // true
var bool = true;
bool.constructor==Boolean; // true
var arr  = [1, 2, 3, 4];
arr.constructor==Array; // true
arr.constructor==Object; // false
var json = {name:'wenzi',age:25};
json.constructor==Object; // true
var func = function(){ console.log('this is function');}
func.constructor==Function; // true
var date = new Date();
date.constructor==Date; // true
var reg  = /^[a-zA-Z]{5,20}$/;
reg.constructor==RegExp; // true
var error= new Error();
error.constructor==Error; // true

// 判断是否是构造函数的实例
function Person(){}
var tom = new Person();
tom.constructor==Person; // true

      • toString

        • 可以通过toString()来获取每个对象的类型

        • 为了每个对象都能通过Object.prototype.toString()来检测，需要调用call()或者apply()方法

        • 使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法

          var toString = Object.prototype.toString;
toString.call(123); //"[object Number]"
toString.call('abcdef'); //"[object String]"
toString.call(true); //"[object Boolean]"
toString.call([1, 2, 3, 4]); //"[object Array]"
toString.call({name:'wenzi', age:25}); //"[object Object]"
toString.call(function(){ console.log('this is function'); }); //"[object Function]"
toString.call(undefined); //"[object Undefined]"
toString.call(null); //"[object Null]"
toString.call(new Date()); //"[object Date]"
toString.call(/^[a-zA-Z]{5,20}$/); //"[object RegExp]"
toString.call(new Error()); //"[object Error]"

      **总结：**如果一个数据不是Array、Object、null、Date、RegExp、Error其中的一种使用typeof判断数据类型是最方便的，如果是这几种类型中的一种使用instanceof或者constructor或者Object.prototype.toString.call()或者Array.isArray(arr)，判断是否是构造函数的实例可以使用constructor或者instanceof

用对line-height和vertical-align

  • line-height行高的定义是两基线（字母x的下边线，x的高度叫作x-height）的距离

  • vertical-align中的middle是指基线往上1/2x-height的高度

  • x-height

    • 1ex就是一个x的高度，ex是一个相对单位，相对文本x的高度变化而变化

    • 使用ex设置图标相对文字居中

      <div class='fd-line-height'>xxxxx<i class='icon-select'></i></div>
<div class='fd-line-height'>请选择<i class='icon-select'></i></div>
.fd-line-height {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 5px;
    background: black;
    color: #fff;
    font-family: Segoe UI, Roboto, Emoji, Helvetica, Arial, sans-serif;
}
.icon-select {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(/images/select.png) no-repeat center;
}

      如果是英文，图标会相对文本上下居中；如果是汉字，图标则会偏下；字体在line-height的中间位置偏下是字体影响的，比如微软雅黑就是典型的偏下的字体；宋体则会在黑色背景（line-height）区域上下居中，这是就可以算出真正的半行距（(lineHeight-fontSize)/2）border、line-height没有小数像素

  • line-height没有负值，但是line-height设置的很小（大于0）时两行文字会重叠在一起

    • 行距（lineHeight-fontSize）可以是负值

      • 默认属性值是normal，这个值不只是受fontSize也受fontFamily的影响，一般的中文字体的行高都会比字体高度大几个像素（vertical-align在作用）

      • 可以设置数值（1.5）、百分比值（150%）、长度值（20px），line-height是可继承的属性但是各值继承的方式不同设置为数值的话是继承该数值，设置为百分比或者em会先计算行高（lineHeight*fontSize）再继承，如果设置固定值继承的也是固定值

        <div class="fd-box">
    <h3>标题</h3>
    <p>内容</p>
</div>

* {
	margin: 0;
}
.fd-box {
    margin: 10px;
    line-height: 1.5;<!--继承的就是1.5-->
    line-height: 1.5em;<!--继承的就是1.5*14=21px-->
    line-height: 150%;<!--继承的就是1.5*14=21px-->
    font-size: 14px;
    background: red;
}
.fd-box h3 {
    font-size: 32px;
}
.fd-box p {
    font-size: 20px;
}

<!--下图从左往右依次是1.5/1.5em/150%属性值的表现-->

  • 内联元素的高度由行高决定，虽然pandding会改变元素的背景高度，但是对其内容高度是不起作用的，左右的padding、margin是都会起作用的，上下的则无效

  • 块级元素lineHeight只能决定他的最小高度，如果在块级元素设置了较大的line-height，其中文本占的高度是fontSize的大小，其余区域是由幽灵空白节点占据

    <div class="fd-line-height"><span>请选择</span></div>
.fd-line-height {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 5px;
    background: black;
    color: #fff;
    font-family: simsun;
}
<!--文本"请选择"实际占的高度只有24px，其余部分由幽灵空白节点占据-->

  • vertical-align

    • 属性值

      • 线类：baseline（默认基线即字母x的下边缘）、top、middle、bottom

        • baseline：对于内联元素对应的是字符x的下边缘，对于替换元素对应的是替换元素的下边缘，对于inline-block的元素如果里面没有内联元素或者overflow不是visible基线则是其margin底边缘（没有margin对应的是盒子下边缘），否则其基线就是元素里面最后一行内联元素的基线

          <div class="fd-inline-block"></div>
<div class="fd-inline-block">xds-inline-block</div>
.fd-inline-block {
display: inline-block;
    width: 250px;
    height: 50px;
    margin-bottom: 20px;
    border: solid 1px #333;
}

        • top/bottom：非table-cell的元素对应的位置是元素底部和当前行框盒子的顶部/底部对齐（当前行最高/最低的内联元素顶部/底部对齐），table-cell的元素对应的位置是元素底padding边缘和表格行的顶部对齐

        • middle：非table-cell的元素表现为元素的垂直中心点和行框盒子基线往上1/2 x-height处对齐，table-cell元素对应的位置是单元格填充盒子相对于外面的表格行居中对齐

      • 文本类：text-top、text-bottom

        • text-top：盒子的顶部和父级内容区域（父级元素当前font-size和font-family下应有的内容区域大小）的顶部对齐
        • text-bottom：盒子的底部和父级内容区域的底部对齐

      • 上标下标类：sub、super

      • 数值百分比类：20px、2em、20%等，根据值不同，相对于基线往上或者往下偏移（正值往上负值往下）

    • 作用条件

      • 只能作用于内联元素(inline、inline-block、inline-table)以及display:table-cell

      • vertical-align和line-height经常结对出现

        <div class="fd-box">
    <span>请选择请选择请选择请选择请选择请选择请选择请选择</span>
</div>

<!--下面代码不会让span内容上下居中，因为缺少line-height，这是因为span前面的幽灵空白节点高度不够，所以需要在父盒子加上line-height值和height等高-->
.fd-box {
    width: 200px;
    height: 80px;
	<!--line-height: 80px; 关键CSS属性不可缺少-->
    color: #fff;
    background: #000;
}
.fd-box>span {
	vertical-align:middle;
}
<!--display:table-cell可以无视行高，对于table-cell元素而言，vertical-align起作用的是table-cell元素自身，所以就算子元素是个块级元素也可以让其垂直对齐-->
.fd-box {
	display:table-cell;<!--关键CSS-->
    width: 200px;
    height: 80px;
    color: #fff;
    background: #000;
	vertical-align:middle;<!--关键CSS-->
}

      • 非主动触发位移的内联元素是不可能跑到计算容器外面的

        <div class="fd-box"><p>出不去出不去出不去出不去</p></div>
.fd-box {
	border: solid 1px #333;
}
.fd-box>p {
    display: inline-block;
    height: 60px;
    margin-top: -100px;
}

  • 弹窗上下左右居中

    <div class="container">
    <div class="dialog"></div>
</div>
.container {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}
.container:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.dialog {
    display: inline-block;
    vertical-align: middle;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    text-align: left;
    white-space: normal;
}
    • 让元素垂直居中的关键是设置line-height，但是这里显然不合适，屏幕高度不是固定的
    • 所以这里用伪元素创建了一个和外部容器一样高的宽度为0的inline-block元素，由于font-size设置为0，所以x 中心点位置就是.container 的上边缘，此时，高度 100%的宽度为0的伪元素和这个中心点对齐如果中心点位置不动，这个伪元素上面一半的位置应该在.container 的外面，但是css默认是左上方排列对齐的，伪元素和这个原本在容器上边缘的x中心点一起往下移动了半个容器高度，也就是此时x中心点就在容器的垂直中心线上。所以兄弟元素.dialog设置vertical-align: middle;是中心点就在容器的垂直中心线上
浏览器内核
  • 四种内核：Trident、Webkit、Gecko、Blink
  1. IE浏览器内核：Trident内核，也是俗称的IE内核；
  2. Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
  3. Firefox浏览器内核：Gecko内核，俗称Firefox内核；
  4. Safari浏览器内核：Webkit内核；
  5. Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
  6. 360浏览器、猎豹浏览器内核：IE+Chrome双内核；
  7. 搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
  8. 百度浏览器、世界之窗内核：IE内核；
  9. 2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
  • 国内浏览器的内核
  1. 搜狗浏览器：兼容模式（IE：Trident）和高速模式（webkit）
  2. 傲游浏览器：兼容模式（IE：Trident）和高速模式（webkit）
  3. QQ浏览器：普通模式（IE：Trident）和极速模式（webkit）
  4. 360极速浏览器：基于谷歌（Chromium）和IE内核
  5. 360安全浏览器：IE内核
avatar
文章
阅读
粉丝