`
MauerSu
  • 浏览: 513592 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

标准流,非标准流,盒子模型

 
阅读更多
源: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盒子模型

    IE盒子模型最初是在Internet Explorer浏览器中实现的一种非标准盒子模型,后来被CSS3规范化。其特点如下: - **宽度与高度**:`width` 和 `height` 属性包含了内容区域、填充和边框的尺寸之和。 - **填充与边框**:...

    css盒子模型详解加示例

    此外,使用JavaScript库如jQuery,可以通过`$.boxModel`属性检测当前页面是否遵循W3C标准盒子模型。如果返回`true`,则表示使用的是标准模型;若返回`false`,则可能使用的是IE模型。 在实际开发中,理解并熟练运用...

    css盒子模型 css margin 外边框合并

    由于IE5和IE6浏览器在怪异模式下的盒子模型与标准模式存在差异,导致了兼容性问题。在标准模式下,元素宽度仅指内容区域的宽度,而怪异模式下的宽度包括内容、内边距和边框。这种差异有时会导致布局的不一致,因此在...

    六个盒子模型组织诊断分享.pptx

    ### 六个盒子模型组织诊断知识点详解 #### 一、六个盒子模型概述 - **发明者**: 20世纪70年代中期,由宾夕法尼亚大学组织动力学教授韦斯伯德(Weisbord)提出。 - **定义**: 六个盒子模型是一种组织诊断工具,旨在...

    深入理解css盒子模型1

    在W3C标准盒模型中,元素的总宽度和总高度是内容宽度/高度加上左右内边距、左右边框和左右外边距。但在Internet Explorer 5.x和6.x的"怪异模式"中,元素的总宽度/高度包括了内容、内边距和边框,这导致了跨浏览器的...

    1.04 浮动和和盒模型

    浮动是 CSS 中的一个重要概念,它可以让元素脱离标准流,漂浮在标准流之上,和标准流在不同的层次中。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们...

    Weighted-Boxes-Fusion:集合来自不同对象检测模型的盒子的方法集,包括“加权盒子融合(WBF)”方法的实现

    每个盒子模型的置信度得分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] 我们将第...

    基于深度神经网络的语音识别模型研究_张仕良.caj

    我们分别探索了基于sigmoid非线性激活函数的DNN(sigmoid-DNN)和基于整流线性单元(Rectified Linear Units,ReLU)的 DNN(RL-DNN)的大词汇量连续语音识别。首先针对传统的sigmoid-DNN,我们通过研究发现其隐层权重越往...

    【工具】六个盒子及其应用glq.pptx

    ### 六个盒子模型及其应用解析 #### 一、六个盒子模型概述 ##### 1. 概念定义 - **六个盒子模型**:由美国学者查尔斯·韦斯伯德提出,是一种组织诊断工具,旨在帮助企业从六个维度审视自身运作状态。 - **六个维度...

    OD组织发展之六个盒子的实战应用gl.pptx

    ### OD组织发展之六个盒子的实战应用 #### 一、六个盒子概述 “六个盒子”是一种组织诊断工具,主要用于帮助...同时,结合其他管理模型的优势,可以使六个盒子的应用更加丰富多样,更好地适应不同企业的实际需求。

    前端 50 道面试题及答案.docx

    - 标准盒子模型(W3C标准):元素的宽度等于内容宽度(content)加上边框(border)和内填充(padding),再加上外边距(margin)。 - 低版本IE盒子模型(IE传统):元素的宽度等于内容宽度(content+border+...

    CSS标准布局例子,值得一看哈···

    绝对定位会脱离正常文档流,基于最近的非静态定位祖先元素进行定位;固定定位会相对于视口定位,即使滚动页面也不会移动;粘性定位则是结合了相对和固定定位的特点,在满足特定条件时变为固定定位。 四、布局实例...

    跨浏览器兼容CSS篇整理.pdf

    本文主要聚焦于CSS的跨浏览器兼容性,特别是CSS盒子模型、块级和内联元素的区别,以及浮动和清除属性的应用。 首先,理解CSS盒子模型是实现跨浏览器兼容性的基础。盒子模型描述了元素占用空间的方式,包括元素的...

    CSS标准网页布局开发指南(光盘)源码

    在CSS标准布局中,盒模型是至关重要的概念。盒模型包括元素的内容区、内边距(padding)、边框(border)和外边距(margin),理解并能灵活运用盒模型是控制元素尺寸和间距的关键。CSS还提供了display属性,通过设置...

    详解CSS盒子塌陷的5种解决方法

    同样为父元素设置浮动(如`float:left`或`float:right`)可以使它脱离标准文档流,从而解决塌陷。但这可能会导致新的布局问题,因为现在父元素和子元素都处于浮动状态,对页面布局和后续元素的影响较大,不利于代码...

    DIV+CSS网页标准化布局

    在CSS中,可以通过`box-sizing`属性来选择使用“标准盒模型”(content + padding + border)还是“IE盒模型”(width/height + padding + border)。 四、定位机制 CSS提供了多种定位机制:静态定位(static)、...

    CSS资料.docx

    8. **盒子模型** - CSS盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 - 盒模型影响元素的实际尺寸和布局。 9. **标准流与非标准流** - 标准流:元素按顺序自上而下、从左到右排列...

    三维数字化技术综合应用教学课件标准基本体和扩展基本体.pdf

    在3ds Max中,建模主要分为标准基本体和扩展基本体两种类型,它们是构建复杂三维模型的基础。 一、标准基本体 标准基本体是3ds Max中最基础的几何形状,包括但不限于: 1. 长方体(Box):是最常见的基本体,可...

Global site tag (gtag.js) - Google Analytics