练习 | CSS 浮动模型清除模型伪类

最新推荐文章于 2024-06-07 19:31:00 发布

虎鲸一号

最新推荐文章于 2024-06-07 19:31:00 发布

阅读量344

点赞数

分类专栏： CSS 学习记录 Web

本文链接：https://blog.youkuaiyun.com/qq_44537414/article/details/104167222

版权

学习记录同时被 3 个专栏收录

26 篇文章

订阅专栏

CSS

12 篇文章

订阅专栏

Web

12 篇文章

订阅专栏

本文通过四个题目详细介绍了CSS中的浮动模型和清除模型，包括使用after伪类清除浮动，额外标签法，以及:before和:after伪元素在绘制日期输入对象和聊天对话框中的应用。同时，文章提及了在实现对话框时遇到的挑战，并推荐了纯CSS实现对话框的补充阅读资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

题1：清除浮动（使用after伪类）

请用浮动模型和清除模型的实现下面版面
在这里插入图片描述
解

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>EX01</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
	<div class="container">
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
  </div>
</body>
</html>

index.css

.container {
  border:1px solid #333;
  width: 280px;
}

.container:after {
  content: "."; 
  height: 0; 
  visibility: hidden; 
  display: block; 
  clear: both; 
}

.content {
  float: left;
  margin: 3px;
  background: #eee;
  width: 50px;
  height: 50px;
}

题2：清除浮动（额外标签法）

请用浮动模型和清除模型的实现下面版面
在这里插入图片描述
解

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>EX02</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="container">
    <div class="content first"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <div class="content"></div> 
    <br style="clear:both;" />
  </div>
</body>
</html>

index.css

.container {
  border:1px solid #333;
  width: 280px;
}

.content {
  float: left;
  margin: 3px;
  background: #eee;
  width: 50px;
  height: 50px;
}

.content.first {
  height: 103px;
  width: 103px;
}

题3：使用伪类

请用:before伪元素和:after伪元素的绘制日期输入对象
在这里插入图片描述
解

日历图标为从 iconfont 下载的图片

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>EX03</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="container">
    <div class="content">2016-09-12</div>
  </div>
</body>
</html>

index.css

.container {
  border: 1px solid #eee;
  height: 30px;
  width: 220px;
}

.content {
  margin: 0 10px;
  line-height: 30px;
  color: #666;
}

.content:before {
  content: "开始日期：";
  color: #999;
}

.content:after {
  content: url(date.png);
  color: #999;
  margin-left: 5px;
}

题4：对话框

请用:before伪元素和:after伪元素的绘制聊天对话框对象
在这里插入图片描述
解

没有弄出来小三角形的小弧度 orz

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>EX04</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="container"></div>
</body>
</html>

index.css

.container {
  background-color: green;
  height: 100px;
  width: 200px;
  border-radius: 10px;
}

.container:after {
  content: "";
  border-top: 13px solid transparent;
  border-left: 20px solid green;
  border-bottom: 13px solid transparent;
  position: absolute;
  left: 200px;
  top: 25px;
  color: green;
}