- 浏览: 509321 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (563)
- 工作经验 (12)
- 数据库 (13)
- Servlet (10)
- Struts2 (1)
- Spring (25)
- Eclipse (5)
- Hibernate (5)
- Eclips (8)
- HTTP (7)
- J2EE (21)
- EHcache (1)
- HTML (11)
- 工具插件使用 (20)
- JPA (2)
- 杂谈 (17)
- 数据结构与算法 (3)
- Cloud Foundry (1)
- 安全 (10)
- J2SE (57)
- SQL (9)
- DB2 (6)
- 操作系统 (2)
- 设计模式 (1)
- 版本代码管理工具 (13)
- 面试 (10)
- 代码规范 (3)
- Tomcat (12)
- Ajax (5)
- 异常总结 (11)
- REST (2)
- 云 (2)
- RMI (3)
- SOA (1)
- Oracle (12)
- Javascript (20)
- jquery (7)
- JSP自定义标签 (2)
- 电脑知识 (5)
- 浏览器 (3)
- 正则表达式 (3)
- 建站解决问题 (38)
- 数据库设计 (3)
- git (16)
- log4j (1)
- 每天100行代码 (1)
- socket (0)
- java设计模式 耿祥义著 (0)
- Maven (14)
- ibatis (7)
- bug整理 (2)
- 邮件服务器 (8)
- Linux (32)
- TCP/IP协议 (5)
- java多线程并发 (7)
- IO (1)
- 网页小工具 (2)
- Flash (2)
- 爬虫 (1)
- CSS (6)
- JSON (1)
- 触发器 (1)
- java并发 (12)
- ajaxfileupload (1)
- js验证 (1)
- discuz (2)
- Mysql (14)
- jvm (2)
- MyBatis (10)
- POI (1)
- 金融 (1)
- VMWare (0)
- Redis (4)
- 性能测试 (2)
- PostgreSQL (1)
- 分布式 (2)
- Easy UI (1)
- C (1)
- 加密 (6)
- Node.js (1)
- 事务 (2)
- zookeeper (3)
- Spring MVC (2)
- 动态代理 (3)
- 日志 (2)
- 微信公众号 (2)
- IDEA (1)
- 保存他人遇到的问题 (1)
- webservice (11)
- memcached (3)
- nginx (6)
- 抓包 (1)
- java规范 (1)
- dubbo (3)
- xwiki (1)
- quartz (2)
- 数字证书 (1)
- spi (1)
- 学习编程 (6)
- dom4j (1)
- 计算机系统知识 (2)
- JAVA系统知识 (1)
- rpcf (1)
- 单元测试 (2)
- php (1)
- 内存泄漏cpu100%outofmemery (5)
- zero_copy (2)
- mac (3)
- hive (3)
- 分享资料整理 (0)
- 计算机网络 (1)
- 编写操作系统 (1)
- springboot (1)
最新评论
-
masuweng:
亦论一次OutOfMemoryError的定位与解错 -
变脸小伙:
引用[color=red][/color]百度推广中运用的技术 ...
Spring 3 mvc中返回pdf,json,xml等不同的view -
Vanillva:
不同之处是什么??
Mybatis中的like查询 -
thrillerzw:
转了。做个有理想的程序员
有理想的程序员必须知道的15件事 -
liujunhui1988:
觉得很有概括力
15 个必须知道的 Java 面试问题(2年工作经验)
源:http://blog.csdn.net/mylovestart/article/details/8607202
评:
标准流/非标准流
流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式
标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现
非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列
盒子模型
在网页设计中,CSS盒子模型都具备的属性:内容(content),填充(padding),边框(border),边界(margin)
注意margin是指两个元素之间的距离
CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏
下面举个盒子模型的案例
my.css
[css] view plaincopy
body{
/*指定body的宽度,样式,颜色*/
border: 1px solid red;
width: 800px;
height: 1000px;
/*0表示上下0,auto表示左右居中*/
margin:0 auto;
}
.s1{
width: 100px;
height: 100px;
border: 1px solid blue;
margin-top: 10px;
margin-left:10px;
/*padding-top:100px;
padding-left:100px;*/
}
.s1 img{
width:80px;
margin-top:5px;
margin-left:5px;
}
test.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="my.css" type="text/css"></link>
</head>
<body>
<div class="s1"><img src="images/1.jpg"></div>
</body>
</html>
网页打开如图
再写一个例子,实现多个图片的显示,图片下有链接
my.css
[css] view plaincopy
body{
margin:0px;
padding:0px;
}
.div1{
width:400px;
height: 400px;
border: 1px solid #b4b4b4;
margin-left:100px;
margin-top:20px;
}
/*faceul用于控制显示图片区域的宽度和高度*/
.faceul{
width:350px;
overflow:auto /*原文这里没有说清楚 原文: height:350px; */
border: 1px solid red;
list-style-type: none;
}
/*控制单个图片区域*/
.faceul li{
width: 80px;
height: 90px;
border:1px solid blue;
float: left;/*左浮动*/
margin-left:15px;
margin-top: 15px;
}
.faceul img{
width:60px;
margin-left:5px;
margin-top: 5px;
}
.faceul a{
font-size: 12px;
margin-left:15px;
}
a:link{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:underline;
color:red;
}
text.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="my.css" type="text/css"></link>
</head>
<body>
<div class="div1">
<ul class="faceul">
<li><img src="images/1.jpg"/><a href="">嘻哈猴1</a></li>
<li><img src="images/2.jpg"/><a href="">嘻哈猴2</a></li>
<li><img src="images/3.jpg"/><a href="">嘻哈猴3</a></li>
</ul>
</div>
</body>
</html>
网页打开如图
评:
标准流/非标准流
流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式
标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现
非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列
盒子模型
在网页设计中,CSS盒子模型都具备的属性:内容(content),填充(padding),边框(border),边界(margin)
注意margin是指两个元素之间的距离
CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏
下面举个盒子模型的案例
my.css
[css] view plaincopy
body{
/*指定body的宽度,样式,颜色*/
border: 1px solid red;
width: 800px;
height: 1000px;
/*0表示上下0,auto表示左右居中*/
margin:0 auto;
}
.s1{
width: 100px;
height: 100px;
border: 1px solid blue;
margin-top: 10px;
margin-left:10px;
/*padding-top:100px;
padding-left:100px;*/
}
.s1 img{
width:80px;
margin-top:5px;
margin-left:5px;
}
test.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="my.css" type="text/css"></link>
</head>
<body>
<div class="s1"><img src="images/1.jpg"></div>
</body>
</html>
网页打开如图
再写一个例子,实现多个图片的显示,图片下有链接
my.css
[css] view plaincopy
body{
margin:0px;
padding:0px;
}
.div1{
width:400px;
height: 400px;
border: 1px solid #b4b4b4;
margin-left:100px;
margin-top:20px;
}
/*faceul用于控制显示图片区域的宽度和高度*/
.faceul{
width:350px;
overflow:auto /*原文这里没有说清楚 原文: height:350px; */
border: 1px solid red;
list-style-type: none;
}
/*控制单个图片区域*/
.faceul li{
width: 80px;
height: 90px;
border:1px solid blue;
float: left;/*左浮动*/
margin-left:15px;
margin-top: 15px;
}
.faceul img{
width:60px;
margin-left:5px;
margin-top: 5px;
}
.faceul a{
font-size: 12px;
margin-left:15px;
}
a:link{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:underline;
color:red;
}
text.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="my.css" type="text/css"></link>
</head>
<body>
<div class="div1">
<ul class="faceul">
<li><img src="images/1.jpg"/><a href="">嘻哈猴1</a></li>
<li><img src="images/2.jpg"/><a href="">嘻哈猴2</a></li>
<li><img src="images/3.jpg"/><a href="">嘻哈猴3</a></li>
</ul>
</div>
</body>
</html>
网页打开如图
发表评论
-
data:image/png;base64是什么
2014-11-29 14:38 2657源:http://copier.blog.163.com/bl ... -
jquery 中获取所有选中的checkbox的用法
2014-03-31 17:20 572源:http://hi.baidu.com/yy3b2007c ... -
em(倍)与px的区别
2013-12-25 10:20 447源:http://www.cnblogs.com/showke ... -
CSS 外边距合并
2013-12-23 09:54 545源:http://www.w3school.com.c ... -
CSS网页布局教程:绝对定位和相对定位
2013-12-22 23:29 797源:http://www.webjx.com/css/ ... -
li浮动时ul自动适应高度方法
2013-12-22 22:36 1330源:http://blog.micxp.com/index.p ... -
DIV+CSS两种盒子模型
2013-12-22 21:23 486源:http://www.cnblogs.com/re ... -
html中<a>标签_top和_parent的区别
2013-03-27 11:20 2466源:http://blog.sina.com.cn/s/b ... -
js和css控制鼠标略过和点击后的样式
2013-03-11 21:36 2693源:http://blog.csdn.net/xn4545 ... -
js脚本添加书签到收藏夹
2013-03-05 20:06 1074javascript:window.external.addF ... -
30条HTML代码编写指南 for入门者
2013-01-20 14:17 816源:http://www.cnblogs.com/xly12 ...
相关推荐
IE盒子模型最初是在Internet Explorer浏览器中实现的一种非标准盒子模型,后来被CSS3规范化。其特点如下: - **宽度与高度**:`width` 和 `height` 属性包含了内容区域、填充和边框的尺寸之和。 - **填充与边框**:...
此外,使用JavaScript库如jQuery,可以通过`$.boxModel`属性检测当前页面是否遵循W3C标准盒子模型。如果返回`true`,则表示使用的是标准模型;若返回`false`,则可能使用的是IE模型。 在实际开发中,理解并熟练运用...
由于IE5和IE6浏览器在怪异模式下的盒子模型与标准模式存在差异,导致了兼容性问题。在标准模式下,元素宽度仅指内容区域的宽度,而怪异模式下的宽度包括内容、内边距和边框。这种差异有时会导致布局的不一致,因此在...
### 六个盒子模型组织诊断知识点详解 #### 一、六个盒子模型概述 - **发明者**: 20世纪70年代中期,由宾夕法尼亚大学组织动力学教授韦斯伯德(Weisbord)提出。 - **定义**: 六个盒子模型是一种组织诊断工具,旨在...
在W3C标准盒模型中,元素的总宽度和总高度是内容宽度/高度加上左右内边距、左右边框和左右外边距。但在Internet Explorer 5.x和6.x的"怪异模式"中,元素的总宽度/高度包括了内容、内边距和边框,这导致了跨浏览器的...
浮动是 CSS 中的一个重要概念,它可以让元素脱离标准流,漂浮在标准流之上,和标准流在不同的层次中。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们...
每个盒子模型的置信度得分1:[0.9、0.8、0.2、0.4、0.7] 每个盒子模型2的置信度得分:[0.5、0.8、0.7、0.3] 每个包装盒型号1的标签(类):[0,1,0,1,1] 每个盒子模型2的标签(类):[1、1、1、0] 我们将第...
我们分别探索了基于sigmoid非线性激活函数的DNN(sigmoid-DNN)和基于整流线性单元(Rectified Linear Units,ReLU)的 DNN(RL-DNN)的大词汇量连续语音识别。首先针对传统的sigmoid-DNN,我们通过研究发现其隐层权重越往...
### 六个盒子模型及其应用解析 #### 一、六个盒子模型概述 ##### 1. 概念定义 - **六个盒子模型**:由美国学者查尔斯·韦斯伯德提出,是一种组织诊断工具,旨在帮助企业从六个维度审视自身运作状态。 - **六个维度...
### OD组织发展之六个盒子的实战应用 #### 一、六个盒子概述 “六个盒子”是一种组织诊断工具,主要用于帮助...同时,结合其他管理模型的优势,可以使六个盒子的应用更加丰富多样,更好地适应不同企业的实际需求。
- 标准盒子模型(W3C标准):元素的宽度等于内容宽度(content)加上边框(border)和内填充(padding),再加上外边距(margin)。 - 低版本IE盒子模型(IE传统):元素的宽度等于内容宽度(content+border+...
绝对定位会脱离正常文档流,基于最近的非静态定位祖先元素进行定位;固定定位会相对于视口定位,即使滚动页面也不会移动;粘性定位则是结合了相对和固定定位的特点,在满足特定条件时变为固定定位。 四、布局实例...
本文主要聚焦于CSS的跨浏览器兼容性,特别是CSS盒子模型、块级和内联元素的区别,以及浮动和清除属性的应用。 首先,理解CSS盒子模型是实现跨浏览器兼容性的基础。盒子模型描述了元素占用空间的方式,包括元素的...
在CSS标准布局中,盒模型是至关重要的概念。盒模型包括元素的内容区、内边距(padding)、边框(border)和外边距(margin),理解并能灵活运用盒模型是控制元素尺寸和间距的关键。CSS还提供了display属性,通过设置...
同样为父元素设置浮动(如`float:left`或`float:right`)可以使它脱离标准文档流,从而解决塌陷。但这可能会导致新的布局问题,因为现在父元素和子元素都处于浮动状态,对页面布局和后续元素的影响较大,不利于代码...
在CSS中,可以通过`box-sizing`属性来选择使用“标准盒模型”(content + padding + border)还是“IE盒模型”(width/height + padding + border)。 四、定位机制 CSS提供了多种定位机制:静态定位(static)、...
8. **盒子模型** - CSS盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 - 盒模型影响元素的实际尺寸和布局。 9. **标准流与非标准流** - 标准流:元素按顺序自上而下、从左到右排列...
在3ds Max中,建模主要分为标准基本体和扩展基本体两种类型,它们是构建复杂三维模型的基础。 一、标准基本体 标准基本体是3ds Max中最基础的几何形状,包括但不限于: 1. 长方体(Box):是最常见的基本体,可...