css盒子模型 订阅
网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 展开全文
网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
信息
构    成
边界、边框、填充、内容
有关术语
CSS
作    用
改善网页布局
中文名
CSS盒子模型
学    科
软件工程
外文名
CSS box model
CSS盒子模型简介
CSS (Cascading Style Sheet)可译为“层叠样式表 ”或“级联样式表”,它定义如何显示HTML 元素,用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念,通过定义一系列与盒子相关的属性,可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素,如果没有特殊设置,其默认总是占独立的一行,宽度为浏览器窗口的宽度,在其前后的元素不管是不是盒子,都只能排列在它的上面或者下面,即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成,即内容区(content)、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性,通过对这些属性的设置可以丰富盒子的表现效果。
收起全文
精华内容
下载资源
问答
  • CSS 盒子模型

    2020-12-14 03:17:24
    CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际...
  • css盒子模型

    2016-08-22 15:40:08
    通过这个css盒子模型的实战,更好的理解css盒子模型
  • CSS盒子模型

    2020-05-30 22:44:47
    CSS 盒子模型

    什么是盒子模型?

    HTML文档元素在页面中所占空间的矩形元素框,可以形象地将其看作是一个盒子

    实际开发过程中的盒子模型

    打开谷歌浏览器,按F12,选中一个自定义div标签元素,可以在右侧的Styles标签页查看到盒子模型,其中最外层是margin,接着是border,然后是padding,最里面的是content

    盒子有哪些属性?

    盒子模型中的盒子有这样几个属性:margin(外边距),border(边框),padding(内边距),content(内容区)

    margin

    margin在盒子的最外层,它使盒子之间不会紧凑地连接在一起,是页面元素布局一种方式,它的属性有五种 ,即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin。

    需要注意的是如果有两个相邻的盒子,他们的margin会重叠而不是相加,若两者margin不等,则取二者中较大的值

    当然我们也能将margin设置为负数,这时候margin被设置为负数的盒子会向被设置margin负数的反方向移动,整个盒子将向指定负值方向的相反方向移动

    border

    边框是环绕content和padding的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。若无指定边框属性设置,则元素默认无边框。

    边框的样式border-style有九种:solid(实线边框)、dashed(虚线边框)、dotted(点线边框)、double(双线边框)、inset(3D嵌入式边框,效果取决于边框的颜色值)、outset(3D突出式边框,效果取决于边框的颜色值)、groove(3D沟槽边框,效果取决于边框的颜色值)、ridge(3D脊边框,效果取决于边框的颜色值)

    边框宽度border-width:其属性值可以是长度计量值,也可以是CSS规定的thin、medium 和thick。

    边框颜色border-color:属性可以为边框指定相应的颜色,其属性值可以是RGB值,也可以是CSS 规定的17个颜色名 。在设定以上三种边框属性时,既可以进行边框四个方向整体的快捷设置,也可以进行四个方向的专向设置,如border: 2px solid green 或border-top-style: solid、border-left-color: red等。

    padding

    填充是内容区和边框之间的空间。填充的属性有五种 ,即padding-top、padding-bottom、padding-left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时,可使背景色延伸到填充区域。

    content

    容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区有三个属性,width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度,当内容信息太多,超出内容区所占范围时,可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时,溢出部分将不可见;为visible时,溢出的内容信息可见,只是被呈现在盒子的外部;当为scroll时,滚动条将被自动添加到盒子中,用户可以通过拉动滚动条显示内容信息;当为auto时,将由浏览器决定如何处理溢出部分。

     

    展开全文
  • css 盒子模型

    2017-03-21 16:42:42
    css 盒子模型

    为什么要理解盒子模块:

       html界面的布局就像由多个盒子组成的界面,

       理解盒子的结构,以满足不同的业务场景需要的布局。

     

    Css 盒子模型:

       CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、

    内边距(padding)、边框(border) 和 外边距(margin) 的方式。在HTML文档中,每个元素(element)

    都有盒子模型,所以说在Web世界里(特别是页面布局),Box Model无处不在。下面是Box Model的图示:

    说明:上图中,由内而外依次是元素内容(content)、内边矩(padding-top、padding-right、padding- bottom、padding-left)

    、边框(border-top、border-right、border-bottom、border- left)和外边距(marging-top、margin-right、margin-bottom、margin-left)。

     

    内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且,外边距可以是负值,而且在很多情况下都要使用负值的外边距

     

     

    下图是Css模型边距图解:

    说明:上图中,由内而外依次是元素内容(content)、内边矩(padding-top、padding-right、padding- bottom、padding-left)

    、边框(border-top、border-right、border-bottom、border- left)和外边距(marging-top、margin-right、margin-bottom、margin-left)。

     

    内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且,外边距可以是负值,而且在很多情况下都要使用负值的外边距

     

     

    下图是Css模型边距图解:


    实现代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style type="text/css">
            /**  通配符,代表所有标签 */
            *{
                padding: 0px;
                margin: 0px;
            }
            /*ID选择器*/
            #myDiv{
                /*实际的宽高,width -左右边距+ 左右边框*/
                width: 200px;
                height: 300px;
                border: 1px solid red;
                /*
                padding填充,内边距
                */
                /*
                1.上下左右的值
                2.上下,左右
                3.上,左右,下
                4.上,右,下,左
                */
                padding: 0px 10px 0px;
                margin: 10px 20px 10px;
            }
    
            #myDiv2{
                width: 200px;
                height: 300px;
                border: 1px solid green;
            }
    
            /*类选择器*/
            .title{
                color: blue;
                font-size: 14px;
            }
    
            /*混合使用*/
            span.title{
                font-size: 25px;
            }
            div > p{
                font-size: 20px;
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="myDiv">
            <p>abcdef</p>
        </div>
        <div id="myDiv2">
        </div>
        <span class="title">
            Javascripttest
        </span>
        <i  class="title">ActionScript</i>
    
    </body>
    </html>


    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,189
精华内容 5,675
关键字:

css盒子模型