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
Complete steps to implement face recognition login in Ubuntu
1. Install Howdy: howdy project address sudo add-...
Implementation of tomcat image created with dockerfile based on alpine
1. Download the alpine image [root@docker43 ~]# d...
How to modify the port mapping of a running Docker container
Preface When docker run creates and runs a contai...
Detailed process of building mongodb and mysql with docker-compose
Let's take a look at the detailed method of b...
The pitfalls and solutions caused by the default value of sql_mode in MySQL 5.7
During normal project development, if the MySQL v...
Detailed explanation of various usages of proxy_pass in nginx
Table of contents Proxy forwarding rules The firs...
Methods for backing up Windows server files locally, Windows server data backup solutions
Important data must be backed up, and must be bac...
How to configure https for nginx in docker
Websites without https support will gradually be ...
Implementation of CSS scroll bar style settings
webkit scrollbar style reset 1. The scrollbar con...
Detailed explanation of JQuery selector
Table of contents Basic selectors: Level selector...
Detailed explanation of how to use Docker-Compose commands
You can manage and deploy Docker containers in a ...
How to force vertical screen on mobile pages
I recently wrote a mobile page at work, which was...
Vue implements button switching picture
This article example shares the specific code of ...
Analyzing ab performance test results under Apache
I have always used Loadrunner to do performance t...
Introduction to ufw firewall in Linux
Let's take a look at ufw (Uncomplicated Firew...