积少成多

只要心中有景,何处不是花香满径。

深入理解弹性盒flex布局

欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代浏览器指的就是 IE9 及以上的浏览器...

2018-05-04 15:08:53

阅读数:345

评论数:0

css基础--:before和::before的区别

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

2018-04-09 17:08:45

阅读数:301

评论数:0

css基础--深入理解opacity和rgba的区别

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

2018-03-30 20:53:25

阅读数:363

评论数:0

用百分比布局时,子元素那些属性值取决于父元素的高那些属性取决于宽

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

2018-02-09 16:13:09

阅读数:363

评论数:0

CSS中两种放大zoom和scale的区别

欢迎访问我的个人博客 http://xiaolongwu.cn/ 先说原理 zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方。 zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置。 另外他们...

2018-02-08 00:53:44

阅读数:6420

评论数:0

css3自定义滚动条样式写法

欢迎访问我的个人博客 http://xiaolongwu.cn/ 先简单介绍一下各个属性 ::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ...

2018-02-08 00:49:53

阅读数:704

评论数:0

hr换行符的颜色设置

项目需求有一个2px的换行符,颜色是淡灰色的,这里面可能有一些不一样的设置,需要明白。 说到颜色变化,大家首先想到的都是color,但是color一般都是针对字体颜色的,线条需要用background-color, 但是单纯的将背景色设为灰色是不够的,线条还是黑色的,我们需要给线条一个...

2016-11-24 14:39:09

阅读数:1047

评论数:0

document.body、document.documentElement和window获取视窗大小的区别

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

2016-11-08 10:01:03

阅读数:623

评论数:0

css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?

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

2016-11-04 17:58:50

阅读数:6068

评论数:2

响应式设计与自适应设计

响应式设计与自适应设计 相信从事前端页面设计的人都知道,页面呈现的效果及用户体验是非常重要的。当今社会移动设备的使用已超过了pc端,面对不同分辨率的设备,怎样做到页面体验的效果一样呢?这就成了最头疼的事情。 下面我们来看看响应式设计与自适应设计两者用法: 响应式Web设计(Res...

2016-10-31 17:26:24

阅读数:965

评论数:0

页面构建的方式 渐进增强和优雅降级

渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 区别:...

2016-10-05 01:03:05

阅读数:311

评论数:0

seo 对于一个网站来说很重要 简单解释一下

SEO(Search Engine Optimization),汉译为搜索引擎优化,为近年来较为流行的网络营销方式,主要目的是增加特定关键字的曝光率以增加网站的能见度,进而增加销售的机会。分为站外SEO和站内SEO两种.SEO的主要工作是通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何...

2016-10-05 00:56:17

阅读数:224

评论数:0

box-sizing:border-box 解释

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

2016-10-05 00:34:59

阅读数:1045

评论数:0

浏览器怪异模式和标准模式之间的区别 DTD

从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差, IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,...

2016-10-05 00:04:48

阅读数:400

评论数:0

px em rem 的区别

PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 4.px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em特点  1.em的值并不是固定的; ...

2016-10-04 11:08:08

阅读数:1902

评论数:0

如果文字多了,想让超出元素外面的文字以省略号显示的css样式

请看下面的demo 省略号显示 .box{ width: 200px; height: 20px; line-height: 20px; background: blue; } 一步一步走到天亮的博客,写的简单明了,易懂,当然我有点自恋。...

2016-10-01 01:39:54

阅读数:4339

评论数:0

当margin用百分号(%)时,数值是以谁为基准?

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

2016-10-01 01:05:23

阅读数:1536

评论数:2

浅谈html引入css的几种方式

html引入css的几种方式

2016-09-28 18:47:53

阅读数:351

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭