精通css 02 可视化格式模型

最新推荐文章于 2025-08-09 16:38:22 发布

eclipser1987

最新推荐文章于 2025-08-09 16:38:22 发布

阅读量702

点赞数

CC 4.0 BY-SA版权

文章标签： css html float button import java

本文链接：https://blog.youkuaiyun.com/eclipser1987/article/details/5907206

浮动、定位、框模型！

1。框模型

是css的基石之一，指定元素如何显示以及（在某种程度上）如何相互交互。页面上的元素被看做一个矩形框，这个框由元素的内容，填充，边框和空白组成。

margin边框

padding填充

*{margin:0;padding:0;}填充、边框和空白边

2。定位

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #btn01 { position: relative; /*相对位置*/ left: 50px; top: 50px; } #btn02 { position: absolute; /*绝对位置：相对于最近的已定位的父元素而言*/ left: 50px; top: 50px; } </style> </head> <body> <button id="btn01">按钮1</button> <button id="btn02">按钮2</button> </body> </html>

3。浮动布局

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> img { width: 30%; /* 是按照父容器宽度的百分比，而不是原图像的百分比 */ height: 30%; } .main {background-color: gray;border: solid 1px black; width: 400; height: 400} .main img {float: left;} /* 浮动布局 */ .main p {float: left;} </style> </head> <body> <div class="main"> <img src="img/cat.jpg" mce_src="img/cat.jpg" /> <p>可爱的小猫</p> </div> </body> </html>