十分钟学会CSS——篇三：盒子模型
程序员文章站
2024-01-05 18:06:46
文章目录前言一、边框二、padding内边距代码示例三、背景总结前言网页的组成一共包括三部分：1.html（网页结构）2.css（网页外观）3.JavaScript（驱动网页的脚本）。提示：以下是本篇文章正文内容，下面案例可供参考一、边框1.全写border:10px solid red;2. 单独写border-bottom:10px solid red;3.拆分width:粗细style:样式(solid实线、dashed虚线、dotted点状线)color:颜色top...
前言
网页的组成一共包括三部分：1.html（网页结构）2.css（网页外观）3.JavaScript（驱动网页的脚本）。
提示：以下是本篇文章正文内容，下面案例可供参考
一、边框
1.全写
border:10px solid red;
2. 单独写
border-bottom:10px solid red;
3.拆分
width:粗细
style:样式(solid实线、dashed虚线、dotted点状线)
color:颜色
top:上
bottom:下边
right:右边
left:左边
最细 border-left-style:solid;
border-style:solid
二、padding内边距
解释:边框到content内容的距离
设置:
padding-left
padding-right
padding-top
padding-bottom
padding:50px四周
padding:50px 100px(上下50 左右100)
padding:50px 100px 200px (上50 左右100 下200)
padding:50px 100px 150px 200px (顺时针 上50 右100 下150 左200)
代码示例
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.mydiv{
background-color: gold;
width: 300px;
height: 350px;
overflow: auto;
border: 10px solid red;
padding: 50px 100px 150px 200px;
/* border-bottom-color:red ;
border-bottom-style: dashed;
border-bottom-width: 5px;
border-style: solid;
border-color: red;
border-right-style: dashed; */
/* border-bottom: 10px solid red; */
/* border: 10px dashed red; */
/* 边框：10粗细 实线 红色 */
/* solid实线 dotted点状线 dashed虚线 */
/* visible显示 hidden隐藏 scroll滚动条 auto自动出现滚动条 */
/* 宽高设置，不包含边框和内外边距 */
/* 一个元素实际的宽由内容content+padding内边距+
border边框+margin外边距组成 */
}
</style>
</head>
<body>
<div class="mydiv">*（the People's *），简称“中国”，成立于1949年10月1日 [1] ，位于亚洲东部，太平洋西岸 [2] ，是工人阶级领导的、
以工农联盟为基础的人民**的*国家 [3] ，以五星红旗为国旗 [4] 、《义勇军进行曲》为国歌 [5] ，国徽内容为国旗、*、齿轮和麦稻穗 [6] ，
通用语言文字是普通话和规范汉字 [7] ，首都北京 [8] ，是一个以汉族为主体
、56个民族共同组成的统一的多民族国家。</div>
</body>
</html>
三、背景
背景颜色：
background-color
背景图片：
background-url(…/xxx)
背景重复：
background-repeat（no-repeat 不重复、repeat重复、repeat-x水平重复、repeat-y垂直重复）
背景位置：
background-position
水平：
left center right px
垂直：
top bottom center px
背景简写：
background：gold url（） no-repeat center center
代码如下（示例）：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bg{
/* background-color: gold; */
height: 900px;
/* background-image: url(../images/logo.png); */
/* 层叠顺序 背景颜色 背景图片 文本内容 */
/* background-repeat: no-repeat; */
/* no-repeat不重复 repeat-x水平重复 repeat-y垂直重复 repeat水平和垂直重复 */
/* background-position:center center; */
/* 左右 left center right px */
/* 上下 top center bottom px */
background: gold url(../images/logo.png) no-repeat center center;
}
</style>
</head>
<body>
<p class="bg">我爱我的祖国，我的祖国是中国！</p>
</body>
</html>
注：代码中的图片需要自己添加相关图片到相对路径中。
总结
以上就是今天要讲的内容，希望读者能好好练习各种属性。
本文地址：https://blog.csdn.net/weixin_54597629/article/details/112835292
上一篇： kmp算法python实现