• CSS realizes automatic bottom pasting when the content height is not enough


    In the process of UI cutting, the page is usually composed of three parts: the head, the content and the bottom. When the content height of the page is not enough to cover the screen, the bottom (foot) will float up with the content. Due to the limited height of the small screen, no abnormality […]

  • The difference between flex and inline flex in CSS


    Inline flex, like inline block, is a display:flex The container is an inline block for external elements. The difference between them is described as follows Flex: displays the object as an elastic expansion box Inline flex: display objects as inline block level elastic expansion boxes In a word, when the flex box container does not […]

  • HTML CSS JS implementation tab TAB example code


    Copy code The code is as follows: <html xmlns=””> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gbk” /> <meta http-equiv=”Content-Language” content=”zh-CN” /> <meta name=”roots” content=”” /> <meta name=”Keywords” content=”” /> <meta name=”Description” content=”” /> <title></title> <style type=”text/css“> Body {font: “song style”; font- size:12px; }a:link,a:visited{font-size:12px;color:#666;text-decoration:none;} a:hover{color:#ff0000;text-decoration:underline;} #Tab{margin:0 auto;width:220px;border:1px solid #BCE2F3;} .Menubox{height:28px;border-bottom:1px solid #64B8E4;background:#E4F2FB;} .Menubox ul{list-style:none;margin:7px 40px;padding:0;position:absolute;} .Menubox ul li{float:left;background:#64B8E4;line-height:20px;display:block;cursor:pointer;width:65px;text-align:center;color:#fff;font-weight:bold;border-top:1px […]

  • CSS solves the problem of dislocation of inline block


    Don’t talk much about post code HTML section < div class = “positionleft” > I am the left side of position mode, accounting for 30% < / div > < div class = “positionright” > I am the right side of position mode, accounting for 70% < / div > CSS part .positionleft { position: […]

  • Using pure CSS to do a drop-down menu function of the sample code


    Introduction:When looking at the interview questions these days, I can often see a drop-down menu implemented with CSSI found that a lot of people failed to do it, and they could only do it with JS。 To be honest, I’m shocked. This function is very simple to implement, and even an introductory topic. How can […]

  • On CSS pseudo element & the magical use of pseudo class


    CSS plays a very important role in a web page. In recent years, with the development of CSS, pseudo elements / pseudo classes have also been widely used: in the current performance is more and more valued, CSS pseudo elements / pseudo classes outside the document stream are worthy of the “king without crown”! The […]

  • Implementation of CSS child element selecting parent element


    Usually, a CSS selector is selected from top to bottom, and the child element is selected through the parent element. Can the parent element be selected through the child element? <ul> <li> <a href=”#” class=”active”>1</a> </li> <li> <a href=”#”>2</a> </li> </ul> If I want to choose Li with a.active, how can I implement it? At […]

  • Implementation example of CSS screen size adaptation


    In order to realize the adaptive screen size of CSS, CSS3 @ media query is introduced first Usage and rules of media: ① The device on which the linked document will be displayed. ② Used to specify different styles for different media types. Grammar: @Media device name only (selection condition) not and (device selection condition), […]

  • Translate (- 50%, – 50%) in CSS to achieve horizontal and vertical centering effect


    Translate (- 50%, – 50%) attribute:Up and left, move 50% of its length and width to center it. Different from using margin to realize centering, margin must know its width and height, while translate can center without knowing its width and height. The percentage in tranlate function is relative to its width and height(when top […]

  • CSS selects the method to add styles to all child elements


    method: Take less as an example .lk-toolbar { .el-input { width: 169px; margin-right: 10px; } > * { margin-bottom: 20px; } } The above code successfully implements the margin bottom: 20px of all sub elements under. LK toolbar In this way, we can avoid listing all kinds of possible sub element types .lk-toolbar { .el-input […]

  • Implementation method of high consistency between CSS child element and parent element


    Absolute positioning method: (1) Set the parent element to relative positioning. If the height of the parent element is not written, it will change with the height of the child element on the left .parent { /*Key code*/ position: relative; /*Other styles*/ width: 800px; color: #fff; font-family: “Microsoft Yahei”; text-align: center; } (2) When an […]

  • Implementation of positioning CSS child element relative to parent element


    Solution Add to parent element position:relative;Add position:absolute; right:20px; code HTML structure <div id=”div1″> <div id=”div2″></div> </div> css #div1{ width:500px;height:500px; background-color:darkgray; position:relative; } #div2{ width:30px;height:30px; background-color:red; position:absolute; right:20px; } effect principle Browser rendering HTML, there is a saying of document flow, block level element line feed rendering, line element in line rendering, here, two div are […]