CSS中盒子模型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*
盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。 盒子模型主要是用于操作内边距(padding)与外边距（margin） */
div{
border-style:solid;
width:100px;
height:100px;
/* 内边距 */
padding-left:10px;
padding-top:20px;
}
.one{
margin-bottom:30px;
} .two{
margin-left:700px;
} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="one">
这个是一个div
</div> <div class="two">
这个是二个div
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.outer{
border-style:solid;
width:370px;
height:200px;
margin-top:250px;
margin-left:420px;
background-image:url(../1.jpg);
background-repeat:no-repeat;
background-position:center;
} .userName{
margin-top:60px;
margin-left:80px;
} .password{
margin-left:80px;
margin-top:20px;
} input{
border-color:#000;
border-width:3px;
} #button{
margin-left:120px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="outer" >
<div class="userName">
用户名 <input type="text"/>
</div>
<div class="password">
密 码 <input type="password"/>
</div>
<input id="button" type="submit" value="登陆"/>
</div> </body>
</html>
CSS中盒子模型的更多相关文章
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
- 认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
- css中盒子模型与box-sizing属性
盒子模型 w3c标准:定义的width为 内容,有padding,border 都会使得 最终呈现的宽度为 定义的width+padding+border的总和,有margin另加 ie标准:定义的w ...
- CSS中盒模型的理解
今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
随机推荐
- centos 7 源代码搭建部署 zabbix-4.0.13 LTS
Zabbix 官网 >:https://www.zabbix.com/download 源代码地址>:https://www.zabbix.com/cn/download_sources# ...
- 微信小程序音乐播放器
写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...
- ioping测试
ioping 一个实时显示磁盘io延时的工具,以类似ping 的输出一样展示输出结果 常用参数: -c count stop after count requests. -i interval Set ...
- 使用TextView和Textedit
1.TextView res/layout 中设置布局文件 hint属性:提示输入信息text属性:与hint的区别---hint仅仅是提示:text是实际的内容讲布局xml文件引入到activit ...
- 6.JVM技术_java内存模型
1.java内存模型图解 Java虚拟机在执行Java程序的过程中,会把它所管理的内存划分为若干个不同的数据区.这些区域有各自的用途,以及创建和销毁的 时间,有的区域随着虚拟机进程的启动而存在,有的区 ...
- PCB检查步骤
1.原理图先每个模块都检查一边. 2.特别注意容易接错的信号线,比如RX,TX是否接反了. 3.检查容易出错的封装和新封装.比如三极管的管脚是否与实物对应.连接器等的封装是否忘记了镜像. 4.分层查看 ...
- iptables 转发
1.通过代理访问121.8.210.236的转向访问192.168.191.236 sudo iptables -t nat -A OUTPUT -d 121.8.210.236 -j DNAT -- ...
- Nginx常见错误及处理方法(转)
404 bad request 一般原因:请求的Header过大 解决方法:配置nginx.conf相关设置 client_header_buffer_size 16k; large_client_h ...
- 第十五届四川省省赛 SCU - 4443 Range Query
先给你1~N的N个数 再给你每种最多50个的条件(ai,bi,ci) 或者[ai,bi,ci] (ai,bi,ci)表示下标ai到bi的最小值必为ci [ai,bi,ci]表示下标ai到bi的最大值必 ...
- 一道经典JS面试题
超过80%的候选人对下面这道JS面试题的回答情况连及格都达不到.这究竟是怎样神奇的一道JS面试题?他考察了候选人的哪些能力?对正在读本文的你有什么启示? 不起眼的开始 招聘前端工程师,尤其是中高级前端 ...