当前位置：网站首页>43 盒子模型
43 盒子模型
2022-07-25 14:41:00 【hello_sunny123】
一.边框
代码
<!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-盒子模型之边框.html</title>
<style> div {
width: 300px; height: 200px; /* border-width: 边框的粗细 一般情况下都用px; */ border-width: 5px; /* border-style: 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框*/ /* border-style: 边框的样式 solid 实线边框 */ border-style: solid; /* border-style: 边框的样式 dashed 虚线边框 */ /* border-style: dashed; */ /* border-style: 边框的样式 dotted 点线边框 */ /* border-style: dotted; */ /* border-color:边框的颜色 */ border-color: pink; } </style>
</head>
<body>
<div></div>
</body>
</html>
结果
二.复合写法
代码
<!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-复合写法.html</title>
<style> div {
width: 300px; height: 200px; /* border-width: 5px; */ /* border-style: 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框*/ /* border-style: solid; */ /* border-color: pink; */ /* 边框的复合写法 简写 */ /* border: 5px solid pink; */ /* 上边框 */ border-top: 5px solid pink; /* 下边框 */ border-bottom: 10px dashed purple; /* 左边框 */ border-left: 5px solid #000; /* 右边框 */ border-right: 5px solid red; } </style>
</head>
<body>
<div></div>
</body>
</html>
结果
练习代码
<!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>边框练习 </title>
<style> div {
/* 给一个200*200的盒子，设置上边框为红色，其他边框都为蓝色 */ width: 200px; height: 200px; /* border 包含了四条边 */ border: 10px solid blue; /* 层叠性 只层叠了上边框*/ border-top: 10px solid red; } </style>
</head>
<body>
<div></div>
</body>
</html>
结果
三.表格细线边框
代码
<!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>小说排行榜</title>
<style> table {
width: 500px; height: 249px; } th {
height: 35px; } table, td, th {
border: 1px solid pink; /*border-collapse 合并相邻的边框 */ border-collapse: collapse; font-size: 14px; text-align: center; } </style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/down.jpg" /></td>
<td>345</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="images/up.jpg" /></td>
<td>124</td>
<td>675432</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="images/down.jpg" /></td>
<td>212</td>
<td>7654</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="images/down.jpg" /></td>
<td>23</td>
<td>75645</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="images/up.jpg" /></td>
<td>121</td>
<td>7676</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="images/down.jpg" /></td>
<td>576576</td>
<td>1231421</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="images/down.jpg" />></td>
<td>234</td>
<td>7686</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</table>
</body>
</html>
结果
四.（1）边框会影响盒子的实际大小
代码
<!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-边框会影响盒子的实际大小</title>
<style> div {
width: 180px; height: 180px; background-color: pink; border: 10px solid red; } </style>
</head>
<body>
<div></div>
</body>
</html>
结果
四.(2)内边距
代码
<!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-盒子模型之内边距</title>
<style> div {
width: 200px; height: 200px; background-color: pink; padding-left: 20px; padding-top: 30px; padding-right: 20px; } </style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
结果
四.内边距padding属性：以上4种，开发中都会遇到
代码
<!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-盒子模型的内边距复合写法</title>
<style> div {
width: 200px; height: 200px; background-color: pink; /* padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; */ /* 内边距复合写法 */ /*后面跟一个数：代表上下左右都是5px*/ /* padding: 5px; */ /*后面跟两个数：代表上下是5px 左右是10px*/ /* padding: 5px 10px; */ /*后面跟三个数：代表上是5px 左右是10px 下是20px*/ /* padding: 5px 10px 20px; */ /*后面跟三个数：代表上是5px 右是10px* 下是20px 左是30px 顺时针*/ padding: 5px 10px 20px 30px; } </style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
结果
五.内边距会影响盒子实际大小
代码：
<!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-内边距会影响盒子实际大小</title>
<style> div {
/* width: 200px; height: 200px; */ /* 为了避免撑大盒子200-20*2=160 */ width: 160px; height: 160px; background-color: pink; padding: 20px; } </style>
</head>
<body>
<div>padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小</div>
</body>
</html>
结果
边栏推荐
- 关于ROS2安装connext RMW的进度条卡在13%问题的解决办法
- Filters get the data in data; Filters use data in data
- Heyuan City launched fire safety themed milk tea to boost fire prevention and control in summer
- sudo rosdep init Error ROS安装问题解决方案
- 机械制造业数字化新“引擎”供应链协同管理系统助力企业精细化管理迈上新台阶
- I hope some suggestions on SQL optimization can help you who are tortured by SQL like me
- Introduction to PHP
- 基于AMD EPYC服务器的EDA芯片设计解决方案
- 网络安全应急响应技术实战指南（奇安信）
- Jqgrid select all cancel single line click cancel event
猜你喜欢
06、类神经网络
Leetcode-198- house raiding
English grammar_ Indefinite pronoun - other / other
I2C设备驱动程序的层次结构
The supply chain collaborative management system, a new "engine" of digitalization in machinery manufacturing industry, helps enterprises' refined management to a new level
51 single chip microcomputer learning notes (1)
![Application practice: Great integrator of the paddy classification model [paddlehub, finetune, prompt]](/img/b6/62a346174bfa63fe352f9ef7596bfc.png)
Application practice: Great integrator of the paddy classification model [paddlehub, finetune, prompt]
牛客多校 E G J L
The solution to the problem that the progress bar of ros2 installation connext RMW is stuck at 13%
![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]
随机推荐
Live classroom system 05 background management system
应用实践：Paddle分类模型大集成者[PaddleHub、Finetune、prompt]
元器件采购系统的主要功能，数字化采购助力元器件企业飞速发展
LeetCode-198-打家劫舍
Educational Codeforces Round 132 (Rated for Div. 2) C，D+AC自动机
OverTheWire-Bandit
QObject源码剖析-d指针和q指针
Spark parameter adjustment and tuning
awk从入门到入土（24）提取指令网卡的ip
awk从入门到入土（21）awk脚本调试
安防市场进入万亿时代，安防B2B网上商城平台精准对接深化企业发展路径
[eloquence] negotiation persuasion skills and Strategies
Syntax summary of easygui
苹果官网产品打折 买iPhone 13 Pro Max 可省600元
为什么中建、中铁都需要这本证书？究竟是什么原因？
Introduction to PHP
Resource not found: rgbd_launch 解决方案
Thymeleaf setting disabled
Save the image with gaussdb (for redis), and the recommended business can easily reduce the cost by 60%
CTS test introduction (how to introduce interface test in interview)