前言flex布局大家应该已经运用的炉火纯青了，相信在日常开发中大家和我一样不管遇到什么都是flex一把搜哈。直到我遇到grid，才发现有些场景下，不是说flex实现不了而是使用grid能够更加轻松的完成任务。下面拿几个场景和大家分享一下。宫格类的布局比如我要实现一个布局，最外层元素的宽度是1000px，高度自适应。子元素宽度为300px，一行展示3个，从左到 …
前端 布局
什么是网格布局？先看一个例子：简单来说网格布局就是display: grid，将元素定义为一个网格容器，内部的子元素则变成网格元素。display: grid; 定义网格容器grid-template-columns: 1fr 1fr 1fr; 定义等宽的3列grid-template-rows: 1fr 1fr;定义等高的两行grid-gap: .5em; …
转载说明：原创不易，未经授权，谢绝任何形式的转载可视化编辑本小节，我们将快速学习下如何在Xcode 里如何使用不写代码，通过可视化功能创建一个简单的UI卡片和如何布局。1、Inspector（检查器）您可以使用检查器来编辑您的样式，例如文本内容、字体、粗细、颜色等。每次编辑时，相关的样式效果和代码将会实时展示在编辑器里。就像在设计工具中一样，如下所示，最右边 …
大家好，我是三木。这篇文章，替大家汇总了css的布局方式，在每个布局的结尾附上了我认为比较好的文章链接，不仅仅可以当作学习资料，也可以当作方法的查询手册，以后开发的时候忘记了某个属性就来查查。看完推荐的文章保准解决你 99% 的css布局问题每篇文章不仅仅包含介绍，还有代码案例，以及如w3c网站的在线代码编辑，可以自己修改属性尝试。普通布局使用方法——dis …
什么是DIV？ DIV是层叠样式表中的定位技术，全称DIVision或叫做划分。在网站制作中DIV元素一般是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。当使用DIV+CSS布局的时候， 主要把它当做盒子然后把需要的文字，图像等内容放在DIV标签之中，它可称作为“DIV block”，或“DIV element”或“CSS- …
HTML5的结构化标签，对搜索引擎更友好li 标签对不利于搜索引擎的收录，尽量少用banner图片一般拥有版权，不需要搜索引擎收录，因此可以使用ul + li可用于浅色副标题display:inline-block; 每个导航块存在水平间隙，解决方法是在父元素上添加font-size:0; sublime安装csscomb插件选中css代码，ctrl+shi …
什么是可视化拖拽可视化拖拽是一种基于图形化界面的用户交互方式，通过拖动界面上的对象实现操作。它可以用于各种场景，如可视化布局、数据呈现、参数配置等。与传统的命令行或菜单选择方式不同，可视化拖拽可以使用户更直观地操作界面，提升用户体验。在可视化拖拽中，通常会有一个源对象和一个目标对象，源对象可以通过鼠标或手势进行拖动，并移动到目标对象上。目标对象可能会有一些响 …
概念：Box:Box 是 CSS 布局的对象和基本单位，一个页面是由很多个 Box 组成的，这个 Box 就是我们常说的盒模型Block Formatting Cotext:块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位以及和其他元素的关系和相互作用块级格式化上下文(Block Formatting Cotext， …
前言在css3 Flex技术出现之前制作网页大多使用浮动（float）、定位（position）以及 显示（display）来布局页面，随着互联网快速发展，移动互联网的到来，已无法满足需求，它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。什么是 Flex？Flex 是 Flexible Box 的缩写，是 CSS3 中的一种新的布局模式，可以简便、 …
这个年代，几乎任何一个像样的网页桌面端产品都会需要响应式布局。可无奈除了Figma之外，包括Sketch在内的大部分设计工具都缺少响应式布局功能。这就导致很多设计师对响应式布局一直处于雾里看花的状态，缺乏清晰的结构化认知。网上大部分文章讲响应式时，都会把容器、图片、文字等不同的元素拆开来讲，这样就搞得更复杂了。作为一个前端出身的设计师，感觉这东西从底层逻辑拆 …