本文详细介绍了CSS的基础属性如color、background-color、width和height，以及字体样式、背景图片、文字处理、元素类型（块级、行内、行内块）和重要的盒子模型概念，包括内容、边框、内边距和外边距的设置，以及如何使元素居中。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
在CSS基础学习（上）中，我们主要介绍了关于选择器的相关内容，在获得选择器之后，便可以对我们所选择的对象进行一些相关属性的设置，从而使选择的内容达到我们想要的效果
一、CSS属性
1、通用属性
1.1、color
color用来设置文字颜色
代码如下（示例）：
<style>
.box{
color: red;
}
</style>
<body>
<div class="box">你好</div>
</body>
1.2、background-color
设置背景颜色
代码如下（示例）：
<style>
.box {
background-color: red;
}
</style>
<body>
<div class="box">
你好
</div>
</body>
1.3、width和height
width和height设置元素宽高
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box">你好</div>
</body>
2、字体样式
代码如下（示例）：
<style>
.title {
/* 文字颜色 */
color: red;
/* 字体大小 */
font-size: 18px;
/*
字体粗细
bold:加粗
*/
font-weight: bold;
}
.text {
background: skyblue;
/* 元素宽度自适应文本内容 */
width: fit-content;
height: 50px;
}
.div1 {
/*
line-height:设置行高,可以设置文字的垂直居中
把line-height设置为你需要的元素高度就可以
实现单行文字的垂直居中
*/
line-height: 50px;
/*
text-align:文本对齐方式
center水平居中
*/
text-align: center;
background: orange;
}
.div2 {
/* 下划线 */
/* text-decoration: underline; */
/* 中划线 */
text-decoration: line-through;
/* 去掉所有的线 */
/* text-decoration: none; */
}
</style>
<body>
<div class="title">
不俗即仙骨，多情乃佛心
</div>
<div class="text">
慢品人间烟火色，闲关万事岁月长
</div>
<div class="div1">
hello
</div>
<div class="div2">
我亦好歌亦好酒，唱与佳人饮与友
</div>
</body>
3、背景
背景图片
代码如下（示例）：
<style>
.box{
/*
background-image:设置背景图片
url是个函数,参数是路径,路径可以加引号也可以不加
*/
background-image: url(./cx.png);
/* 设置元素的宽高 */
width: 500px;
height: 500px;
/* 设置图片的宽高 */
background-size: 100px 100px;
/*
background-repeat:图片默认会平铺满元素,
no-repeat关闭平铺,即只显示一张图片
*/
background-repeat: no-repeat;
/* 背景颜色 */
background-color: skyblue;
/* 设置图片位置 */
background-position:
right 10px/* 设置图片距离边框右边距为10px */
bottom 10px/* 设置图片距离边框下边距为10px */ ;
}
</style>
<body>
<div class="box"></div>
</body>
3、文字处理
3.1、单行文字超出显示点
代码如下（示例）：
<style>
.text {
/* 设置宽度 */
width: 200px;
/* nowrap:文字不换行 */
white-space: nowrap;
/* ellipsis:超出元素宽度的文本使用省略号代替 */
text-overflow: ellipsis;
/* overflow:hidden 超出的文本隐藏 */
overflow: hidden;
background: skyblue;
/*
注意:
text-overflow: ellipsis和overflow:hidden一起用
才能起到超出文本显示省略号的作用
*/
}
</style>
<body>
<div class="text">
不俗即仙骨，多情乃佛心
慢品人间烟火色，闲关万事岁月长
飞雪连天射白鹿 笑书神侠倚碧鸳
</div>
</body>
3.2、多行文字超出显示点
代码如下（示例）：
<style>
/* 方法1:使用谷歌浏览器私有属性 */
.box {
background: skyblue;
width: 200px;
/* 文本超出时隐藏 */
overflow: hidden;
/* 开启-webkit-box布局 */
display: -webkit-box;
/* 布局方向竖直方向 */
-webkit-box-orient: vertical;
/* 显示几行 */
-webkit-line-clamp: 2;
}
</style>
<body>
<div class="box">
不俗即仙骨，多情乃佛心 飞雪连天射白鹿 笑书神侠倚碧鸳 慢品人间烟火色，闲关万事岁月长
</div>
</body>
二、元素类型
1、块级元素
块级元素:
每个块级元素都会独自占据一整行,并且可以对其设置宽高等属性,
常见的块元素有:
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
其中div是最重要的块元素
块级元素的特点:
1.每个块级元素都会独占一行
2.高度,行高,外边距以及内边距都可以控制
3.宽度默认是容器的100%
2、行内元素
行内元素:
不会独占一行,和相邻行内元素在同一行显示,不能设置宽高
常见行内元素:<a>,<strong>,<button>,<span>
其中span是比较常用的行内元素
行内元素特点:
1.不会独占一行,和相邻行内元素在同一行显示
2.不可以设置宽高
3.默认宽度是其本身内容的宽度
3、行内块元素
行内块元素:
在行内元素中有几个特殊的标签img,input可以对它们设置宽高和对齐属性,我们称他们为行内块元素
行内块元素特点:
1.和相邻行内元素(行内块)在一行上显示,但是之间会有空白缝隙(可以将父元素的font-size设置为0解决这个问题)
产生间隙的原因:行内元素之间的换行符会被转换为空白符,空白符占据一定宽度,所以元素之间就出现了空隙!
2.默认宽度就是它本身内容的宽度
3.高度,行高,外边距以及内边距都可以控制
4、元素类型的切换
<style>
.box>div{
/*
display:inline 将元素变为行内元素
display:inline-block 将元素变为行内块级元素
display:block 将元素变为块级元素
*/
display: inline-block;
background: skyblue;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
三、盒子模型（重要）
1、盒子模型简介
高大的房屋是由一块块砖头堆砌而成的,那么我们的网页是由什么组成的呢?有的同学会说是由div,p,span等元素组成,确实,html元素其实是一个个的矩形盒子,网页是由许多盒子组成的,我们给这些元素盒子取了个名字,叫盒子模型.
盒子模型的组成(从里到外):
内容(content)
内边距(padding):边框到内容的距离
边框(border),
外边距(margin):与其他盒子之间或与网页四边的距离
2、内容content
注意:
默认情况下,我们设置的宽高是元素内容的宽高,而不是元素的宽高
如下:设置宽高为200px,边框宽度10px,我们发现div元素的宽度是了220px,而不是200px,充分说明了width和height设置的是内容的宽高!
<style>
.box{
width: 200px;
height: 200px;
background: red;
/* 设置10px宽度的边框 */
border: 10px solid red;
}
</style>
<body>
<div class="box">
</div>
</body>
3、边框border
3.1、边框简写
<style>
.box{
width: 200px;
height: 200px;
background: skyblue;
/*
直接使用border可以设置边框的多个属性,
属性顺序没有要求
*/
border: 2px solid red;
/*
使用border-方向 可以单独设置上下左右
四个方向的边框
*/
border-bottom: 2px solid green;
border-top: 2px solid blue;
border-left: 2px solid orange;
border-right: 2px solid aqua;
}
</style>
<body>
<div class="box">
</div>
</body>
3.2、圆角边框
<style>
.box {
width: 200px;
height: 200px;
background: skyblue;
border: 2px solid red;
/* 设置边框弧度 */
border-radius: 10px;
}
.box1 {
width: 200px;
height: 200px;
background: skyblue;
border: 2px solid gray;
/* 边框弧度设置成50%,可以得到一个圆形 */
border-radius: 50%;
}
</style>
<body>
<div class="box"></div>
<hr>
<div class="box1"></div>
</body>
4、内边距padding
4.1、内边距设置
<style>
.box{
width: 200px;
height: 200px;
background: skyblue;
border: 1px solid red;
/* 左内边距 */
padding-left: 20px;
/* 右内边距 */
padding-right: 20px;
/* 上内边距 */
padding-top: 20px;
/* 下内边距 */
padding-bottom: 20px;
}
</style>
注意:
设置内边距后会使盒子容积变大,我们这时查看class是box的div, 会发现宽度显示242,242是由内容宽度+边框宽度+内边距求和得到的.
4.2、内边距简写
padding简写对应的边距:上,右,下,左(顺时针)
padding: 20px 10px 30px 40px;
<style>
.box{
background: skyblue;
width: 50px;
/* 上下左右都是10 */
padding: 10px;
/* padding简写对应的边距:上下,左右 */
padding: 20px 40px;
}
</style>
<body>
<div class="box">
你好
</div>
</body>
5、外边距margin
5.1、外边距设置
<style>
/* 清除默认的内外边距 */
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background: skyblue;
/* 上外边距 */
margin-top: 10px;
/* 下外边距 */
margin-bottom: 20px;
/* 左外边距 */
margin-left: 30px;
/* 右外边距 */
margin-right: 40px;
}
</style>
5.2、外边距简写
外边距简写:上,右,下,左(顺时针)
margin: 10px 20px 30px 40px;
<style>
.box{
width: 200px;
height: 200px;
background: skyblue;
/* 外边距简写:上下,左右 */
margin: 10px 20px;
}
</style>
5.3、外边距使盒子居中
设置盒子水平居中:
条件:
1.需要块级元素
2.需要设置宽度
3.magin:auto
<style>
.box {
width: 200px;
height: 200px;
background: skyblue;
margin: auto;
}
</style>
<body>
<div class="box"></div>
</body>
总结
通过对CSS属性的相关设置的使用，可以让网页元素更加多样化，从而达到我们所想要的效果，使网页更加美观
3934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
