摘要：
前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若 阅读全文
摘要：
本文的内容为使用 HTML 与 CSS 来创建提示工具，提示工具在鼠标移动到指定元素后触发。这个提示工具可以使我们排出的网页增加美感，也可以提升用户的可读性。（提示工具可以四周提示这里只演示上和右，左和下的同理调调距离就可以实现了） 一、提示内容在上面 1<效果图敬上> 2<代码敬上> <!doct 阅读全文
摘要：
这一节，我们来讲规矩，谈网格，做人可以不要脸，不讲规矩，不讲道理（特指傲娇兽），但底线还是要有的，如同网格一样，不能超出。 jeet 这里我们别人封装好的模块，不过呢，我们也会详细介绍一下原理。首先我们安装以下 jeet 框架 npm install --save jeet 这个 jeet 框架有 阅读全文
摘要：
前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若 阅读全文
摘要：
上一篇：《CSS世界》笔记一：流/元素/尺寸下一篇：《CSS世界》笔记三：内联元素与对齐 写在前面 在读《CSS世界》第四章之前，粗浅的认为盒模型无非是margin/border/padding/content而已，再多无非在不同box-sizing下的表现不同而已；但是书中记录的替换元素与非替换元 阅读全文
摘要：
本文主要取自于网易云课堂——前端微专业 页面制作github相关代码：https://github.com/Mirror1988... 💪布局解决方案 居中布局 水平居中 父元素与子元素宽度不定 <div class="parent1 parent"> <div class="child1 chi 阅读全文
摘要：
前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若 阅读全文
摘要：
图片通常是移动端网页中最占流量的资源。在很多类型的网站中（比如电商、社区），图片占据了网页的大部分空间。优化图片的质量和加载速度成为提高用户体验的重要途径。 传统方案的弊端 目前有一些被广泛应用的方案，例如选择压缩比更高的图片格式、使用雪碧图、HTTP2、CDN等。5年前的一条知乎回答前端开发中，对 阅读全文
摘要：
1.概念 设备像素（device pixel）简写DP 设备像素又称 **物理像素** ，是设备能控制显示的最小单位，我们可以把它看做显示器上的一个点。我们常说的 1920x1080像素分辨率就是用的设备像素单位。 css像素（css pixel） css像素是 **web编程的概念** ，它是 * 阅读全文
摘要：
如何实现如下的这种中间自适应宽度，左右两栏固定宽度布局？ 这是一道经典的面试题，常用的方法是：圣杯布局、双飞翼布局。相信看完这篇文章，你就能很清楚的知道什么是圣杯和双飞翼了。 圣杯布局 首先，我们先定义HTML结构： <div class='container'> <div class="middl 阅读全文
摘要：
前言 设计师可以分为如下两类： 先做好设计，然后将内容放入静态框架中 优秀的设计师充分考虑内容的各个方面及其上下文，并创建适合于内容的设计 HTML原生就是响应式的（HTML内容在视口内流式的分布）。随着CSS的广泛应用，设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中，这有悖于HTML 阅读全文
摘要：
引言 对我来说，table 有一个非常有用，支持性也很好的 CSS 属性，但它却很少为人所知。它改变了表格的渲染方式，并生成一个更加稳定可靠的布局。 它就是： table { table-layout: fixed; } table-layout的缺省值是 auto，这个属性值及其效果大家十分熟悉。 阅读全文
摘要：
1. 盒模型的简介 本文简单的总结了一些基本概念，知识点以及细节问题 作为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。 在我们编写HTML时，网页上的内容几乎都是被包在一个个元素（当然也可以叫做标签）中的，最常见的有div、span、a、img等等。虽然标签的个数很多样， 阅读全文
摘要：
第一章 引言 css编码技巧 在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性都有一定的局限性。 第二章 背景与边框 半透明边框 bor 阅读全文
摘要：
前言 在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。但是有很多情况，正常流是没办法实现的，因此我们需要一些手段来破坏流，从而实现一些特殊的布局，而本节的主角float就具备破坏流的特性。 float设计的初衷 很多新手在布局的时候，总喜欢用float 阅读全文
摘要：
CSS架构 一。链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 <style> a{ color: blue; text-decoration: none; } a:hover{ cursor:default; text-decoration: underline; } </s 阅读全文
摘要：
CSS架构 1.浮动； 是以float属性设置容器指定的位置 <style> div { width: 200px; height: 200px; } #qq { background-color: lightcoral; /*float: right;*/ } #yy { /*width: 300 阅读全文
摘要：
阅读本文之前最好对flex布局有基本了解，可以通过“参考资料”中列举的资源来学习。 flex布局规范的设计目标 一维布局模型(one-dimensional layout model)，元素项沿着水平或垂直方向来排列，就像一条沿着一个方向的“流”。 与之对应的，CSS Grid Layout是一个二 阅读全文
摘要：
问题描述 浮动元素导致的后面img标签居中对齐“失败”，如下图 <div> <div class="content1"> <div class="float-left">left-div</div> <div class="float-right">right-div</div> </div> <d 阅读全文