前端开发 - CSS / CSS3
文章平均质量分 84
Hayley2016
微信【H19950211H】
2018.08.20学习计划:
《带你学习Jade模板引擎》
《所向披靡的响应式开发》
《Vue+Webpack打造todo应用》
《Vue核心技术Vue+Vue-Router+Vuex+SSR实战精讲》
2018.12.18学习计划:
《全面系统讲解CSS工作应用+面试一步搞定》
《Node.js七天搞定微信公众号》
展开
-
浅谈Normalize.css和Reset.css的区别——选择对的默认样式处理脚本
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具...原创 2018-07-10 09:03:31 · 1360 阅读 · 0 评论 -
纯干货 —— 响应式图片解决方案
响应式图片不仅仅指图片的排版和布局,还包括根据设备大小加载不同的图片。在移动端设备上访问时,加载与用户设备相匹配的小图片,即快速,又不影响用户体验,也不会因为加载跟移动端不适配的高清大图导致用户流量出走。有些在大屏里看着比较舒服的图片,在手机上看会觉得太小,里边的东西看不清;即使手机分辨率是1920×1080,PC和手机上的图片宽度都是1000,显示的效果也应该不一样,手机上的图片应当更加注重...原创 2018-08-30 16:34:50 · 5252 阅读 · 0 评论 -
CSS基础 —— 恶补zoom:1的原理和应用
zoom的作用是设置或检索对象的缩放比例。设置body的zoom属性,可以实现网页缩小为原来的一半。body { zoom: 0.5}设置zoom:1可以在低版本IE下触发IE浏览器的haslayout,用于清除浮动,解决margin导致的重叠等问题通常,当浮动子元素导致父元素高度塌陷的时候,只要给父元素加上overflow: hidden;来解决(触发BFC),但是对...原创 2018-10-09 11:38:43 · 852 阅读 · 0 评论 -
px、em、rem
px、em、rem简介px像素(Pixel),相对长度单位,相对于显示屏幕分辨率em,相对长度单位,相对于父元素设置的font-size,页面层级越深,em的换算就越复杂。rem,相对长度单位,相对于HTML根元素设置的font-size,避免了多级嵌套。是CSS3新增的一个相对单位(root em 根em)。em和rem若没有设置上级字体尺寸,则相对于浏览器的默认字体尺寸16px...翻译 2018-07-10 09:26:57 · 906 阅读 · 0 评论 -
几个关于diaplay:table布局神器的绝妙应用场景
一、CSS display属性与表格布局相关的属性值解释table此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 table-row-group此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 table-header-group此元素会作为一个或多个行的分组来显示(类似 <thead>)。...原创 2018-08-31 10:47:23 · 1940 阅读 · 0 评论 -
对于CSS Media媒体查询的理解
CSS3媒体属性简介属性 描述 width 视口宽度 height 视口高度 device-width 渲染表面的宽度,即设备屏幕的宽度 device-height 渲染表面的高度,即设备屏幕的高度 orientation 检查设备处于横向还是纵向 aspect-ratio 视口宽度和高度的宽高比,width / height ...原创 2018-08-30 16:32:14 · 676 阅读 · 0 评论 -
CSS基础 —— 浮动布局实例详解和清除浮动的方法
案例解析:非浮动布局时,包裹元素高度自适应 。若给p标签增加浮动属性:包裹元素高度为0,出现高度塌陷问题。在实际应用中,这并不是我们想要的效果,这时就需要清除浮动,即闭合浮动元素解决办法:方法1:为包裹元素追加一个内容为空的元素,设置clear: both属性这种方法通俗易懂,但添加了无意义的空标签,违背了结构和表现分离的原则,对于后续维护不友好。...原创 2018-08-30 16:29:10 · 2457 阅读 · 1 评论 -
display:inline-block元素之间空隙的产生原因和解决办法
display:inline-block是一种布局方法,它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以置身于inline水平的元素中。在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-bl...原创 2018-08-30 16:27:15 · 30839 阅读 · 8 评论 -
CSS进阶 —— 10 分钟理解 BFC 原理
未完待续原创 2018-07-10 09:47:40 · 289 阅读 · 0 评论 -
常用HTML、CSS、Javascript前端命名规范
必不可少的图片使用<img>引入,可有可无的装饰性图片可以使用标签的style引入 一般都使用class(中横线分割命名)定义样式,id(驼峰命名)一般用于js快速的区别和获取元素class未完待续。。。与君共勉:再牛逼的梦想,也抵不住傻逼般的坚持!...原创 2018-07-04 15:01:03 · 234 阅读 · 0 评论 -
一文横扫CSS3选择器的使用方法
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)CSS 选择器参考手册基本选择器选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素。 1 #id #firstname ...原创 2018-07-10 10:59:26 · 210 阅读 · 0 评论 -
如何处理兼容性及在多个设备上进行调试
桌面端浏览器调试方法通常只需要在Google、Firefox、Opera、Safari、IE五大主流浏览器进行测试。移动端浏览器调试方法移动端浏览器调试的最好方法是真机测试,因为很多手机生产厂家会根据原生的安卓系统开发自己的操作系统,在没有真机测试的情况下会出现很多意想不到的兼容性问题。对于纠结需要进行哪些真机测试的问题,我们可以根据手机设备活跃度选择活跃度较高的主流设备进行测试。...原创 2018-07-10 14:54:03 · 805 阅读 · 0 评论