开发中的一些小知识点

2017-03-04

前端

自己平时总结的一些开发中用到的小知识点

获得网站的图标：网址 +　“/“ + favicon.ico 如获得淘宝网的图标

http://www.taobao.com/favicon.ico

网站图标一般放在网站的根目录下

在网页中导入icon的代码

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

滑动时候，不选中文字的代码

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

隐藏滚动条的方法

document.body.style.overflow = "hidden";

显示滚动条的方式

document.body.style.overflow = "visible";

查看浏览器信息

window.navigator.userAgent

去掉标签自带的蓝色边框

outline-style:none;

当给标签设置display: inline-block属性的时候，标签之间会产生空隙，清除标签之间的空隙的方法是给设置了display:inline-block属性的标签的父标签设置

font-size : 0

去掉图片底部默认的3像素空白间隙

vertical-align: top

下面的css样式表示文本的字体为宋体，文本的字体大小为14px，文本的行高为24px

font: 14px/24px "宋体"

如果给line-height的值只设置一个数字，没有加单位，此时元素的行高为元素的字体大小乘以那个数字如给元素设置两个属性 line-height: 2 和 font-size: 20px，当前元素的line-height属性没有单位，此时元素的行高为
font-size的值 line-height的值 = 20 X 2 = 40

下面的代码表示选中div标签下的第n(n为从1开始的正整数)个标签，并且这个标签必须是p标签才会被选中

div p:nth-child(n)

下面的代码表示选中div标签下的第n(n为从1开始的正整数)个p标签

div p:nth-of-type(n)

下面的代码表示选中div标签下的第偶数个标签，并且这个标签必须是p标签才会被选中

div p:nth-child(even)

下面的代码表示选中div标签下的第奇数个标签，并且这个标签必须是p标签才会被选中

div p:nth-child(odd)

-webkit-margin-before: 1em表示元素的上边距的高度 = 元素的字体大小 X 1，当元素的font-size: 14时候。元素的上边距的高度 = 14px X 1 = 14px，webkit指的是Chrome浏览器内核

li浮动后，ul将失去高度，如要设置ul整体背景需要定义好ul的高度

设置了定位的元素，在没有设置left值和top值的情况下在原来的位置不变

text-align:center属性不仅可以使块级元素中的文本居中，还可以使块级元素中的行内元素居中

box-sizing: border-box浏览器使用IE盒模型的方式解析标签，当标签定义了width和height时，border和padding则是被包含在宽高之内，此时内容的宽和高可以通过定义的“width”和 “height”减去相应方向上的padding值和border值得到，即width = border-left + padding-left + 内容的宽度 + padding-right + border-right

box-sizing:content-box浏览器使用标准的W3C盒模型的方式解析标签，当标签定义了width和height时，标签中内容的宽度和高度不包括border和padding，当不设置box-sizing属性时，默认使用标准的W3C盒模型，即width = 内容的宽度

在网页中使用Ajax，提交按钮不能设置成<input type="submit"/>，只能设置成<input type="button"/>

在同步提交中服务器端是通过标签的name属性获得标签中的值，例如在网页中创建一个密码输入框<input type="password" name="password"/>，在PHP中通过$password = $_GET['password'];获得密码输入框中的密码,其中password表示密码输入框中name属性的值

下面的语句是条件注释，表示当浏览器的版本小于IE9时候，执行条件语句中的代码

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

大部分主流浏览器浏览器中默认的字体大小都为16px

direction: ltr将文本的显示方向设置为从右往左显示

flex-basis设置弹性盒的初始长度

当输入框中的单词拼写错误时，禁止产生红色波浪线的代码<input type="text" spellcheck="false">

select标签默认情况下box-sizing属性的值为border-box

属性选择器
E[attr]：表示选中存在attr属性的E标签
E[attr=val]：表示选中属性的值为val的E标签
E[attr~=val]：表示选中标签的属性值以空格分割的E标签
E[attr*=val]：表示选中属性值里包含val字符并且在“任意”位置的E标签
E[attr^=val]：表示选中属性值里包含val字符并且在“开始”位置的E标签
E[attr$=val]：表示选中属性值里包含val字符并且在“结束”位置的E标签

e.g.表示举例来说、例如
etc.表示等等
FAQ表示常见的问题与解答

meishadevs欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。
转载请注明：【文章转载自meishadevs：开发中的一些小知识点】

上一篇：常用的CSS样式

下一篇：常见的WebStrom使用技巧和Chrome使用技巧