韩顺平网页十三讲

最新推荐文章于 2017-12-11 16:17:47 发布

NS西北风

最新推荐文章于 2017-12-11 16:17:47 发布

阅读量775

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/huang2009303513/article/details/14226449

版权

html+css+js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

css的标准流和非标准流：

在网页布局中，写在前面的元素显示在前面，后面的元素显示在后面，是默认的方式，这就是标准流排列方式。

在实际网页布局中，我们可能需要使用非标准流的方式来布局，让某个元素脱离他原来本身的位置。

配置html加载的默认模板的地方：

C:\Program Files\MyEclipse 6.5\myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.5.0.zmyeclipse650200806\templates

xhtml1.0的标准的html文件最上面的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

盒子模型的原理分析图：

细节说明：

1在html中，每一个元素都可以看做一个盒子

2盒子模型的参照物不一样，则使用的css属性就不一样，比如从div1的角度看可能是margin-rigth，从div2的角度来看，则是mrgin-left

3如果不希望破坏整个外观，则尽量使用margin来布局，因为padding会改变盒子的大小。相当于这个盒子有弹性。margin则是挤出盒子里面的内容，但是盒子本身没有变化。

例子：

body{
border:1px solid red;/*宽度 样式 颜色*/
width:800px;
height:1000px;
margin: 0 auto;/*上下内边框为0，左右内边框居中*/
}
.s1{
width:150px;
height:152px
border:1px solid blue;
margin-top:10px;
margin-left:50px;
border: dotted;
border-top:1px solid red;
}

.s1 img{
width:40px;
margin-left:5px;
margin-top:5px;
border: dashed;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>box1.html</title>
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->	
    <link rel="stylesheet" href="box1.css" type="text/css"></link>
  </head>
  
  <body>
    <div class="s1"><img src="images/100.jpg"/></div>
  </body>
</html>