再识移动端开发（动态REM）
前言：之前写过一篇博客介绍响应式移动端开发，而本文会介绍一种非响应式的移动端开发技术：动态REM。看了这两篇文章，你将会对移动端开发有全面的了解。 1、前置知识 首先来介绍一下在写CSS中常用的长度单位： px：即像素，最最常用 rem：即root em，表示根元素的font-size，根……
分类 CSS 中的文章
CSS中的flex布局详解
前言：之前我写过的一篇博客介绍CSS常用的几种布局方式，PC端最常见的就是浮动布局和flex布局，而在移动端，由于不用顾忌IE这个业界大坑，flex布局应用的就更广泛了，多以本文就来详细的介绍一些flex布局。 1、先不说flex布局 首先我们回顾一下除了flex布局之外的常用布局方……
初识移动端（响应式）
前言：今天初次了解了移动端的一些常识，包括PC端和移动端的区别，媒体查询等的相关操作,以及国内的网站如何实现不同的端展示不同的样式。 1、媒体查询（附带MDN解释） 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询……
CSS堆叠上下文
前言：设置了z-index:9999;的层叠顺序一定高于z-index:0;吗？很明显这句话在某些情况下是不成立的，而引起其不成立的原因就是堆叠上下文的现象。本文主要介绍关于css中堆叠上下文的概念、引起的原因等。 注：友情链接：关于堆叠上下文的MDN介绍，张鑫旭的博客《深入理解C……
元素的高度与宽度以及衍生技巧
前言：本文主要写块级元素与内联元素的宽度与高度的相关知识，以及相关的衍生技巧，包括一些常用的居中方法等（与我的上一篇博客css如何居中不同，上一篇是把所有能用来居中的方法都介绍了一遍，本篇只写常用的方法，可以应对80%的情况） 1、块级元素宽高 块级元素的高度由其内部文档流的高度的总……
CSS如何居中
本文翻译自CSS Tricks 中关于居中的相关介绍。 1、水平居中 内联元素的水平居中（如链接或文本） 可以在一个块级别的父元素中水平地居中内联元素，只需： 1 2 3 .center-children { text-align: center; } 注：这种写法适用于inline, inline-block, inline-table, inline-flex等等。 代码示例： => html代码 1 2 3 4 5 6 7 8 9 10 <header> This text is centered. </header> <nav role='navigation'> <a……
CSS左右布局、左中右布局以及一些小技巧
1、左右布局 如果有以下html结构，设置左右两栏布局 <div class="parent"> <div class="leftChild"></div> <div class="rightChild"></div> </div> 设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例代码如下： .clearfix::after{ content:""; display:block; clear:both; } .leftChild, .rightChild{ float:left; } 设置position绝对定位，为父元素设置position:relative; 为子元……
初识CSS
CSS，中文称之为“层叠样式表”，英文全称为 Cascading Style Sheets 。一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最广泛运用的版本是CSS 2.1(链接为CSS2.1的官方文档)。 1. 学习资源： MDN => Google 关键词 + MDN （用来查询css属……