精华内容
下载资源
问答
  • DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块)。 请看如下代码: CSS部分: CSS Code复制内容到剪贴板 /*嵌套样式*/ .contain{width:200...

    本文讲解DIV块布局的第二种使用方式:嵌套。“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块)。

    请看如下代码:

    CSS部分:

    CSS Code复制内容到剪贴板
    1. /*嵌套样式*/  
    2. .contain { width:200pxheight:160pxmargin:20pxpadding:10px 20px 10px 20pxborder:1px solid #FF6600text-align:center}   
    3. .inner_contain { width:150pxheight:30pxborder:1px solid #009966}  

    HTML部分:

    XML/HTML Code复制内容到剪贴板
    1. <div class="contain">  
    2.     <div class="inner_contain">  
    3.     </div>  
    4.     <div class="inner_contain">  
    5.     </div>  
    6.     <div class="inner_contain">  
    7.     </div>  
    8. </div>  

    这里就是一个使用DIV嵌套的例子,我们看到外围有一个大的DIV嵌套了三个小DIV,其实现的效果如图所示

    DIV嵌套应用

    IE6和IE7效果

    DIV嵌套效果演示

     IE8和火狐效果

    注意,这里的预览效果是在IE6和IE7下显示出来的效果,使用火狐和IE8,页面预览效果会不同,这是因为text-align:center这个属性在IE8和火狐下不能够使得内部的DIV块也居中。我们为了让内部的DIV也居中,可以给内部的DIV块使用margin:0px auto属性,即:

    CSS Code复制内容到剪贴板
    1. .inner_contain { width:150pxheight:30pxborder:1px solid #009966margin:0px auto;}  

    这时候,就实现了浏览器兼容。

    DIV层可以实现多重嵌套,其内部可以多级嵌套多个DIV,这与表格嵌套类似,熟练使用DIV的嵌套可以很方便实现表格单元格实现的效果,例如一个三行两列的表格,只需要在一个DIV内部嵌套6个DIV即可,当然复杂的表格结构还是不建议使用DIV布局,因为表格主要用于数据处理,所以在布局网页的时候,要根据实际需要来选择布局方式。

    DIV嵌套布局网页时候,尤其要注意DIV的外边距(CSS中称为“边距”)和内边距(CSS中称为“补白”,DW中称为“填充”),如图:

    DIV盒子模型

    这里的阴影部分就是上例中的外边距和内边距的模型图,margin:20px即为外层的DIV边距,padding:10px 20px 10px 20px(上-右-下-左的内边距顺序)即为外层DIV的内边距(补白),DIV边距的设置是个难点,设置不当极易出现网页错位、变形,所以关于边距,从业者一定要时刻注意。

    转载于:https://www.cnblogs.com/minghualiyan/p/3559953.html

    展开全文
  • 但是前面学习的知识更注重实践操作,读者并不理解布局的原理,常常在布局页面的过程中遇到无法理解的问题,需要一步步重复地“试错”才能完善布局代码的编写。学习本章的盒模型的知识以后,读者将拥有较完善的布局观...

    CSS盒模型

    本节的内容非常重要,因为盒模型是CSS定位布局的核心内容。从前面章节中,读者学习了布局网页基本方法,只需利用div元素和列表元素,即可完成页面大部分的布局工作。但是前面学习的知识更注重实践操作,读者并不理解布局的原理,常常在布局页面的过程中遇到无法理解的问题,需要一步步重复地“试错”才能完善布局代码的编写。学习本章的盒模型的知识以后,读者将拥有较完善的布局观,基本可做到在代码编写前就“胸有成竹”。

    什么是CSS盒模型

    XHTML中大部分的元素(特别是块状元素)都可以看做一个盒子,而网页的元素的定位实际就是这些大大小小的盒子在页面中的定位。这些盒子在页面中是“流动”的,当某个块状元素被CSS设置了浮动属性,这个盒子就会“流”到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套的问题,而这么多盒子摆在一起,最需要关注的是盒子尺寸计算、是否流动等要素

    为什么要把XHTML元素作为盒模型来研究呢?因为XHTML元素的特性和一个盒子非常相似,如图11.18所示。

    图11.18 盒模型示意图

    大多数XHTML元素的结构都类似于图11.18所示,除了包含的内容(文本或图片)外,还有内边距、边框和外边距一层层的包裹。读者在布局网页和定位XHTML元素时要充分地考虑到这些要素,才可以更自如地摆弄这些盒子。

    外边距属性即CSS的margin属性,CSS中可拆分为margin-top(顶部外边距)、margin-bottom(底部外边距)、margin-left(左边外边距)和margin-right(右边外边距)。CSS的边框属性(border)和内边距属性(padding)同样可拆分为4边。在Web标准中,CSS的width属性即为盒子所包含内容的宽度,而整个盒子的实际宽度即为:

    盒子宽度=padding-left+border-left+margin-

    left+width+padding-right+border- right+margin-right

    相应地,CSS的height属性即为盒子所包含内容的高度,而整个盒子的实际高度即为:

    盒子高度=margin-top+border-top+padding-

    top+height+padding-bottom+border -bottom+margin-bottom

    ()

    展开全文
  • 盒子模型

    2020-06-25 21:16:03
    基于div + css 布局技术的盒子模型的出现替代了传统的 table表格嵌套,它不但弥补了table布局的缺陷,而且在页面加载速度和搜索引擎的支持方面有显著的改善。 margin:外边距 border:边框 padding:内边距 1735*...

    盒子模型

    概述

    ​ 传统的网页一般采用table布局,将内容与页面效果混杂在一起,导致页面代码冗余,布局结构不清晰,不易于网站版面修改。基于div + css 布局技术的盒子模型的出现替代了传统的 table表格嵌套,它不但弥补了table布局的缺陷,而且在页面加载速度和搜索引擎的支持方面有显著的改善。

    在这里插入图片描述

    margin:外边距

    border:边框

    padding:内边距

    1735*456:内容大小

    如何计算盒子模型的大小

    ​ 大小=margin+border+padding+内容大小

    常见操作

    通常,我们会在一开始去掉body等标签的默认内外边距,便于后续操作

    a{
    margin:0;
    padding:0;
    }
    

    边框Border

    border-width 粗细

    border-style 样式

    border-color 颜色

    border: width style color;

    内外边距

    margin:参数1    四边全部都改
    margin:参数1 参数2  参数1改上下  参数2改左右
    margin:参数1 参数2 参数3 参数4  参数1上   参数2右  参数3下  参数4左    (顺时针方向)
    padding用法相同
    margin:0 auto 左右自动居中
    
    网页居中对齐的必要条件
    		块元素
    		固定宽度
    
    
    

    box-sizing 属性

    box-sizing:content-box  |  border-box  |  inherit;
    
    规定两个并排的带边框的框:
    div
    {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    float:left;
    }
    

    圆角边框

    border-radius: 75px 150px  0px 100px;
    

    用四个属性定位四个点

    四个属性值按顺时针排列

    制作圆形:

    • 元素的宽/高 必须相同
    • 圆角半径为元素的一半,或者直接设置圆角半径为50%.

    制作半圆:

    • 制作上半圆或者下半圆时,元素宽度是高度的2倍,而且圆角半径为元素的高度值。

    • 制作左半圆或者右半圆时,元素高度是宽度的2倍,而且圆角半径是元素的宽度值。

      注意:

      在制作圆形时,要准守三同三不同。

      三同:元素宽度、高度、圆角半径相同。

      三不同:圆角取值位置相同。

    盒子阴影

    box-shadow:inset  x-offset  y-offset  blur-radius  color;
    inset:阴影类型 内阴影
    x-offset: x轴位移
    y-offset   y轴位移
    blue-radius: 阴影模糊半径阴影向外模糊的模糊范围
    color:阴影颜色
    
    展开全文
  • 一、CSS的简介 Cascading Style Sheets:层叠样式表 可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。...div style=" height:400px; width:400p...

    一、CSS的简介

    Cascading Style Sheets:层叠样式表

    可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。

    将网页内容和显示样式进行了分离,提高了显示功能。

    二、CSS和HTML的结合方式

    插入样式表的方法有三种:

    • 外部样式表(External style sheet)

    • 内部样式表(Internal style sheet)

    • 内联样式(Inline style)

    外部样式表

    当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

    下面是一个样式表文件的例子:

    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("/images/back40.gif");}

    内部样式表

    当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

    <head>
        <style>
            p {margin-left:20px;}
        </style>
    </head>

    内联样式

    由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

    要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

    优先级:

    内联样式 > 内部样式> 外部样式 > 浏览器默认样式

    三、CSS的选择器

    1.三种基本选择器

    (1)标签选择器

    <!--使用标签名作为选择器的名称-->
        div{
            color:#0F6;
            size:8px;   
        }

    (2)类选择器

    <!--每个标签都有class属性值,使用.class属性值作为选择器的名称-->
        .color{
            color:#F00  
        }
    <p class="color">演示文字</p>

    (3)id选择器

    <!--每个标签都有id属性,使用#id属性值作为选择器的名称-->
        #show{
            color:#C09;
        }
    <p id="show">演示文字2</p>

    优先级:

    style属性>id选择器>class选择器>标签选择器

    2.扩展选择器

    (1)关联选择器

    <!--如果只想操作div里面的p标签,可以用关联选择器  标签和标签之间用空格分隔开-->
        div p{
            color:#33F;
        }
    ​
    <div><p>该区域颜色会改变</p></div>
    <p>该区域颜色没有变化</p>

    (2)组合选择器

    <!--如果想同时操作两个标签,可以用组合选择器  标签和标签之间用,分隔开-->
        div,p{
            color:#33F;
        }
    ​
    <div>演示文字1</div>
    <p>演示文字2</p>

    (3)伪元素选择器

    <!--
    用于向某些选择器添加特殊的效果,比如超链接
    a:link 默认状态
    a:hover 鼠标放上的状态
    a:active 鼠标点击中的状态
    a:visited 已经访问(点击)过后的状态
    -->

    注意: a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。

    注意: a:active 必须在 a:hover 之后。

    四、CSS的盒子模型

     

    在进行布局前把数据封装到一块一块的区域中。 一般用:<div></div>

    不同部分的说明:

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

    • Border(边框) - 围绕在内边距和内容外的边框。

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

    • Content(内容) - 盒子的内容,显示文本和图像。

    示例:

    div {
        width: 300px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
    }

     

    五、CSS的布局的漂浮

    • float:

      • left:文本流向对象的右边

      • right:文本流向对象的左边

    代码演示:

    <style type="text/css">
        #foot{
                width:910px;
                height:169px;
                background:f2f2f2;
                margin:0 auto;
            }
        #left{ width:300px; height:169px; float:left;background:#F00}
        #center{ width:300px; height:169px; float:left; margin-left:5px; background:#9C0}
        #right{ width:300px; height:169px; float:right; margin-left:5px; background:#0F0}
    </style>
    ​
    <div id="foot">
    ​
    <div id="left">div演示1</div>
    <div id="center">div演示2</div>
    <div id="right">div演示3</div>
    </div>

    img

    六、CSS的布局的定位

    position:

    • absolute:

      • 将对象从文档流中拖出(可以理解为该对象漂浮在空中,其他标签会往上顶)

      • 可以是top、bottom等属性进行定位(可以理解为该对象原来的位置已经被该对象私有,其它标签还是保持原位置

    • relative

      • 不会把对象从文档流中拖出

      • 可以使用top、bottom等属性进行定位

    <!--可以利用定位属性在图片上加文字描述-->
    <style>
        img{
            width:300px;
            height:300px;
        }
        #imgdec{
            position:absolute;
            top:250px;
            left:100px; 
            color:#009;
        }
    </style>
    ​
    <img src="timg.jpg" />
    <div id="imgdec">海贼王,我来了</div>

    img

    展开全文
  • 1.ie与其他浏览器盒子的宽度和高度是不同的: IE的宽高度包括了边框和内嵌边距,而其他浏览器的宽高度为内嵌文本的宽高度。 2.源代码: .box { width:250px !important; 其他浏览器宽高度 width:300px; IE为后边...
  • 盒子模型的效果: 调整faceul的宽,可以调整每一排摆放的数目,调整div1的margin值,可以改变整体的位置,这是很有用的布局模式 =========================================================== html代码: <...
  • css构造练习.aspx代码如下: #div_head,#div_foot { border:1px solid gray; text-align:center; padding:3px; height:30px; background-color:Gr
  • css盒子模型

    2019-11-22 16:14:26
    简要的来说,CSS盒子模型由四部分组成:content(内容)、padding(内边距)、border(边框)、margin(外边距)。下面用一幅图来说明。 下面用代码来实现一下盒子在网页中的布局。 1.首先在body中写入两个div,如...
  • 网站开发_盒子模型

    2019-09-29 20:13:47
    先主流布局div+css,更容易实现数据与表现的分离,代码更少,更容易维护。 两种盒子模型 w3c标准盒子模型以及IE盒子模型,推荐试用标准盒子模型。需要在网页顶部加DOCTYPE 声明区分。 <!DOCTYPE ...
  • Flex弹性盒子模型

    2018-08-11 08:26:03
    下面写一些代码介绍一下如何定义弹性盒子模型以及简单的布局方式。 body部分定义几个div。 &lt;div id="container"&gt; &lt;div id="inner1"&gt;&lt;/div&gt...
  • 第1~5章主要介绍网页样式布局的基础知识,包括基本概念和语法、代码的编写方法、盒子模型及高级特性等;第6~11章主要介绍网页样式布局的常用设置,包括网页字体与对象尺寸、文本 资源太大,传百度网盘了,链接在...
  • JAVAWeb_CSS_Div+CSS布局

    2019-10-13 21:24:22
    Div+CSS布局 一、div和span 1、DIV和span在整个html标记中,无任何意义,存在就是为了应用CSS样式 2、DIv和span的区别:span是内联元素,div是块级元素 二、盒模型 1、margin:盒子外边距 2、padding:盒子内边距 3...
  • 在使用div+css布局的我们总会遇到需要把盒子模型居中的案列 那么怎么写才能让下面的盒子居中 现在的css代码是这样的 <style> div{ width: 400px; height: 400px; background-color: cornflowerblue; } &...
  • 第1~5章主要介绍网页样式布局的基础知识,包括基本概念和语法、代码的编写方法、盒子模型及高级特性等;第6~11章主要介绍网页样式布局的常用设置,包括网页字体与对象尺寸、文本与段落、文本样式、文本颜色与效果...
  • 行内元素的互换:隐藏元素:设置透明度:盒子模型预备知识:margin快速设置:居中显示:外边距合并:子父类div:margin负值:边框borderpadding怪异盒模型:div+css布局注意事项 定位 相对定位 以当前为参照物移动...
  • 可以做什么:可以使页面更加美观,可以将代码和样式分离开来,以便后期的维护 怎么做: 1、css结合其他东西才能有用,与html的四种结合方式:  1.1利用被一个标签都有的属性:style &lt;div style="...
  • 第1~5章主要介绍网页样式布局的基础知识,包括基本概念和语法、代码的编写方法、盒子模型及高级特性等;第6~11章主要介绍网页样式布局的常用设置,包括网页字体与对象尺寸、文本与段落、文本样式、文本颜色与效果...
  • 【CSS】——盒子模型

    热门讨论 2016-03-27 16:39:18
    因为之前的界面都是可视化的,都是通过拖拽创建的,而进入B/S阶段所有的控件都是通过代码来完成创建的,就必须通过代码来控制界面的设置,这一部分就是引入了一种网页的布局方法——DIV+CSS。何为DIV+CSS? DIV+CSS...
  • Flex弹性盒子布局

    2018-02-13 17:55:00
    首先,设置伸缩盒的 display 有如下两个属性值: ...代码如下: /*大部分不需要前缀*/ div { display: flex; } 弹性布局的八个常用属性: 1.flex-directionflex-direction 属性和旧版本 box-orie...
  • 最近一周都在写<div><text><image><list>各种标签,以前也不是很熟,在布局方面也踩了不少的坑,但是...1.在前端代码中任何的布局代码样式,都是一个盒子,<div>就是一个盒子,里面...
  • 面试题目 假设高度已知,请写出三栏布局,左右300px,中间自适应 有几种方法呢? 最容易的应该想到利用float来写,代码如下 css样式代码,以下五种都是用一个样式代码 <section> <article> <div ...
  • CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局。同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间。 自己写了一个弹性盒子的demo: 主要HTML代码: <...
  • DIV是一个盒子模型通俗说就是一个容器,在布局过程中经常会使用到这个标签,在本文大家将学会如何让DIV可编辑、可拖动,感兴趣的朋友可以参考下,希望对大家有所帮助

空空如也

空空如也

1 2 3 4 5 6
收藏数 109
精华内容 43
关键字:

div盒子模型布局代码