Some front-end basics (html, css) encountered in practice
|
1. The div css mouse hand shape is cursor:pointer; 2. HTML relative and absolute layout note: absolute says that when the position attribute is set to absolute, it is always positioned according to the browser window, which is actually wrong. When the position of sub1 is set to absolute, who is the object for offset? There are two situations here: (1) When the parent object (or great-grandfather, as long as it is a parent object) of sub1 also sets the position attribute, and the position attribute value is absolute or relative, that is, it is not the default value, then sub1 is positioned according to this parent. Note that although the object has been determined, there are some details that require your attention, that is, which anchor point of the parent should we use for positioning? If parent sets properties such as margin, border, padding, etc., then this anchor point will ignore padding and will be positioned from the beginning of padding (that is, only from the upper left corner of padding). This is different from the idea that we would take it for granted that the positioning will start from the upper left end of margin. The next question is, where is the location of sub2? Because when position is set to absolute, sub1 will overflow the normal document flow, just like it does not belong to the parent, it floats up. In DreamWeaver, it is called a "layer", which actually means the same thing. At this point, sub2 will obtain the position of sub1, and its document flow is no longer based on sub1, but starts directly from parent. (2) If sub1 does not have a parent object with a position attribute, then the body will be used as the positioning object and the positioning will be performed according to the browser window. This is relatively easy to understand. 3. CSS transparency filter:alpha(opacity=0);opacity:0;-moz-opacity:0; Only when these three CSS are added together can it be compatible with all browsers 4. Window Relationships and Frames The top object always points to the highest (outermost) frame, which is the browser window. Use this to properly access any frame. Because for code written in a framework, the window object always points to a specific instance of that framework, not the top-level framework. For example, in a child frame, window refers to its own object. If you want to change the src of this frame and the src of the parent window's iframe or frame, you can't use window. In this case, you need to use window.top.$(selector) to access it. |
<<: CSS3 realizes the animation effect of lotus blooming
>>: HTML basics - CSS style sheets, style attributes, format and layout details
Recommend
Solution to the lack of my.ini file in MySQL 5.7
What is my.ini? my.ini is the configuration file ...
Detailed explanation of how Vue components transfer values to each other
Table of contents Overview 1. Parent component pa...
Solution to the problem of returning 0x1 when the Windows 2008 task plan fails to execute a bat script
Test environment: C:\>systeminfo | findstr /c:...
Node.js adds, deletes, modifies and checks the actual combat record of MySQL database
Table of contents Three steps to operate the data...
CSS Paint API: A CSS-like Drawing Board
1. Use Canvas images as CSS background images The...
Common scenarios and avoidance methods for index failure in MySQL
Preface I have read many similar articles before,...
Detailed explanation of the infinite restart problem when running the SpringBoot project docker environment
Maybe I started to think wrongly, and my descript...
Example of using HTML+CSS to implement a secondary menu bar when the mouse is moved
This article introduces an example of using HTML+...
In-depth analysis of the slow query problem of MySQL Sending data
Through an example, I shared with you the solutio...
Several navigation directions that will be popular in the future
<br />This is not only an era of information...
Example code for implementing WeChat account splitting with Nodejs
The company's business scenario requires the ...
Use of Linux passwd command
1. Command Introduction The passwd command is use...
Record the process of connecting to the local Linux virtual machine via SSH
Experimental environment: Physical machine Window...
Details on overriding prototype methods in JavaScript instance objects
Table of contents In JavaScript , we can usually ...
25 CSS frameworks, tools, software and templates shared
Sprite Cow download CSS Lint download Prefixr dow...