积少成多

欢迎访问我的个人博客：http://www.xiaolongwu.cn问题有时候，我们页面的主题色是深色的，在chrome浏览器里登录成功之后，会有个记住密码功能，这个功能是chrome自带的功能，然后我们下次登录的时候，就会提示让我们选择浏览器记住的账号和密码，选完之后会有个白色的背景，与我们自己写的风格很不搭配；当然，这个也浏览器默认的颜色，我们是可以修改的；解决方案加上如下css，...

今天做了一个demo，自己用原生的js写了一个轮播图，那么问题来了，当你用百分号表示margin-left的时候，他取得百分号的数值是以谁做为基准而取得值呢？子元素和父元素的width都是百分号表示，比如一个很简单的额例子了，当一个div里面有一个div时，下面我就通过2个简单的demo来解释这个问题1、如果父元素div大于里面的子元素div，图代码如下：box为父元素 ，bo

项目需求有一个2px的换行符，颜色是淡灰色的，这里面可能有一些不一样的设置，需要明白。说到颜色变化，大家首先想到的都是color,但是color一般都是针对字体颜色的，线条需要用background-color,但是单纯的将背景色设为灰色是不够的，线条还是黑色的，我们需要给线条一个高度，也就是我们需要的2px这样设置完后，在浏览器中可以看到线条变粗了，而且原来的黑色好像还是

欢迎访问我的个人博客：http://www.xiaolongwu.cn前言我们先想个问题，带着问题看这篇文章可能会理解的更好一点：百分比布局时，子元素竖向的属性值都是取决于父元素的高吗？慢慢向下看取决于父元素高度的：[max/min-]height、top、bottom 等；后两者是在有position属性的前提下取决于父元素宽度的： [max/min-]width、l...

欢迎访问我的个人博客 http://xiaolongwu.cn/先简单介绍一下各个属性::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效...

欢迎访问我的个人博客 http://xiaolongwu.cn/先说原理zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。我们看个例子这是几行伪代码 ...

欢迎访问我的个人博客：http://www.xiaolongwu.cn前言首先这两个都与透明度有关，那么他们之间有什么具体的区别呢？在实际工作中我们需要注意什么呢？请您接着往下看语法1. rgba首先它是一个属性值，语法为rgba（r,g,b,a） - r为红色值， 正整数 | 百分数 - g为绿色值，正整数 | 百分数 - b为蓝色值，正整数 | 百分数 ...

欢迎访问我的个人博客：http://www.xiaolongwu.cn前言日常工作中我们可能会经常遇到类似这样的问题，今天我们就彻底的搞明白他们之间的区别与联系:after与::after原理相同相同之处两者都是css的伪元素，都可以在元素内容的前面添加内容两者的写法是等价的，也就是 :before ==::before不同之处:befor是css2的...

欢迎访问我的个人博客：http://www.xiaolongwu.cn1. 前言flex弹性盒，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为，弹性盒属于 CSS 3 部分，IE9 以下不支持，现代浏览器指的就是 IE9 及以上的浏览器2. flex的优势举个例子：这里我们要实现一个功能，让一个dom元素水平垂直居中;...

响应式设计与自适应设计相信从事前端页面设计的人都知道，页面呈现的效果及用户体验是非常重要的。当今社会移动设备的使用已超过了pc端，面对不同分辨率的设备，怎样做到页面体验的效果一样呢？这就成了最头疼的事情。下面我们来看看响应式设计与自适应设计两者用法：响应式Web设计(Responsive Web Design) ：主要利用CSS3的媒介查询（Media Query）和Vie

我的思维大概是这样的-----有一个导航栏，用css写了hover事件，鼠标放上去会变成蓝色；下面就有一个需求，点击导航某一项页面不会跳转，还在本页面，点击哪一个让哪一个变成蓝色，其余的为灰色的，但是当我点击完成之后，hover事件就会失效，不起作用了，我的css代码是这样的.content-top1>p:hover{ color: #19b1e8;}我的js代码  $(".

请看下面的demo 省略号显示 .box{ width: 200px; height: 20px; line-height: 20px; background: blue; } 一步一步走到天亮的博客，写的简单明了，易懂，当然我有点自恋。页面上的结果是这样的文字超出了元素，并且自动换行如果想让元素外面的文字以省略号显示

在w3school关于window对象的介绍中，介绍了获取浏览器窗口大小的三种方法（浏览器的视口，不包括工具栏和滚动条）。对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight – 浏览器窗口的内部高度window.innerWidth – 浏览器窗口的内部宽度对于 Internet Explore

PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；4.px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em特点 1.em的值并不是固定的；2.em会继承父级元素的字体大小。3.em是相对长度单位。相对于当前对象内文本的字体尺寸。

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

box-sizing:border-box    为ie的怪异盒模型引进的；如果给标签加上box-sizing:border-box 属性，则会告知浏览器的解析器这个元素的盒模型类型为怪异盒模型；即给元素设置的宽高不但包括content还会包含padding和border；分割线--------------------------------------------------

SEO（Search Engine Optimization），汉译为搜索引擎优化，为近年来较为流行的网络营销方式，主要目的是增加特定关键字的曝光率以增加网站的能见度，进而增加销售的机会。分为站外SEO和站内SEO两种.SEO的主要工作是通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本

html引入css的几种方式