布局
ConstraintLayout属性大全解析
ConstraintLayout属性⼤全解析Android 上⾯布局嵌套层级直接影响 UI 界⾯绘制的效率，如果 UI 嵌套层级太多会导致界⾯有，⽬前对于复杂的界⾯，使⽤ 也⽆法解决。所以 Android UI 团队就在Google IO 开发者⼤会上发布了⼀个新的布局控件 — ConstraintLayout。ConstraintLayout 可以看做 RelativeLayout...
css折叠样式(4)——div+css布局
css折叠样式（4）——div+css布局内容概要：⼀、div和span(1)块级标签：div(2)内联标签：span如图所⽰：padding是外边距还是内边距⼆、盒模型(重要)注：可⽤浏览器的调试⼯具可查看盒⼦（1）margin：盒⼦外边距（2）padding：盒⼦内边距（会改变块的⼤⼩）（3）border：盒⼦边框宽度（4）width：盒⼦宽度（5）height：盒⼦⾼度例⼦：①：外边距和内边...
PlasmicStudio入门教程
PlasmicStudio⼊门教程本⽂内容来源于 教程⽂件，结合个⼈理解整理，不完全按照原⽂翻译。如有表述不当，敬请指正。加粗⽂字为个⼈注解，或与 Figma 操作不同之处。黄底背景⾊⽂字为官⽅说明，主要指在前端开发中的注意事项。阅读本⽂时，请搭配官⽅教程⽂件⼀边学习⼀边上⼿实践。官⽅教程⽂件在登录后的项⽬列表页⾯上⽅即可获取。欢迎1. 按PageUp/PageDown或Fn+↑/Fn+↓可快速切...
前端面试校招问题准备(总结)
前端⾯试校招问题准备（总结）前端点⼤⽽驳杂，⾯试前的准备往往会感到⽆所适从。在web开发的中，六项基础知识还是新⼿所必须掌握的：HTML、CSS、JavaScript、移动Web开发、调试、HTTP⽹络知识。HTML1.常⽤的meta头；2.通过你对标签语义化的理解来判断你能否写出更规范的HTML代码；3.HTML5新增的能⼒；4.HTML的渲染解析知识，⽐如为什么CSS放前⾯JS放后⾯，怎么理解...
css布局详解(二)——标准流布局(Nomalflow)
css布局详解（⼆）——标准流布局（Nomalflow）css标准流布局（Nomal flow）⼀、正常流这是指西⽅语⾔中⽂本从左向右，从上向下显⽰，这也是我们熟悉的传统的HTML⽂档中的⽂本布局。注意，在⾮西⽅的语⾔中，流⽅向可能不同。⼤多数元素都在正常流中，要让⼀个元素不在正常流中，唯⼀的⽅法就是使之成为浮动元素或定位元素。标准流中，块级元素独占⼀⾏，垂直放置。⾏级元素在⽔平⽅向上⼀个接⼀个的...
DIV+CSS布局开发的盒子模型
DIV+CSS布局开发的盒⼦模型HTML的开发⼀般都使⽤div+css，⽤盒⼦进⾏布局，⽽盒⼦分为W3C盒⼦和IE盒⼦两种具体使⽤以及区别在下⾯。基本属性：padding是外边距还是内边距1. margin：布局元素之间的间隙称外边距，例如⽗元素与⼦元素之间、兄弟元素之间。注：margin：兄弟元素之间，⽔平⽅向间隙margin的值相加，垂直⽅向间隙margin重叠2. padding：填充属性⼜...
前端css知识笔记
前端css知识笔记 前端CSS知识笔记。 CSS（层叠样式表）是前端开发中的一项重要技术，用于控制网页的样式和布局。下面是一份关于前端CSS知识的笔记，涵盖了常用的CSS属性和技巧。 一、CSS选择器。 1. 标签选择器，选择指定标签的元素，例如p、div、h1等。 2...
HTML中margin外边距的基本知识点
HTML中margin外边距的基本知识点padding是外边距还是内边距margin ：外边距可以改变盒⼦和盒⼦之间的距离,在进⾏布局时，遵循以下原则, 从上往下 从左往右设置margin-top会将盒⼦⾃⾝往下推margin-bottom会将与其相邻同级元素向下推,⼀般我们在布局同级元素之间优先使⽤margin-top来按照从上往下的原则进⾏样式设置设置margin-left会将盒⼦⾃⾝往右推设...
(二)css盒子模型
属性作⽤padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-bottom 下内边距写法意思padding:10px；上下左右内边距均为 10像素padding:5px 10px；上下内边距是5像素，左右内边距是10像素padding:5px 10px 15px；上内边距是5px ，左右内边距是10px ，下边距是15px paddi...
bootsrap外边距_Bootstrap网格系统布局详解
bootsrap外边距_Bootstrap⽹格系统布局详解Bootstrap 提供了⼀套响应式、移动设备优先的流式⽹格系统(Grid System)，随着屏幕或视⼝(viewport)尺⼨的增加，系统会⾃动分为最多12列。⼀、什么是⽹格(Grid)?在平⾯设计中，⽹格是⼀种由⼀系列⽤于组织内容的相交的直线(垂直的、⽔平的)组成的结构(通常是⼆维的)。它⼴泛应⽤于打印设计中的设计布局和内容结构。在⽹...
解决外边距的塌陷方法
解决外边距的塌陷方法 外边距的塌陷是指在HTML中，相邻的两个元素之间的外边距会合并成一个较大的外边距的现象。这可能会导致页面布局出现意外的空白或间距，影响页面的美观性和排版效果。下面介绍几种解决外边距塌陷的方法。1. 使用padding替代margin：将外边距应用于元素的父级元素的内边距而不是元素本身，可以有效地避免外边距的塌陷。这样做的好处是在不影响元素的布局的同时...
CSS中的外边距折叠现象
CSS中的外边距折叠现象CSS（层叠样式表）是一种用来描述网页上元素样式的标记语言，它可以控制网页中的字体、颜、排版等属性。在CSS中，外边距折叠（Margin Collapsing）是一个常见且重要的现象，它会影响到元素的排布和布局。本文将介绍CSS中的外边距折叠现象，并探讨其原理及应用。一、什么是外边距折叠现象padding是外边距还是内边距外边距折叠是指当两个相邻的块级元素在垂直方向上相遇...
css margin传递和折叠的原理及解决方法
css margin传递和折叠的原理及解决方法一、概述在CSS中，margin是一种用于控制元素外边距的属性，它会影响元素与其他元素之间的空间。当两个或更多的元素有外边距重叠时，会发生margin的传递和折叠。理解这些概念对于正确地布局网页非常重要。二、margin传递当两个元素的margin重叠时，较宽的margin会传递给相邻元素。这是因为在CSS中，当两个margin重叠时，只有较宽的那个m...
html空格写法
HTML空格写法是指如何在HTML代码中创建空格的方式。在HTML中，空格是非常重要的元素，因为它们可以影响页面的布局和可读性。下面是一些常见的HTML空格写法，供您参考：1. 使用HTML实体字符：在HTML中，可以使用一些特殊的实体字符来表示空格，例如“?”（不间断空格）、“?”（普通空格）和“?”（全角空格）。这些实体字符在大多数情况下都可以正确地显示为空格。例如：```html<p&...
前端css知识要点
前端CSS知识要点主要包括以下几个方面：一、选择器与样式1. 选择器是用于选择HTML元素的关键字或类名，用于应用CSS样式。2. 样式是通过CSS代码定义元素的外观和布局。二、盒模型padding是外边距还是内边距1. 盒模型是CSS布局的基础，它由内容区、边框、外边距（margin）和内边距（padding）组成。2. 在盒模型中，元素的宽度和高度仅包括内容区，而边框和外边距不会占用额外的空间...
HTML中关于内边距(paddiing)外边距(margin)使用
HTML中关于内边距（paddiing）外边距（margin）使⽤⾸先内边距基本格式padding-top: ;padding-right: ;padding-bottom: ;padding-left: ;缩写形式padding：上右下左；上代码1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8"/&g...
盒子模型宽高值的计算方式
盒子模型宽高值的计算方式（原创实用版）1.盒子模型的概念及组成部分 2.盒子模型宽度和高度的计算方式 3.盒子模型在网页布局中的应用 4.总结正文一、盒子模型的概念及组成部分盒子模型（Box Model）是 CSS 中用于设计和布局的一种概念，它将所有 HTML 元素看作一个盒子，这个盒子由内容（Content）、内边距（Padding）、边框（Border）和...
前端项目页面布局(流式+flex)
前端项⽬页⾯布局（流式+flex）页⾯布局：流式布局（百分⽐）+弹性布局（flex）。1.将页⾯ html,bodey设置宽⾼百分百html,body{width: 100%;height: 100%;}2.使⽤flex弹性布局<style>.box{display: flex;flex-direction:row;justify-content:center;align-items:...
绝望的scroll-view不滚动和高度设置无效问题合集
绝望的scroll-view不滚动和⾼度设置⽆效问题合集各位如果也有被弄到怀疑⼈⽣的话可以⼀看，如果没有到此程序的话继续左捣捣右弄弄吧，莫许⼀下就正常了的。⽬前碰到scroll-view相关的问题⼀般都可以直接定位到没设置⾼度（或宽度），要么是设置了⽆效。如果是没设置⾼度或宽度还好说，直接设置个差不多的⾼度就搞惦了，最怕的就是设置后⽆效，还死活看不出来原因。⽐⽅说像我，硬是要冒天下之⼤不韪作死设置...
移动web学习笔记
移动web学习笔记移动web viewport设置1. 流式布局 ：就是百分⽐布局，⾮固定像素，内容向两侧填充，理解成流动的布局，称为流式布局；2. 视觉窗⼝：viewport，是移动端特有。这是⼀个虚拟的区域，承载⽹页的；承载关系：浏览器---->viewport---->⽹页；3. 标准移动端适配⽅案 ：（1）⽹页宽度必须和浏览器保持⼀致；（2）默认显⽰的缩放⽐例和PC端保持（缩放...
10分钟理解CSS3Grid布局
10分钟理解CSS3Grid布局基本介绍上⼀篇⽂章我们介绍了，今天我们再来说说css3的另外⼀个强⼤的功能：Grid。Grid做前端的同学应该都很熟悉了，翻译成中⽂为“栅格”，⽤过bootstrap、semantic ui、ant design的同学肯定都了解grid layout（删格布局），以往css框架中的grid布局⼀般是通过float和百分⽐的宽度实现的，这种实现有⼏种缺点：html不够...
FLEX布局的一些问题和解决方法
FLEX布局的⼀些问题和解决⽅法前⾔露珠最近研究了⼀下flex的布局⽅式，发现项w3c推出的这套布局解决⽅案对于⽇益复杂的前端开发布局来说是确实是⼀利器，并且在不同的屏幕上实现了真正的响应式布局：不再单纯地依赖百分⽐和float的强拼硬凑来达到设计需求，在各个屏幕上显⽰效果友好，弹性的伸缩元素，简洁易维护的代码。只可惜，这位⽼兄有⼀位致命的缺点----除了chrome外⼏乎所有⼿机上浏览器都没有兼...
android约束布局总结(ConstraintLayout)
android约束布局总结（ConstraintLayout）本⽂章供个⼈学习查看，如果学习直接去⼤佬链接：ConstraintLayout动画使⽤的两种⽅式：代码中：，布局中：认识：约束布局可以减少布局的嵌套，提⾼性能属性：1：相对位置：layout_constraintLeft_toLeftOflayout_constraintLeft_toRightOflayout_constraintRi...
流式布局(百分比布局)
流式布局（百分⽐布局）定义流式布局，就是百分⽐布局，也称⾮固定像素布局。通过盒⼦的宽度设置成百分⽐根据屏幕的宽度进⾏伸缩，不受固定像素的限制，内容向两侧填充。在早期⽤来应对不同尺⼨的PC端，如今也是移动开发使⽤的⽐较常见的布局⽅式。max-*、min-*百分⽐布局经常搭配这两个使⽤⽐如所选区域占宽75%，但是将视觉视⼝调⼩⼜需限制其最⼩宽度，所以往往通过min-width限制，在定义图⽚时往往使⽤...
Html5移动端页面自适应百分比布局
Html5移动端页⾯⾃适应百分⽐布局按百分⽐布局，精度肯定不会有rem精确1<!DOCTYPE html>2<html lang="en">34<head>5<meta charset="UTF-8">6<meta name="viewport" content="width=device-width,initial-scale=1 user-...
安卓百分比布局
安卓百分⽐布局1. Recycle机制原理便是维护⼀个对象池，将不再使⽤但是可能再次使⽤的对象引⽤保留在这个对象池⾥，下次需要的时候来到这个对象池获取。Android经常使⽤这个机制，例如Message类，特地注意⼀下，由于这个机制， 使⽤Message时，不能调⽤其recycle（）⽅法，这会导致Message内部的链表（该链表⽤来存储Message对象）变成循环链表，Message的Recyc...
Android-ConstraintLayout约束布局使用
Android-ConstraintLayout约束布局使⽤⼀、ConstraintLayout基础属性详解属性描述app:layout_constraintLeft_toLeftOf把A的left side放在B的left side（左边对齐）app:layout_constraintLeft_toRightOf把A的left side放在B的right side（左边相对右边对齐）app:la...
PC端页面适配
PC端页⾯适配pc端的适配需求：⽬前我们pc项⽬的设计稿尺⼨是宽度1920，⾼度最⼩是1080。适配⽬标：1.在不同分辨率的电脑上，⽹页可以正常显⽰2.放⼤或者缩⼩屏幕，⽹页可以正常显⽰对于宽度的适配对于宽度适配：⾸先设置html,body{width:100%;overflow-x:hidden;}然后我们可以把页⾯分解为背景层(⼀般宽度都会⼤于1200px)和内容层(⼀般宽度都会⼩于1200p...
html计算宽度,巧用CSS3的calc()宽度计算做响应模式布局
html计算宽度，巧⽤CSS3的calc（）宽度计算做响应模式布局今天浏览⼤前端发现了 巧⽤CSS3的calc()宽度计算做响应模式布局 这篇⽂章，在本地也做了简单的demo演⽰，对我启迪还挺⼤，所以果断码之… 原⽂如下：于是就研究了⼀下，calc()从字⾯我们可以把他理解为⼀个函数function。其实calc是英⽂单词calculate(计算)的缩写，是css3的⼀个新增的功能，⽤来指定元素的...
html流式布局怎么用,HTML5漫谈-04-流式布局
html流式布局怎么⽤,HTML5漫谈-04-流式布局HTML 5漫谈-04-流式布局流式布局的关键，是⽤百分⽐设计HTML元素的with、margin和padding属性。⾸先看⼀段HTML和CSS代码，如代码清单4-1所⽰。------------------------------------------------------------------------ 代码清单 4-1-----...
