• CSS box hierarchy of somersault cloud navigation bar stepping pit (box occlusion, event flow bubbling)


    I TM never expected that such a simple JS demo would step on the pit, and the point of stepping on the pit was at the CSS box level. After comparing the JS, HTML and CSS of the case line by line, I found that my CSS lacked a position: absolute, which led to the […]

  • Code implementation of waterfall flow


    Implementation of waterfall flow Idea: first determine the width of the viewport, then determine the width of each block in the first row, and know how many blocks there are in the first row through both Secondly, push the height of each block in the first row into the ARR array to obtain the distance […]

  • CSS realizes the three column layout in the middle of the bottom of the head


    realization 1. Flex layout Flex flexible layout is more flexible to realize various forms of layout. At present, it is widely used in mobile terminal and PC terminal, which is not supported by ie+ 1.1 html <div class=”content”> <div class=”header”>Header</div> <div class=”main”> <div class=”left”>Left</div> <div class=”center”>Center</div> <div class=”right”>Right</div> </div> <div class=”footer”>Footer</div> </div> 1.2 css .content […]

  • Layout of CSS Foundation


    CSS layout: float, position, flex, transform, grid,:: After:: before Let’s talk about BFC first Block Formatting Contexts BFC is an independent layout environment, in which the element layout is not affected by the outside world. It is regarded as an isolated independent container. The elements in the container will not affect the outside elements in […]

  • Using flex to solve the problem of input positioning


    Use a simple layout to solve the problem of input in the input box using fixed Recently, I found that when the input box is at the bottom and used in the H5 chat application on the mobile terminalposition:fixedProperty will be incompatible in Apple phones The general layout is that the list at the top […]

  • You have to quietly learn 3D city and surprise everyone (4)


    In the process of 3D city construction, different effects are needed to realize different functions, such as adding water system, road, thermal map, etc. At this time, you need to understand the layer types of citybuilder. The layer types are divided into point layer, line layer and surface layer. Different types of layers have different […]

  • The magic of datasource developed by IOS and its elegant writing make it easy for you to control tableview


    brief introduction Recently, when refactoring the code written before, I found that almost every viewcontroller has a smelly and long code to define the tableviewdataSourceanddelegateSo I was thinking, is there a more elegant way to writedataSourceTherefore, cbtableviewdatasource is generated. Project address:https://github.com/cocbin/CBTableViewDataSource Before using cbtableviewdatasource // define a enum to split section typedef NS_ENUM(NSInteger, SectionNameDefine) { […]

  • Dynamic layout and content adaptive size of IOS uicollectionview


    In daily development, it often involves the display of some condition buttons and content labels. There are many attributes that need to be added. It is obviously too cumbersome and easy to implement with buttons image.png And if these labels need to be set dynamically, it will become more complex.This article implements these requirements through […]

  • [flutter 2-11] flutter handle tutorial UI layout and widget – list listview


    By VladSource Vlad (official account: fulade_me) ListView ListViewIt is a very common control on the mobile terminal, which is inseparable in most display scenariosListView。 stayFlutterMiddle pairListViewThe encapsulation of is also very good. A few lines of code can meet our needs to layout a rolling list. Let’s take a look at the constructor: ListView({ /// […]

  • Teach you how to make wheels with native JavaScript (V) — collapse folding panel


    file:CollapseSource code:tiny-wheelsIf you think it’s easy to use, order a star ~ (″ ‘▽’ ″) effect thinking The animation effect of each panel folding and unfolding is actually to controlcollapse-panelofheightChange, so you need to record the original height of each panel at the beginning. Otherwise, after folding the panel, the height will become 0. At […]

  • Vue uses native JS to realize the web side left-right scrolling linkage effect


    Problem description The effect of left-right linkage is common at the mobile terminal. For example, businesses in meituan takeout choose takeout products. The common solution is to use the better scroll sliding screen library. However, occasionally web-based projects will also have to do such a left-right linkage effect. This article uses native JS in Vue […]

  • CSS vertical center


    Vertical center CSSThe headache isVertical center。 realizationVertical centerThere are several ways, but each way has certain limitations, soVertical centerIt can be used according to the actual business scenario. The best way to center content in a container is to consider different factors according to a specific scenario. Before making a judgment, ask yourself the following […]