学习记录

//上下两个table重叠的边框只显示一条 .typelist table{ border-bottom:0px; td{ border-bottom:0px; } }...

一 、前言一直在做PC端的前端开发，从互联网到行业软件。最近发现移动端已经成为前端必备技能了，真是不能停止学习。HTML5新增的一些东西，canvas是用的比较多也比较复杂的一个，简单的入门了一下，通过一个刮奖效果来学习。 二、canvas基础本文的目标是做一个刮奖效果，但是如果都不知道canvas是怎么回事，那么肯定也无法进行下去，所以先讲讲canvas基础吧。首先，该怎么理...

最近在学习Flex Box，其中的Flex Box属性中的Flex Basis是关于项目宽度属性设置的，这让许多初学Flex Box的人困惑它与CSS盒子模型Width属性的区别在哪？Google了一番，找到一篇解释写得很是不错的文章，尝试着翻译分享一下。原文地址：http://gedd.ski/post/the-difference-between-width-and-flex-basis/...

来源居中布局水平居中1）使用inline-block+text-align（1）原理、用法原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 用法：对子框设置display:inline-block，对父框设置text-align:center。（2）代码实例<div class="parent"> <div cl...

<div class="hot-header"> <h3 class="title common-title left">热门楼盘</h3> <div class="right">全部<span class="icon">></span&

解决方案1：/*! autoprefixer: off */ -webkit-box-orient: vertical;/* autoprefixer: on */解决方案2:把 -webkit-box-orient: vertical;写入行内样式中也可以<p style="-webkit-box-orient: vertical;"><p/>...

input[type="checkbox"]{ -webkit-appearance: none; vertical-align:middle; margin-top:0; background:#fff; border:#999 solid 1px; border-radius: 50%; min-height: 22px; min-width: 22px; outli...

常见class关键词：布局类：header, footer, container, main, content, aside, page, section 包裹类：wrap, inner 区块类：region, block, box 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span 列表类：li...

试了下直接在代码里使用\n 是不能生效的 .el-table .cell { text-align: center; white-space: pre-line;/*保留换行符*/ }在代码里面使用\n 就可以生效了 initName(row, column, cellV...

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);原理：  理解     1.绝对定位元素的定位基准点是其有定位元素的祖先元素     2.而translate要做偏移，是相对于自身的中心点而言，如果用百分比做单位，参考值就是本身元素的宽度...

使用绝对定位       左右使用绝对定位 由于绝对定位脱离标准流  center会自动在左右的下面 使用margin 留出左右元素的宽度 这样可以使中间自适应了     div 元素 <div class="boxleft">left</div> <div class="boxcenter">content</div> &lt

作者：David继续之前，你现在需要了解最基本的CSS知识，比如：CSS用以描述HTML文档的样式，让页面更加美观如何引入CSS代码CSS的基本语法如何使用CSS的选择器这里我们来理解一下CSS的基本原理。先想象一下如果自己来开发一个CSS的渲染引擎，我们会怎么来做？得到了HTML元素构成的一个树状结构，首先要做的事情是不是就要在一个页面上把各个HTML元素按照一定的顺序排列出

/* html5doctor.com Reset Stylesheetv1.4.1 2010-03-01Author: Richard Clark - http://richclarkdesign.com*/html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr,

如何让图片按比例响应式缩放、并自动裁剪的css技巧同时也适用于一些轮播父容器响应式缩放来源响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时， 如果想要图片按比例缩放， 最简单的就是把img宽度设为100%， 不设置高度，高度就会自动跟着高度缩放但是如果要达到的效果是，要让图片的宽高要按一定的比例显示，如1：1 、4：3 等， 然而图片尺寸不是这个比例，又不...

作者：Jaskey Lam链接：https://www.zhihu.com/question/20543196/answer/577578361.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行： parentElement{ position:relative; }   childElement{ position: absol...

　　我们可能都知道浏览器含有一个渲染引擎，用来渲染窗口所展示的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，用于显示PDF格式。但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧。这些天研究了一下浏览器的渲染原理，有了些心得，在这里跟大家分享一下，这里只讨论渲染引擎最主要的用途——显示应用了CS...

方法一使用一个空标签<div class="content"> <div class="col-1">布局1</div> <div class="col-2">布局2</div> 内容 <div class="clear"&gt

来源 https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML、CSS的基本布局技能，但是有可能还有一些难以琢磨透的专业名词还不是很清楚，比如BFC。今天我们就来聊聊对BFC的理解，以便我们在布局的过程中能够更加得心应手。概念BFC(Block Formatting Cont...

摘要：本文总结了开始使用CSS布局方法以来所有的技巧和兼容方案。　　一、使用css缩写　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。　　二、明确定义单位，除非值为0　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确