您的位置：首页 > Web前端 > CSS

前端学习笔记二：CSS（3）常用的文本属性+让div飞~

2020-07-11 21:59 169 查看

继续。

还是把两段内容压成一段，先看第一个示例(想了一下只显示样式表了，列表内容的代码就不单独放出来了)：

<style type="text/css">
html,body{
margin: 0;
height: 100%;
}
ol{
background-image: url(../03%20using%20image/img/9.PNG);
background-repeat: no-repeat;
background-position: left center;
}
body{
background-image: url(../03%20using%20image/img/1.jpg);
background-repeat: no-repeat;
background-position: center;
}
.p1{color: deepskyblue;}
.p3{font-family: "微软雅黑";}
.p2{font-size: 20px;}
.p4{font-weight: bold;}
.p5{font-style: italic;}
.p6{text-indent: 50px; background-color: #2D9CE1;}
.p7{text-align: center; color: #FFFFFF;}
.p8{height: 100px;}
.p9{
height: 100px;
line-height: 100px;
text-align: center;
background-color: #00BFFF;
}
.p10{text-decoration: underline;}
</style>

运行结果：

可以看到各式各样的文字以及图片。

先整理一下常用的文本属性：

项目	内容	值
background-repeat	背景图片是否要重复展示（当图片大小小于所在块的大小时）	no-repeat（不重复）；repeat-x（横向重复）；repeat-y（纵向重复）；（默认值）repeat（全方位重复塞满所有空位置）
background-image	背景采用图片显示	图片的url地址
background-position	背景图片（不能重复填充屏幕时）靠着的位置	在 top，bottom和left，right之间各选一个来决定位置
font-family	文本内容的字体	英文或中文的字体名称
font-size	文本内容的字体大小	px
font-weight	文本内容的字体粗度	0~1000或bold（相对于默认的加粗）
font-style	文本内容的字体倾不倾斜	italic或oblique：倾斜
text-indent	文字的行首顶格距离	px
text-align	文本内容的位置	居左：left；居中：center；居右：right

可能有一些重复的，请不要在意（

然后来看重点的下一次示例，我管它叫做让div“飞”：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>飘浮效果</title>
</head>
<style type="text/css">
#item1{
background-color: #00BFFF;
float: left;
width: 100px;
height: 100px;
}
#item2{
width: 200px;
height: 200px;
background-color: #FFA500;
color: #FF0000;
}
#item3{
width: 150px;
background-color: #4169E1;
}
#item4{
width: 700px;
background-color: #2d9ce1;
}
#item5{
width: 200px;
background-color: #56e1b8;
}
#item3,#item4,#item5{
height: 300px;
float: left;
}
</style>
<body>
<p>文字环绕效果</p>
<div id="item1">
我是恋恋
</div>
<div id="item2">
看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后
看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后
</div>
<p>横向排版布局</p>
<div id="item3">

</div>
<div id="item4">

</div>
<div id="item5">

</div>
</body>
</html>

可以看到多个div都被塞进了浏览器同一行内容里。这是大部分网站能够在一行里塞入多个不同的方形的内容的奥秘。

用到的属性就是

float

，后面的值可以为left和right，即靠左浮动和靠右浮动。
漂浮的原理也不难，看示例都能看出七七八八，就是把赋予了同一方向的浮动属性的容器按照（代码里）从上到下顺序依次排列到同一行里。

当然，细心的朋友可能发现了，既然把这个属性叫做浮动属性，是不是意味着这些漂浮着的容器的“里面”还能塞进别的容器或者元素呢？
确实可以，看这运行结果的上半部分就能看出来了（
除了像示例那样本身就想做出被文字环绕的效果的情况外，大部分情况下这都是坏事，因为一般都希望把这几个漂浮着的容器当成“没有漂浮着”的内容。

那该怎么办呢？
再来看一段示例（（：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>聊天框</title>
</head>
<style type="text/css">
ul{
margin: auto;
height: 500px;
width: 300px;
border: #000000 solid 1px;
}
li{
clear: both;
height: auto;
width: 100px;
border: #000000 solid 1px;
}
.left{
float: left;
background-color: white;
}
.right{
float: right;
background-color: #8de34b;
}
</style>
<body>
<ul>
<li class="left">早上好，灵梦！</li>
<li class="left">...</li>
<li class="left">起~~~~床~~~~~啦！！！！！！</li>
<li class="right">吵死了！</li>
<li class="right">要不要每次都这么大声啊;(</li>
<li class="left">嘻嘻</li>
<li class="right">啊啊啊，华扇最差劲了！</li>
<li class="left">管你这么说，反正今天也要修行🎵</li>
</ul>
</body>
</html>

运行结果：

可以看到是在模拟一个聊天框，结合代码可以发现虽然这几个聊天框都带有漂浮属性，但是在运行结果上没有从左到右排列。
这是因为这些容器里除了有float属性外又多了个

clear

属性，它定义了该元素的两边能不能插入漂浮元素，值为

left

，左边不出现；为

right

右边不出现，为

both

则该元素所在行都不能出现其它的漂浮元素。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航