CSS-盒子类型-类型转换-浮动布局

最新推荐文章于 2024-04-02 00:16:05 发布

V-Sugar

最新推荐文章于 2024-04-02 00:16:05 发布

阅读量386

点赞数

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_43844838/article/details/107295989

版权

本文详细介绍了CSS中的盒子类型，包括块元素、内联元素和内联块元素，并展示了如何通过`display`属性进行类型转换。接着，文章探讨了浮动布局的特点，如左浮动和右浮动，以及如何清除浮动带来的影响。文中还提供了多个练习和实例来帮助读者理解这些概念。

摘要由CSDN通过智能技术生成

盒子类型-类型转换-浮动布局

一、盒子类型

1.块元素

块元素有:
div、 p、 ul、 li、 h1-h6、 dl、 dt、 dd
块元素的特点
1. 支持全部的样式
2. 如果没有设置宽度，默认为父级的宽度100%
3. 盒子占据一行、即使设置了宽度

代码实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块元素</title>
	<style type="text/css">
		body{
      
			margin: 0;
		}
		.box, .box1, .box2{
      

			background-color: gold;
			margin-bottom: 20px;

		}
		.box1{
      
			width: 200px;
		}
		.box2{
      
			background-color: green;
			width:300px;
		}


	</style>
</head>
<body>
	<div class="box">div标签</div>
	<div class="box1">div标签设置宽度</div>
	<p class="box2">p标签</p>
	
</body>
</html>

效果：

2. 内联元素

内联元素：
a、 span、 em、 b、 strong、 i
特点
1. 只支持部分样式:(不支持宽、高、margin上下、padding上下，要注意的是在设置pandding上下的时候背景会产生一样，布局不会改变)
1. 宽度由内容决定
2. 盒子并在一行
3. 代码换行的时候盒子之间会产生间距
4. 子元素是内联元素，父元素可以使用text-algin属性设置子元素的对齐
解决代码换行产生间距的方法
1. 去掉内联元素之间的换行
2. 将内联元素的复制设置fongt-size为0，内联元素自身再设置font-size就可以了

练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内联元素</title>
	<style type="text/css">




		.box{
      
			width:500px;
			height:300px;
			border:1px solid #000;
			margin:50px auto 0;  /*居中*/
			font-size:0;  /*解决代码换行的间距*/
		}

		.box a{
      
			background-color: gold;
			/*不起作用*/
			width:100px;
			height:50px;
			/*只有左右起作用*/
			margin:100px 20px;
			padding: 10px 20px;  /*上下会使背景色发生变化整体不会变化*/

			font-size:16px;  /* 解决换行产生的间距 */
		}

		.box1{
      
			width:500px;
			height:300px;
			border:1px solid #000;
			margin:50px auto 0;
			text-align: center;  /*设置块中内容居中*/
		}
	</style>
</head>
<body>
	<div class="box">
		<a href="#">链接一</a>
		<a href="#">链接二</a>
		<a href="#">链接三</a>
		<a href="#">链接四</a>
		<a href="#">链接五</a>
	</div>
	<div class="box1">
		<a href="#">链接</a>
	</div>
</body>
</html>

效果：
在这里插入图片描述

3.内联块元素与类型转换

内联块元素：
img input 或者用display设置inline-block
特点
1. 支持全部的样式
2. 如果没有设置宽高，宽高用内容决定
3. 盒子并在一行
4. 代码换行，盒子间会产生间距
5. 子元素是内联块元素，父元素可以用text-align属性设置元素对齐
类型转换
1. display属性
  1. none:属性隐藏且不占位置;
  2. block:元素以块元素显示；
  3. inline:元素以内联元素显示
  4. inline-block:元素以内联块元素显示
实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内联块元素</title>
	<style type="text/css">




		.box{
    
			width:500px;
			height:300px;
			border:1px solid #000;
			margin:50px auto 0;  /*居中*/
			font-size:0;

最低0.47元/天解锁文章

V-Sugar

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS-盒子类型-类型转换-浮动布局

盒子类型-类型转换-浮动布局一、盒子类型1.块元素2. 内联元素3.内联块元素与类型转换二.浮动布局1. 特点：2. 练习:3.清除浮动三、总结一、盒子类型1.块元素块元素有:div、 p、 ul、 li、 h1-h6、 dl、 dt、 dd块元素的特点支持全部的样式如果没有设置宽度，默认为父级的宽度100%盒子占据一行、即使设置了宽度代码实例:<!DOCTYPE html><html lang="en"><head> <m
复制链接

扫一扫

专栏目录