Summary of experience in using div box model
|
Calculation of the box model <br />Margin + border + padding + content The width and height in CSS only set the height and width of the content area. Not the height and width of the entire model. Copy code The code is as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <style type="text/css"> *{margin:0; padding:0;} dl { background:red;border:10px solid #000; width:100px; height:100px;} dt { background:yellow;} dd { background:green;} </style> </head> <body> <dl> <dt>test of dt</dt> <dd>test of dd</dd> </dl> </body> </html> Setting margins and padding will not affect the height and width of the content area, but only change the height and width of the secondary box model area. When the box models are nested, the inner box model will affect the outer box model. |
<<: The actual process of implementing the guessing number game in WeChat applet
>>: The difference between animation and transition
Recommend
Tomcat's class loading mechanism process and source code analysis
Table of contents Preface 1. Tomcat class loader ...
JavaScript implementation of the Game of Life
Table of contents Concept Introduction Logical ru...
Vue project realizes paging effect
The paging effect is implemented in the vue proje...
CSS example code for implementing sliding doors
The so-called sliding door technology means that ...
Deploy Varnish cache proxy server based on Centos7
1. Varnish Overview 1. Introduction to Varnish Va...
MySQL database query performance optimization strategy
Optimize queries Use the Explain statement to ana...
How to set an alias for a custom path in Vue
How to configure custom path aliases in Vue In ou...
Detailed tutorial on building a continuous integration delivery environment based on Docker+K8S+GitLab/SVN+Jenkins+Harbor
Table of contents Environment Setup Overview 1.Wh...
CSS to achieve text on the background image
Effect: <div class="imgs"> <!-...
Detailed process of changing apt source to Alibaba Cloud source in Ubuntu 18.04
Table of contents Preface: Ubuntu 18.04 changes a...
The difference between html block-level tags and inline tags
1. Block-level element: refers to the ability to e...
How to represent various MOUSE shapes
<a href="http://" style="cursor...
Complete steps for Docker to pull images
1. Docker pull pulls the image When using $ docke...
What are the new CSS :where and :is pseudo-class functions?
What are :is and :where? :is() and :where() are p...
5 Simple XHTML Web Forms for Web Design
Simple XHTML web form in web design 5. Technique ...