前端_CSS_03:盒子模型&浮动&定位

最新推荐文章于 2023-08-02 13:06:31 发布

耳东er

最新推荐文章于 2023-08-02 13:06:31 发布

阅读量284

点赞数 1

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

本文链接：https://blog.csdn.net/q734044429/article/details/117993094

版权

本文详细介绍了CSS中的盒子模型，包括内边距和外边距的使用，以及如何通过它们调整元素位置。接着讲解了浮动概念，特别是如何利用浮动解决多块元素在同一行显示的问题。此外，还探讨了定位技术，如绝对定位、相对定位和固定定位，并结合12306网站的案例进行了实战应用解析。

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

一、前言

网页的格局：网页内容的主体规划
——1. ⭐盒子模型：标签和标签存在包含关系时，位置的调整
——2. ⭐浮动：多个块标签处于同一行的位置处理问题
——3. ⭐定位：块标签在页面指定位置的处理问题
- 块标签：独立占用一行的标签
- 行内标签：不会独立占用一行的标签
- 网页的布局基本都是用块标签来完成的
  ——一般做布局使用 div标签 ：帮助我们将网页划分成多个小方块
- div标签边线类型

二、盒子模型

盒子模型基本用法：其实就是通过标签的内边距和外边距的特点调整两个有包含关系的标签的位置

内边距——padding：内部元素(标签)距离当前块元素边界的距离（向外扩张，内部书写面积不变）

设置上下左右四个内边距为参数px——padding: 参数px（一个参数为上下左右）;

设置上下内边距为参数1px，左右内边距为参数2px——padding:参数1px（上下） 参数2px（左右）;

设置 上右下左 四个内边距——padding: top(上） right(右） bottom(下） left(左）;

单独设置内边距——padding-top(right、bottom、left):参数

外边距——margin：当前块标签(元素)外部的和父级块标签之间的距离

设置上下左右四个外边距为参数px——margin: 参数px（一个参数为上下左右）;

设置上下外边距为参数1px，左右外边距为参数2px——margin:参数1px（上下） 参数2px（左右）;

设置 上右下左 四个外边距——margin: top(上） right(右） bottom(下） left(左）;

单独设置外边距——margin-top(right、bottom、left):参数

盒子模型设置左右居中—— margin：auto
——注：只有左右居中，没有上下居中（网页上下认为是无限长的）

块元素与行内元素的转换——display

block：行内元素转换为块元素

inline：块元素转换为行内元素

在这里插入图片描述

<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			
			#divi1{
     /* id选择器 */
				background-color: #FFFF00;
				border: 1px solid red;
				width: 400px;
				height: 400px;
				margin:0px auto;/* 左右居中（上下是没有居中的） */
				margin-top: 30px;
				
			}
			.divc1{
     /* class选择器 */
				background-color:  chartreuse;
				border: 1px solid red;
				width: 200px;
				height: 200px;
				margin: auto;
				margin-top: 100px;
				
			}
			/*span 是一个行内元素  
				 * 行内元素没有盒子模型
				 * 行内元素没有办法设置内边距和外边距特征
				 * 只有块标签才有盒子模型  才可以设置内边距和外边距
				 * 如果一个行内标签 非要使用盒子模型那么可以将行内元素转换为块元素
				 * display  block 行内转换为块    inline 块转换为行内
				 *  */
			span{
     /* 标签名选择器 */
				background-color: #696969;
				border: 1px solid dodgerblue;
				width: 160px;
				height: 50px;
				display: block;/* 行内转换为块 */
				margin: auto;
				padding-top: 20px;/* 内部元素距上边20px：原高度50px上面多出20px */
				margin-top: 65px;/* 此元素外边距离外部上边65px：单纯移动 */
				/*
				* width(宽度)、height(高度)为块元素内部横向纵向的容量
				* 容量一直都是不变的，无论是内边距还是外边距的调整都不会影响标签的内部容量
				* 例如：加边线和内边距都不会改变内部容量，只会加大盒子模型的大小
				*/	
			}
		</style>
	</head>
	<body>
		<div id="divi1">
			<div class="divc1">
				<span id="s1">
					今天是个上分的好日子
				</span>

最低0.47元/天解锁文章

耳东er

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
前端_CSS_03:盒子模型&浮动&定位

网页的格局：网页内容的主体规划——1. ⭐盒子模型：标签和标签存在包含关系时，位置的调整——2. ⭐浮动：多个块标签处于同一行的位置处理问题——3. ⭐定位：块标签在页面指定位置的处理问题
复制链接

扫一扫

专栏目录