CSS的布局

最新推荐文章于 2024-08-23 10:53:05 发布

苏雨鱼

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量203

点赞数 1

文章标签： html 前端 html5

本文链接：https://blog.csdn.net/m0_52326740/article/details/121666457

版权

1..盒子布局

border:

dotted	定义点状边框
dashed	虚线，但是大多浏览器为实现
solid	实线
double	定义双线

padding:

auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。

写法:

(1)padding:1px 5px 12px 3px;

表示:

上内边距是 10px,右内边距是 5px,下内边距是 15px,左内边距是 20px

(2)padding:10px 5px 15px;

表示:

上内边距是 10px,右内边距和左内边距是 5px,下内边距是 15px

(3)padding:12px 15px;

表示:

上内边距和下内边距是 12px,右内边距和左内边距是 15px

(5)padding:6px;

表示:

四边的边距为6px

margin:

margin与padding的属性相同。

写法也相同,效果也相同。

图片展示

2.元素的分类

块元素:总是在新行上开始。

内联元素:和其他元素在一行。

白话一点的话

块级元素:独占一行,能自动换行,可以设置长和高。例如div、p、和hn(n可以去1、2等等)和nav、footer、address等等。

内联元素:不能自动换行,设置长和高不起作用.例如span、修饰字体<b>和<i>标签等等

dispaly:

none	此元素不被显示
block	此元素显示为块级元素,此元素前后会有换行符
inline	默认元素显示为内联元素,元素前后无换行符

介绍

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style type="text/css">
  a{
           	width: 200px;
           	height:200px;
            display: block;
            text-decoration: none;
           }        
		</style>
</head>
<body>
	<div class="one">1</div>
	<div class="two">2</div>
	<div class="there">3</div>
	<a href="#">a</a>
	<a href="#">a</a>
	<a href="#">a</a>
</body>
</html>

效果

本来a是内联元素并不会换行,也不能设置长和宽。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style type="text/css">
           .one{
           	width: 200px;
           	height:200px;
           	background-color: yellow;

           }
           .two{
           	width: 200px;
           	height:200px;
           	background-color: red;
           }
           .there{
           	width: 200px;
           	height:200px;
           	background-color: blue;
           	display: none;
           } 
</style>
</head>
<body>
	<div class="one">1</div>
	<div class="two">2</div>
	<div class="there">3</div>
	<a href="#">a</a>
	<a href="#">a</a>
	<a href="#">a</a>
</body>
</html>

效果

明显看出3图标的方块不见了,说明div转变为了内联元素

css的隐藏元素的方式

width:0; height:0;

display:0;

3.浮动布局

float:

left	向左浮动
right	向右浮动
none	不浮动

clear:

left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在两侧不允许浮动元素
none	允许浮动元素

4.定位布局

position:

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
			<style type="text/css">
			*{ 
				padding: 0;
				margin: 0;
			}
		   .main{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 200px;
           /*  position: relative; */
        }
         .one{
         	width: 100px;
         	height:100px;
         	background-color: yellow;
         	position: absolute;
         	left: 200px;
         	top: 100px;
         }
         .two{
         	width: 100px;
         	height:100px;
         	background-color: red;
         }
         .there{
         	width: 100px;
         	height:100px;
         	background-color: blue;
         } 
         </style>
 </head>
 <body>
 <div class="main">
 	<div class="one">1</div>
 	<div class="two">2</div>
 	<div class="there">3</div>	
 </div>
 </body>
 </html>

(1)效果

(2)效果

当前我们把 /* position: relative; */打开

得到如下

(3)效果

如果我们把margin:200px;关掉,那么图像没有办法先上面移动的空间,将会得到如下

苏雨鱼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的布局

目录1..盒子布局border:padding:写法:margin:图片展示2.元素的分类dispaly:介绍效果效果css的隐藏元素的方式3.浮动布局float:clear:4.定位布局position:代码(1)效果(2)效果(3)效果1..盒子布局border:dotted 定义点状边框 dashed 虚线，但是大多浏览器为实现 solid 实线 double 定..
复制链接

扫一扫