当前位置：网站首页>43 box model
43 box model
2022-07-25 14:46:00 【hello_ sunny123】
One . Frame
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08- The frame of the box model .html</title>
<style> div {
width: 300px; height: 200px; /* border-width: The thickness of the border Usually use px; */ border-width: 5px; /* border-style: The style of the border solid Solid line frame dashed Dotted border dotted Dotted border */ /* border-style: The style of the border solid Solid line frame */ border-style: solid; /* border-style: The style of the border dashed Dotted border */ /* border-style: dashed; */ /* border-style: The style of the border dotted Dotted border */ /* border-style: dotted; */ /* border-color: Color of border */ border-color: pink; } </style>
</head>
<body>
<div></div>
</body>
</html>
result
Two . Composite writing
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08- Composite writing .html</title>
<style> div {
width: 300px; height: 200px; /* border-width: 5px; */ /* border-style: The style of the border solid Solid line frame dashed Dotted border dotted Dotted border */ /* border-style: solid; */ /* border-color: pink; */ /* The compound writing of border Abbreviation */ /* border: 5px solid pink; */ /* On the border */ border-top: 5px solid pink; /* Under the frame */ border-bottom: 10px dashed purple; /* The left margin */ border-left: 5px solid #000; /* Right margin */ border-right: 5px solid red; } </style>
</head>
<body>
<div></div>
</body>
</html>
result
Exercise code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Border exercise </title>
<style> div {
/* Give me a 200*200 Box , Set the top border to red , Other borders are blue */ width: 200px; height: 200px; /* border Contains four sides */ border: 10px solid blue; /* Layering Only the top border is stacked */ border-top: 10px solid red; } </style>
</head>
<body>
<div></div>
</body>
</html>
result
3、 ... and . Table thin line border
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Novel ranking </title>
<style> table {
width: 500px; height: 249px; } th {
height: 35px; } table, td, th {
border: 1px solid pink; /*border-collapse Merge adjacent borders */ border-collapse: collapse; font-size: 14px; text-align: center; } </style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th> ranking </th>
<th> key word </th>
<th> trend </th>
<th> Search today </th>
<th> The last seven days </th>
<th> Related links </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> Ghost blows </td>
<td><img src="images/down.jpg" /></td>
<td>345</td>
<td>123</td>
<td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
</tr>
<tr>
<td>2</td>
<td> The Lost Tomb </td>
<td><img src="images/up.jpg" /></td>
<td>124</td>
<td>675432</td>
<td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
</tr>
<tr>
<td>3</td>
<td> Journey to the west </td>
<td><img src="images/down.jpg" /></td>
<td>212</td>
<td>7654</td>
<td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
</tr>
<tr>
<td>4</td>
<td> Journey to the East </td>
<td><img src="images/down.jpg" /></td>
<td>23</td>
<td>75645</td>
<td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
</tr>
<tr>
<td>5</td>
<td> Zhen Huan preach </td>
<td><img src="images/up.jpg" /></td>
<td>121</td>
<td>7676</td>
<td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
</tr>
<tr>
<td>6</td>
<td> Water margin </td>
<td><img src="images/down.jpg" /></td>
<td>576576</td>
<td>1231421</td>
<td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
</tr>
<tr>
<td>7</td>
<td> The romance of The Three Kingdoms </td>
<td><img src="images/down.jpg" />></td>
<td>234</td>
<td>7686</td>
<td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
</tr>
</tbody>
</table>
</body>
</html>
result
Four .（1） The border will affect the actual size of the box
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12- The border will affect the actual size of the box </title>
<style> div {
width: 180px; height: 180px; background-color: pink; border: 10px solid red; } </style>
</head>
<body>
<div></div>
</body>
</html>
result
Four .(2) padding
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13- The inside margin of the box model </title>
<style> div {
width: 200px; height: 200px; background-color: pink; padding-left: 20px; padding-top: 30px; padding-right: 20px; } </style>
</head>
<body>
<div>
The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content
</div>
</body>
</html>
result
Four . padding padding attribute ： above 4 Kind of , In development, you will encounter
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14- Compound writing method of inner margin of box model </title>
<style> div {
width: 200px; height: 200px; background-color: pink; /* padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; */ /* Inside margin compound writing */ /* Followed by a number ： It means up, down, left and right 5px*/ /* padding: 5px; */ /* Followed by two numbers ： Up and down are 5px Right and left are 10px*/ /* padding: 5px 10px; */ /* Followed by three numbers ： On behalf of 5px Right and left are 10px Next is 20px*/ /* padding: 5px 10px 20px; */ /* Followed by three numbers ： On behalf of 5px On the right is 10px* Next is 20px Left is 30px Clockwise */ padding: 5px 10px 20px 30px; } </style>
</head>
<body>
<div>
The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content
</div>
</body>
</html>
result
5、 ... and . The inner margin affects the actual size of the box
Code ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15- The inner margin affects the actual size of the box </title>
<style> div {
/* width: 200px; height: 200px; */ /* In order to avoid supporting a big box 200-20*2=160 */ width: 160px; height: 160px; background-color: pink; padding: 20px; } </style>
</head>
<body>
<div>padding Will affect the actual size of the box padding Will affect the actual size of the box padding Will affect the actual size of the box padding Will affect the actual size of the box padding Will affect the actual size of the box </div>
</body>
</html>
result
边栏推荐
- 37 element mode (inline element, block element, inline block element)
- Niuke multi school E G J L
- Realsense-Ros安装配置介绍与问题解决
- Go language founder leaves Google
- filters获取data中的数据；filters使用data中的数据
- IP address classification, which determines whether a network segment is a subnet supernetwork
- QT connect, signal, slot and lambda comparison
- D2. Chopping Carrots (Hard Version) （每日一题）
- Gateway 网关报错 SERVICE_UNAVAILABLE
- 基于AMD EPYC服务器的EDA芯片设计解决方案
猜你喜欢
Development of uni app offline ID card identification plug-in based on paddleocr
37 element mode (inline element, block element, inline block element)
基于浏览器的分屏阅读
GameFramework制作游戏（二）制作UI界面
51 single chip microcomputer learning notes (2)
Browser based split screen reading
![Number of high-quality number pairs [bit operation characteristics + abstract ability evaluation + grouping fast statistics]](/img/c9/8f8f0934111f7ae8f8abd656d92f12.png)
Number of high-quality number pairs [bit operation characteristics + abstract ability evaluation + grouping fast statistics]
English grammar_ Indefinite pronoun - other / other
I2C设备驱动程序的层次结构
I hope some suggestions on SQL optimization can help you who are tortured by SQL like me
随机推荐
QT connect, signal, slot and lambda comparison
牛客多校 E G J L
应用实践：Paddle分类模型大集成者[PaddleHub、Finetune、prompt]
微信公众号正式环境上线部署，第三方公众平台接入
51单片机学习笔记（2）
国联证券买股票开户安全吗？
SSM framework integration, simple case
Gonzalez Digital Image Processing Chapter 1 Introduction
[Nuxt 3] (十一) 传送 ＆ 模块
Practical guide for network security emergency response technology (Qianxin)
Thymeleaf setting disabled
32 use of chrome debugging tools
Live classroom system 05 background management system
PS making and loading GIF pictures tutorial
45padding won't open the box
Realsense ROS installation configuration introduction and problem solving
How to use the random number function of JMeter
I hope some suggestions on SQL optimization can help you who are tortured by SQL like me
用GaussDB(for Redis)存画像，推荐业务轻松降本60%
Awk from getting started to digging in (20) awk parsing command line parameters