WEB学习笔记《五》盒子模型，定位，图标

最新推荐文章于 2023-03-26 09:54:58 发布

苏格

最新推荐文章于 2023-03-26 09:54:58 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/gong3244966/article/details/104537466

版权

<!DOCTYPE html>
<html>
<head>
	<title>盒子模型和定位</title>
</head>
<body>
	盒子模型   box model
	1.宽高
	2.边框
	3.内边距
	4.外边距


	box-sizing:border-box
	盒子内绘制，注意多浏览器的兼容


	margin
	padding  上 右 下 左
	上 左右  下
	上下 左右

	positon:absolute    绝对定位
	新建一个图层，单独定位了，原来位置腾出来，其他非定位元素会移动
	left/right
	top/bottom  只能跟定位元素，只能取其一

	relative   也是新建图层，但是留出原来的位置。
	定位元素的相对性，之针对上一个父级


	两栏的设计
	.left{
		position:absolute;
		left:0;
		top:0;
		width:300px;
		height:100%;
		background-color:green;
	}

	.right{
		height:100%;
		margin-left:300px;
		background-color:orange;
	}

	float:left    包围，浮动

	:before   :after   伪类    多一个冒号就是伪元素
	必须带content:""


	font awesome   icon图标
	iconfont 矢量图
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

苏格

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB学习笔记《五》盒子模型，定位，图标

<!DOCTYPE html><html><head> <title>盒子模型和定位</title></head><body> 盒子模型 box model 1.宽高 2.边框 3.内边距 4.外边距 box-sizing:border-box 盒子内绘制，注意多浏览器的兼容 ...
复制链接

扫一扫