HTML-CSS标准盒子模型布局 217

)CSS 标准盒子模型(Box Model)

在网页中所有HTML元素可以看作盒子,在CSS中,"box model"术语是用来设计和布局时使用的;CSS盒模型本质上是一个盒子,封装周围的HTML元素包括:外边距(margin)边框(border)内边距(padding)实际内容(content)四个属性,所以布局时每个元素所占的总宽高是这4个属性的总和;比如宽度:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

1.1Margin(外边距)清除边框外的区域,外边距是透明的

1.2Border(边框)围绕在内边距和内容外的边框

1.3Padding(内边距)清除内容周围的区域,内边距是透明的

1.4Content(内容)盒子里填充的内容比如文本,图像等

标准盒子模型

宽度为100px的div

根据盒子模型得出该元素的总宽度为:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一个宽度为100px的元素,此元素的总宽度必须小于等于100px

2)DIV+CSS布局

Div+CSS布局就是将网页内容用<div>分割为块,之后使用css设置每个块的大小,位置等

DIV+CSS布局最重要的是灵活运用float(浮动)属性,其值:1)left 2)right 3)both

clear属性作用是清除浮动,其值为:1)left 2)right 3)both

d2向右浮动 float:right

因为div是块级元素,如果都没有脱离文档流div就会按照从上到下的顺序放置

d2设置为右浮动其他两个div位置的变化:

1)d1没有脱离文档流会占据一行,所以d2只能浮动到d1下面的右面如上图所示

2)d2脱离文档流,d3自动填充到d2的位置

d1,d2全部设置为右浮动

1)当d1,d2都设置为右浮动时:因为css中d1在d2上面先设置,因此d1在右侧,如果d2在d1上面先设置样式,则d2在右侧,d1在左侧,自己测试不再截图

2)当d1,d2都设置为右浮动时:d3就会跑到上图中d2的位置

3)如果3个div都设置左或右浮动,当3个width加一起<=100%就会在第一行显示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮动,d3设置为右浮动

当d2清除了左浮动,d3设置为右浮动,就会如上图所示;如果d2清除的是右浮动,d2就会在d1上面,d3就会定位在d1下面的右面,自己测试不再截图

当d2清除了左浮动,如果想要d2紧挨着d1(与d1在一行上),可以通过position脱离文档流设置其上下左右属性使其定位在d1右侧,自己测试

<!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>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局综合运用position+上下左右属性与float属性为网页进行布局

注意:浏览器的兼容性问题,特别是使用IE内核的浏览器对W3C的规范不怎么遵守

天来分享一个JavaScript图片跟随导航栏特效

下面再来看看代码

<!DOCTYPE html>

<html>

<style>

*{margin: 0; padding: 0;}

ul {list-style:none;}

body {

background-color: #000;

}

.nav {

width: 800px;

height: 42px;

background:url("images/rss.png") no-repeat right center #fff;

margin: 100px auto;

border-radius: 5px;

position: relative;

}

.cloud {

width: 83px;

height: 42px;

position: absolute;

top: 0;

left: 0;

background: url(images/cloud.gif) no-repeat;

}

.nav ul {

position: absolute;

top: 0;

left: 0;

}

.nav li {

float: left;

width: 83px;

height: 42px;

line-height: 42px;

text-align: center;

color: #000;

cursor: pointer;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

var cloud = document.getElementById("cloud"); // 云彩

var nav = document.getElementById("nav");

var lis = nav.children[1].children;

var current = 0; // 用于存放点击时候的 offsetLeft

//alert(lis.length);

for(var i=0; i<lis.length;i++) {

lis[i].onmouseover = function() {

// alert(this.offsetLeft);

target = this.offsetLeft; // 把左侧的位置，给 target

}

lis[i].onmouseout = function() {

target = current; // 鼠标离开 target 是刚才我们点击的位置

}

lis[i].onclick = function() {

current = this.offsetLeft; // 点击的时候吧当前位置存贮一下

}

// 缓动公式

var leader = 0, target = 0;

setInterval(function(){

leader = leader + (target - leader ) / 10;

cloud.style.left = leader + "px";

},10);

</script>

今天的分享就到这里了，大家看完后学会了吗？

如果觉得文章对您有用就加个关注啦~~

欢迎评论留言，提供建议和思路。

几天学习了HTML相关的基础知识之后，老师出了五道自测题，通过这几天学习的总结，和查阅相关文档，我也作出了自己的理解，以下是我学习的相关心得分享给大家。

1.HTML元素、标签和属性之间的关联与区别？

如果想要搞清楚HTML元素、标签、属性之间的关系，首先我们应该了解3个概念：

什么是HTML标签？
HTML标签由一对尖括号（'<'，'>'）包裹起来的对象，如<div>、 <h1>，<p>等等都叫标签。绝大多数的标签都是成对出现的，如，<div></div>、 <h1></h1>，<p></p>，但是也有例外，比方说换行符<br />，分割线<hr />，这些标签，开始标签和结束标签都是自身。
什么是元素？
一个HTML页面是由多个元素组成的，一个元素是由一对标签包含某些内容组成的，比如：<h1>Hello World</h1>，这个就是元素。
什么是属性？
给HTML元素附加各种样式的叫属性，它是以“属性名=属性值”这种名、值对形式出现的，需要注意的是，属性必须写在元素的起始标签中。

了解上述三个概念，我明白了，一个HTML页面就是由多个元素构成，元素是由标签描述，每一个元素的特征，都是由属性决定的。

2.为什么说HTML是结构化的文档?

根据W3C标准，HTML是一种Web语言，它是使用一些“标签”来定义网页内容的，例如我们在一个HTML文档中写<html xmlns="http://www.w3.org/1999/xhtml"></html>，就声明了一个HTML文档的开始，里面可以放各种标签，一个HTML文档是由以下结构构成的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
</body>
</html>

由以上代码不难看出，HTML结构层次分明，是一种具有结构层次的标记语言，通过这些标签可以告诉浏览器如何做出相应的解析。否则，如果HTML标签任意位置都能放置，就没法做标准高度统一了，那么浏览器也就无法做出正确的解析了。因此，我们看到的各种网页，都是通过这种具有结构化的标签组合而成的。

3.表单控件中的name属性为什么非常重要？

表单控件中的name值，是前端与后端进行交互时传值的变量名称，后端只有通过控件的name值才可以接收到该值进行相应的处理。

4.为什么现在都不再使用表格进行页面布局了？

1.页面布局不灵活；
2.代码的可读性：表格布局的代码可读性低，没有使用<div>， <h1>等标签直观；
3.表格加载速度慢；
4.不利于SEO；

5.一个元素，最终呈现的样式，由几方面的因素决定的？

1.继承的：根据元素在文档的结构和层级关系来确定它的最终样式；
2.浏览器客户端：用户代理样式（user agent style），基本上浏览器的表现样式都是一致的；
3.用户自定义：写在HTML文档<style>标签中的样式；
4.行内样式（内联样式）：写在元素的style属性中的样式。

以上就是我个人的总结，不知道是否完全正确，如果有错误的地方烦请各位指正，多谢大家。

在线咨询

上一篇：如何使用CSS3美化HTML5表单？
下一篇：HTML常用代码集合，背完这些基本可以自己做表白网页了

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML-CSS标准盒子模型布局 217

下面再来看看代码

1.HTML元素、标签和属性之间的关联与区别？

2.为什么说HTML是结构化的文档?

3.表单控件中的name属性为什么非常重要？

4.为什么现在都不再使用表格进行页面布局了？

5.一个元素，最终呈现的样式，由几方面的因素决定的？

您的项目需求