Introduction to css box model
Box model
1 Area in the box
<1>Main properties of the box:
width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 padding 内边距 border 边框 margin 外边距
<2> ;The actual occupied width and height of the following two boxes are exactly the same, both are 302*302:
.box1{
width:100px;
height:100px;
padding:100px;
border:1px solid red;}
计算如下：1+100+100+100+1=302px.box2{
width:250px;
height:250px;
padding:25px;
border:1px solid red;}
计算如下：1+25+250+25+1=302px
上面代码中盒子的真实占有宽度计算公式：
真实占有宽度=左border+左padding+width+右padding+右border<3>If you want to keep the actual occupied width of a box unchanged, then increase the width and reduce the padding , adding padding means reducing width.
2. Understand padding
<1>The padding area has a background color. In CSS2.1, the background color must be the same as the content area.
<2>Padding is in 4 directions, so we can describe padding in 4 directions respectively.
The first type: small attributes, that is, composite attributes.
padding-top:30px; 上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左
The second type: comprehensive attributes.
Separated by spaces, top, right, bottom and left.
padding:30px 20px 40px 100px;
<3>You can use small attributes to stack large attributes (you cannot write small attributes in front of large attributes):
padding:20px;padding-left:30px;
Question 1:
p{
width:200px;
height:200px;
padding-left:10px;
padding-right:20px;
padding:40px 50px 60px;
padding-bottom:30px;
border:1px solid #000;
}Answer: padding -left:10px; and padding-right:20px; are useless, because the subsequent padding attribute overlays them.
<4>Some tags have padding by default. For example, ul. So, when we build the website, we will clear this default padding.
3.border border
<1>The three elements of the border: thickness, line type, and color.
<2>All line types:
none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。 常用的有：solid 、dashed、 dotted
<3>The border attribute can be split, there are two major ways to split it:
First Type: By element
border-width:10px; 边框宽度border-style:solid; 线型border-color:red; 颜色等价于：border:10px solid red;
If a small element is followed by multiple values separated by spaces, then the order is top, right, bottom, left:
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
Second type: By direction
The first method of disassembly:
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于：border:10px solid red
The second method of disassembly is to dismantle each element in each direction:
border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;等价于：border:10px solid red;
<4> You can use the border to make a triangle.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
p{
width: 0px;
height: 0px;
border: 30px solid white;
border-top-color: pink;
transition:all 1s ease 0s;
}
p:hover{
transform: rotate(180deg);
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>4. Standard document flow
4.1 Block-level elements and inline elements
<1>From a macro perspective, web pages and design software such as PS are essentially different Avoid:
Web page production, from top to bottom. With design software, you can draw wherever you want.
<2>Microscopic properties of standard flow:
(1) Blank folding phenomenon.
(2) The height is uneven, and the bottom edges are aligned.
(3) Automatically wrap the line. If you can’t finish writing in one line, wrap it in a new line.
<3>Block-level elements and inline elements
(1) Tags are divided into two levels: block-level elements and inline elements.
(2) Block-level elements:
霸占一行，不能与其他任何元素并列。 能接受宽高。 如果不设置宽度，那么宽度将默认变为父亲的100%。
(3) Inline elements:
可以与其他行内元素并排。 不能设置宽高。默认的宽度，就是文字的宽度。
(4) Labels are divided into: text level and container level.
文本级：p、span、a、b、i、u、em 容器级：p 、h系列 、li 、dt 、dd
Basically all text-level tags are inline elements. Except for p, it is a block-level element.
All container-level tags are block-level elements.
4.2 Conversion between block-level elements and inline elements
<1>Block-level elements can be set to inline elements. Inline elements can be set as block-level elements.
<2>display is used to change the inline and block-level properties of elements.
display:inline; 这个标签将会变为行内元素。 display:block; 这个标签将会变为块级元素。
<3>There are three methods in CSS to separate an element from the standard document flow.
(1) Floating
(2) Absolute positioning
(3) Fixed positioning
5. Floating: It is the most commonly used attribute for layout in CSS.
5.1 Floating elements are off-script
5.2 Floating elements are close to each other
<1>If there is enough space, they will be close to the second brother. If there is not enough space, he will lean on Brother Yi. If there is not enough space to lean against Brother 1, stick to the left wall yourself.
<2>float:left/right;
5.3 Floating elements have a "word circumference" effect
The above is the detailed content of Introduction to css box model. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
