精华内容
下载资源
问答
  • Html盒模型

    2019-04-30 01:17:04
    NULL 博文链接:https://lbovinl.iteye.com/blog/2435565
  • 介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别,他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。
  • 盒子模型代码

    2018-10-09 15:07:18
    简单的html代码,盒子模型,只是大概的描述下盒子模型的例子
  • css3-盒模型实例.html

    2016-08-27 19:12:12
    同上
  • css盒子模型

    2016-08-22 15:40:08
    通过这个css盒子模型的实战,更好的理解css盒子模型
  • HTML 布局 浮动 位置移动 和 边框盒子模型例子 通过这些文件例子的使用你基本可以了解布局的一些相关只是,通过例子自己尝试做出自己的页面
  • 相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下
  • 4.3 元素的类型与转换 4.3.2 与标记 1标记 标记将网页分割为独立的不同的部分以实现网页的规划和布局与之间相当于一个容器可以容纳段落标题表格图像等各种网页元素 标记通过与idclass等属性配合然后使用CSS设置样式...
  • 由于目前大部分主流的浏览器支持的是W3C标准盒模型(标准盒模型),也有保留对怪异盒子样式的解析,当然IE沿用的是自己标准的盒模型(怪异盒子模型) 用两个简单的例子分别介绍下这两个盒子模型: 标准盒模型: <...
  • 关于css盒模型的介绍

    2020-03-21 18:48:21
    盒模型的content (内容区)、padding(填充区)boder(边界区)、margin(外边界区)及其使用方法
  • CSS 盒子模型

    2020-12-14 03:17:24
    CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): 不同部分的说明:...
  • 迅速入门弹性盒子模型:一个使用Flex布局的网页(包括HTML和CSS),可以作为网页的模板,也可以用来学习弹性盒子模型在实例中的具体应用方式。
  • CSS+盒模型
  • 前言 这是我学习了这个网站整理的笔记,接下来还会持续更新。 盒子模型与背景属性一.盒子模型1.介绍2. 元素的总宽度和总高度二.自定义边框——border1.基本设置2.边框宽度——Border Width3.边框颜色——Border ...
  • HTML5中盒子模型重点总结

    万次阅读 多人点赞 2018-08-23 22:04:21
    什么是盒子模型? 盒子模型就是布局网页的一种手段包括边框(border)、外边距(margin)、内边距(padding)、网页元素(content)、宽(width)、高(height)等元素。 边框border: 1. 边框颜色:border-...

    什么是盒子模型?

    盒子模型就是布局网页的一种手段包括边框(border)、外边距(margin)、内边距(padding)、网页元素(content)、宽(width)、高(height)等元素。

     

    边框border:

    1. 边框颜色:border-color:

    属性

    说明

    示例

    border-top-color

    上边框颜色

    border-top-color:#369;

    border-right-color

    右边框颜色

    border-right-color:#369;

    border-bottom-color

    下边框颜色

    border-bottom-color:#fae45b;

    border-left-color

    左边框颜色

    border-left-color:#efcd56;

    border-color

    四个边框为同一颜色

    border-color:#eeff34;

    上、下边框颜色:#369

    左、右边框颜色:#000

    border-color:#369 #000;

    上边框颜色:#369

    左、右边框颜色:#000

    下边框颜色:#f00

    border-color:#369 #000 #f00;

    上、右、下、左边框颜色:

    #369、#000、#f00、#00f

    border-color:#369 #000 #f00 #00f;

    四条边框写颜色时的顺序是顺时针的:上、右、下、左,如果只设置两个值的话看对边。

     

    2. 边框粗细:border-width

    Thin(细)、medium(中间)、thick(粗)、像素值

    border-top-width:5px;

    border-right-width:10px;

    border-bottom-width:8px;

    border-left-width:22px;

    四条边框写粗细时的顺序也是顺时针的:上、右、下、左,如果只设置两个值的话看对边。

    border-width:5px ;                  【上5、右5、下5、左5】

    border-width:20px 2px;              【上20、右2、下20、左2】 

    border-width:5px 1px 6px;           【上5、右1、下6、左1】

    border-width:1px 3px 5px 2px;       【上1、右3、下5、左2】

     

    3. 边框样式:border-style

    none(没有)、hidden(隐藏)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(凹槽边框)、ridge(垄状边框)、inset(嵌入边框)、outset(外凸边框)

    border-top-style:solid;

    border-right-style:solid;

    border-bottom-style:solid;

    border-left-style:solid;

    四条边框写类型时的顺序也是顺时针的:上、右、下、左,如果只设置两个值的话看对边。

    border-style:solid ;                    【上实、右实、下实、左实】

    border-style:solid dotted;              【上实、右点、下实、左点】

    border-style:solid dotted dashed;       【上实、右点、下虚、左点】

    border-style:solid dotted dashed double; 【上实、右点、下虚、左双】

     

    4. 同时设置边框的粗细、样式和颜色

    border:1px solid #3a6587;

    border: 1px dashed red;

     

    外边距margin:

    1. margin-top、margin-right、margin-bottom、margin-left、margin

    例如:

    margin-top: 1 px

    margin-right : 2 px

    margin-bottom : 2 px

    margin-left : 1 px

    四个外边距写距离时的顺序也是顺时针的:上、右、下、左,如果只设置两个值的话看对边。

    margin :8px;                 【上8、右8、下8、左8】

    margin :3px 5px;             【上3、右5、下3、左5】

    margin :3px 5px 7px;         【上3、右5、下7、左5】

    margin :3px 5px 7px 4px;     【上3、右5、下7、左4】

     

    2. 外边距的妙用

    margin:0px  auto;

    网页居中对齐的必要条件:块元素并且必须固定宽度。

     

    内边距padding:

    1. padding-left、padding-right、padding-top、padding-bottom、padding

    padding-left:10px;

    padding-right: 5px;

    padding-top: 20px;

    padding-bottom:8px;

    四个内边距写距离时的顺序也是顺时针的:上、右、下、左,如果只设置两个值的话看对边。

    padding:10px;                        【上10、右10、下10、左10】

    padding:10px 5px;                    【上10、右5、下10、左5】

    padding:30px 8px 10px ;               【上30、右8、下10、左8】

    padding:20px 5px 8px 10px ;            【上20、右5、下8、左10】

     

    默认边距:

    在HTML5中很多元素都有默认的外边距或者内边距。

    比较特殊的是div,没有外边距或者内边距,其他的都有。

    去掉边距的方法有:

    margin:0;

    padding:0;

    (清除默认样式)

    清除所有元素的边距方法:

    *{  margin:0;  padding:0;  }

    (*就是表示包括了所有的元素)

    盒子型模的尺寸:

    盒子模型总尺寸=border+padding+margin+内容宽度

     

    box-sizing:

    浏览器兼容性:

    属性名

    IE

    Firefox

    Chrome

    Opera

    Safari

    box-sizing

    8+

    1.5+

    1.0+

    9.0+

    3.1+

     

    p{

    width: 100px;

    height: 100px;

    padding: 5px;

    margin: 10px;

    border: 1px solid red;

    box-size: content-box}

    content-box就是默认值写了和没写一样

    此时盒子总范围:112px *112px

    p{

    width: 100px;

    height: 100px;

    padding: 5px;

    margin: 10px;

    border: 1px solid red;

    box-size: border-box }

    border-box就是把设置的width: 100px;和height: 100px;直接设为盒子的总范围:

    此时为100px *100px

     

    圆角边框:

    border-radius: 20px  10px  50px  30px;

    四个属性值按顺时针排列,如果只设置两个值的话看对角。

    border-radius: 20px;                        【右上20、右下20、左下20、左上20】

    border-radius: 20px  10px;                  【右上20、右下10、左下20、左上10】

    border-radius: 20px  10px  50px;            【右上20、右下10、左下50、左上10】

    border-radius: 20px  10px  50px  30px;      【右上20、右下10、左下50、左上30】

     

    使用border-radius制作特殊图形:

    1. 圆形

    利用border-radius属性制作圆形的两个要点:

    ① 元素的宽度和高度必须相同

    ② 圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%

    div{                     或者:     div{

    width: 100px;                                            width: 100px;

    height: 100px;                                          height: 100px;

    border: 4px solid red;                               border: 4px solid red;

    border-radius: 50%;  }                              border-radius: 54px;  }

    运行结果:

     

    2. 半圆形

    利用border-radius属性制作半圆形的两个要点:

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

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

    上半圆:

    div{                  

    width: 100px;                                    

    height: 50px; 

    border: 4px solid red;         

    border-radius: 54px  54px  0  0;  }

    下半圆:

    div{                  

    width: 100px;                                    

    height: 50px; 

    border: 4px solid red;         

    border-radius: 0  0  54px  54px;  }

    左半圆:

    div{                  

    width: 50px;                                     

    height: 100px;      

    border: 4px solid red;         

    border-radius: 54px  0  0  54px;  }

    右半圆:

    div{                  

    width: 50px;                                     

    height: 100px;      

    border: 4px solid red;         

    border-radius: 0  54px  54px  0;  }

     

    3. 扇形

    利用border-radius属性制作扇形遵循“三同,一不同”原则:

    ① “三同”是元素宽度、高度、圆角半径相同

    ② “一不同”是圆角取值位置不同

    左上扇形:

    div{                  

    width: 50px;                                     

    height: 50px; 

    border: 4px solid red;         

    border-radius: 54px  0  0  0;  }

    右上扇形:

    div{                   

    width: 50px;                                     

    height: 50px; 

    border: 4px solid red;         

    border-radius: 0  54px  0  0;  }

    右下扇形:

    div{                  

    width: 50px;                                     

    height: 50px; 

    border: 4px solid red;         

    border-radius: 0  0  54px  0;  }

    左下扇形:

    div{                  

    width: 50px;                                     

    height: 50px; 

    border: 4px solid red;         

    border-radius: 0  0  0  54px;  }

     

    盒子阴影:

    浏览器兼容性:

    属性名

    IE

    Firefox

    Chrome

    Opera

    Safari

    box-shadow

    9+

    3.5+

    2.0+

    10.5+

    4.0+

    Inset是内阴影

    不设置就是外阴影

    例如:

    情况一:(此时有inset)

    div{

     margin: 20px auto;

     width: 200px;

     height: 200px;

     background-color: lightskyblue;

     box-shadow: inset 10px 10px 3px blue;  }

    运行结果:

    情况二:(此时没有inset)

    div{

     margin: 20px auto;

     width: 200px;

     height: 200px;

     background-color: lightskyblue;

     box-shadow: 10px 10px 3px black;  }

    运行结果:

    情况三:(此时应有inset值的地方值为0)

    div{

     margin: 20px auto;

     width: 200px;

     height: 200px;

     background-color: lightskyblue;

     box-shadow: 0 10px 10px 3px black;  }

    运行结果:

    情况四:(此同时有内阴影和外阴影)

    div{

     margin: 20px auto;

     width: 200px;

     height: 200px;

     background-color: lightskyblue;

     box-shadow: inset 10px 10px 3px blue, 10px 10px 3px black;  }

    运行结果:

    总结:

    展开全文
  • HTML5常用四种盒模型标签介绍与区分

    千次阅读 2019-07-15 23:34:12
    今天我们一起来学习一下HTML5中几种常见的盒模型标签,作者尽量用白话的形式阐述,欢迎批评指正 首先,先简单介绍一下盒模型 盒模型 盒模型由1、外边距(margin):通常用于盒子的定位,是透明的,可以显示父...

    今天我们一起来学习一下HTML5中几种常见的盒模型标签,作者尽量用白话的形式阐述,欢迎批评指正

    首先,先简单介绍一下盒模型

    盒模型

    盒模型由1、外边距(margin):通常用于盒子的定位,是透明的,可以显示父元素(包裹着这个盒子元素的元素)的背景。

                   2、边框(border):    边框是围绕内填充区的一条或多条线,由粗细、样式(直线、虚线、点状线等)、颜色三种属性构成,可以灵活的实现设置下划线、分界线等功能。

                   3、内填充区(内边距):通常用于调整内容在盒子中的位置,是透明的。受盒子的背景影响。

                   4、内容(元素):盒子的内容,显示文本和图像。

    注释:1、父元素,举例,如下代码所示id为“d1”的div元素就是id为“d2”的div元素的父元素。

    <div id="d1">
        <div id="d2"></div>
    </div>

     

    四个部分组成

    通常情况下,我们在浏览器中不会看到内填充区盒外边距区(因为默认状态下它们是透明的,当设置背景的时候,背景会在内填充区生效),在浏览器中我们通常能看到的是这个样子

    接下来,我们来学习<div.../><span.../><a.../><p.../>这四种常用的盒类型元素

    这四种元素分别属于两种盒类型 :block类型和inline类型

    接下来,我们来做一个小实验来区别这两种类型

    <html>
    <body>
    	<div style="background-color: blue">我是div</div>
    	<p style="background-color: yellow">我是p</p>
    	<span style="background-color: red">我是span</span>
    	<a style="background-color:green">我是a</a>
    </body>
    </html>

    结果如下: 

     

    block类型:

    block模型的元素默认占据一行,允许通过css设置宽度、高度。由此可见<div.../>和<p.../>两个元素是属于block类型的

    那么这两种元素之间的区别在哪呢?我们再做一个实验

     

    <html>
    <body>
    	<div style="background-color: blue">我是div</div>
    	<div style="background-color: blue">我是div</div>
    	<p style="background-color: yellow">我是p</p>
    	<p style="background-color: yellow">我是p</p>
    </body>
    </html>

     我们可以看到,两个div元素之间是没有缝隙的,而p元素与其他元素之间都有距离

    div是布局框架标签,常用于页面框架的布局

    p是段落标签,常用于为文章布局

    inline类型:

     inline类型的元素的宽度与高度取决于它的内容的高度与宽度,在页面宽度允许的情况下,默认一行放多个元素直至放不下,即使通过CSS也无法设置它的高度与宽度。显然<span.../><a.../>两种元素属于inline类型

    由于inline类型的特殊性,<span>常被用来组合想要放在同一行的元素

    <a>标签则因为它特殊的href属性,常被用来搭建链接。

     

    以上就是作者今天分享的内容,欢迎大家批评指正!

    展开全文
  • html - 盒子模型

    万次阅读 2020-02-06 14:57:16
    什么是盒子模型 CSS 中 HTML 页面中的每一个元素都是一个盒子或者说是被一个盒子所包围着 盒子模型的组成部分 内容区(content):用来在 HTML 页面显示内容的区域,可以是文本内容、图片、视频或者其他后代...

    什么是盒子模型

    1. CSS 中 HTML 页面中的每一个元素都是一个盒子或者说是被一个盒子所包围着

    盒子模型的组成部分

    • 内容区(content):用来在 HTML 页面显示内容的区域,可以是文本内容、图片、视频或者其他后代元素等。

    • 内边距(padding):指的是内容区至边框之间的空白区域。

    • 边框(border):包含内容区和内边距的边界。

    • 外边距(margin):指的是当前盒子模型的边框至其他盒子模型的边框之间的区域。

      • width 属性和 height 属性设置盒子模型的内容区在页面中所占区域。
      • border 属性、padding 属性和 margin 属性分别设置盒子的边框、内边距和外边距。

    设置盒子模型的大小

    1. 在默认情况下,一个元素的盒子模型的大小是刚好可以容纳其内容的(文本、图片或视频等),并且会根据其内容变化而变化。
    2. 通过 CSS 的 width 属性和 height 属性设置盒子模型最终显示的宽度和高度,从而改变盒子模型的大小。
      1. min-width 属性:用来为 HTML 元素设置最小宽度。浏览器显示其元素时,元素的宽度最小不能小于该值。
      2. max-width 属性:用来为 HTML 元素设置最大宽度。浏览器显示其元素时,元素的宽度最大不能大于该值。
      3. min-height 属性:用来为 HTML 元素设置最小高度。浏览器显示其元素时,元素的高度最小不能小于该值。
      4. max-height 属性:用来为 HTML 元素设置最大高度。浏览器显示其元素时,元素的高度最大不能大于该值。

    盒子的阴影

    1. box-shadow为 HTML 元素的盒子模型的边框设置阴影效果
    2. box-shadow: 5px 5px 5px lightcoral;
    3. 第一个参数为向右偏移(当然如果第一个参数为负数就是向左偏移)
    4. 第二个参数为向下偏移(当然如果第二个参数为负数就是向上偏移)
    5. 第三个参数为设置盒子边框的阴影模糊半径
    6. 第四个参数为设置边框的颜色

    盒子模型的边框

    1. border 属性用来设置盒子模型的边框,该属性的值具有 3 个,分别为宽度(默认值:1px)、样式和颜色(默认值:black)

    2. border: [border-width || border-style || border-color] ;
      

      直接设置border默认为设置四边的边框

    3. border 属性还可以划分为如下所示的 4 个方向的属性:

      • border-top 属性:表示顶部的边框
      • border-right 属性:表示右边的边框
      • border-bottom 属性:表示底部的边框
      • border-left 属性:表示左边的边框
        • 例: border-left: 2px solid lightcoral;

    边框宽度

    1. border-width 属性单独设置边框的宽度(一并设置4个方向的边框)
    2. border-width也可以分别设置4边各自边框的宽度
      1. border-top-width 属性:表示顶部的边框宽度
      2. border-right-width 属性:表示右边的边框宽度
      3. border-bottom-width 属性:表示底部的边框宽度
      4. border-left-width 属性:表示左边的边框宽度
    3. 置 border-width 属性的 1 到 4 个值来分别设置上、右、下和左 4 个方向的边框宽度
      1. 如果为 border-width 属性设置一个值,则同时设置边框的四个方向的宽度。
      2. 如果为 border-width 属性设置两个值,则第一个值表示上下方向的宽度,第二个值表示左右方向的宽度。
      3. 如果为 border-width 属性设置三个值,则第一个值表示上边宽度,第二个值表示左右方向宽度,第三个值表示下边宽度。
      4. 如果为 border-width 属性设置四个值,则分别表示设置上、右、下和左四个方向的边框宽度。

    边框颜色

    1. border-color 属性来单独设置边框的颜色(一并设置上、右、下和左 4 个方向的边框)
    2. border-color 属性还可以划分为如下所示的 4 个方向的属性:
      1. border-top-color 属性:表示顶部的边框颜色
      2. border-right-color 属性:表示右边的边框颜色
      3. border-bottom-color 属性:表示底部的边框颜色
      4. border-left-color 属性:表示左边的边框颜色
    3. border-color 属性的 1 到 4 个值来分别设置上、右、下和左 4 个方向的边框颜色
    4. 如果为 border-color 属性设置一个值,则同时设置边框的四个方向的颜色。
    5. 如果为 border-color 属性设置两个值,则第一个值表示上下方向的颜色,第二个值表示左右方向的颜色。
    6. 如果为 border-color 属性设置三个值,则第一个值表示上边颜色,第二个值表示左右方向颜色,第三个值表示下边颜色。
    7. 如果为 border-color 属性设置四个值,则分别表示设置上、右、下和左四个方向的边框颜色。

    边框样式

    1. border-style 属性来单独设置边框的样式(一并设置上、右、下和左 4 个方向的边框)

    2. 关键字描述
      none不显示边框,优先级别最低
      hidden不显示边框,优先级别最高
      dotted显示为一系列圆点
      dashed显示为一系列短的方形虚线
      solid显示为一条实线
      double显示为一条双实线
      groove显示为有雕刻效果的边框,样式与 ridge 相反
      ridge显示为有浮雕效果的边框,样式与 groove 相反
      inset显示为有陷入效果的边框,样式与 outset 相反
      outset显示为有突出效果的边框,样式与 inset 相反
    3. border-style 属性还可以划分为如下所示的 4 个方向的属性:

      1. border-top-style 属性:表示顶部的边框样式
      2. border-right-style 属性:表示右边的边框样式
      3. border-bottom-style 属性:表示底部的边框样式
      4. border-left-style 属性:表示左边的边框样式
    4. border-style 属性的 1 到 4 个值来分别设置上、右、下和左 4 个方向的边框样式

      1. 如果为 border-style 属性设置一个值,则同时设置边框的四个方向的样式。
      2. 如果为 border-style 属性设置两个值,则第一个值表示上下方向的样式,第二个值表示左右方向的样式。
      3. 如果为 border-style 属性设置三个值,则第一个值表示上边样式,第二个值表示左右方向样式,第三个值表示下边样式。
      4. 如果为 border-style 属性设置四个值,则分别表示设置上、右、下和左四个方向的边框样式。

    边框圆角

    1. border-radius 属性用来设置边框的圆角(同时设置 4 个角为圆角)
    2. 使用一个半径的话确定的是圆形,如果使用两个半径的话确定的是椭圆形
      1. border-radius: 10px;
        border-radius: 10px / 20px;
        1. radius:表示圆形的半径。
        2. horizontal-radius / vertical-radius:表示椭圆形的长半径和短半径,其中 horizontal-radius 表示椭圆形的水平方向的半径,vertical-radius 表示椭圆形的垂直方向的半径。
    3. 分别设置这 4 个角为圆角效果的方式
      1. border-top-left-radius 属性:设置边框左上角的圆角效果。
      2. border-top-right-radius 属性:设置边框右上角的圆角效果。
      3. border-bottom-right-radius 属性:设置边框右下角的圆角效果。
      4. border-bottom-left-radius 属性:设置边框左下角的圆角效果。
    4. 还可以通过设置 border-radius 属性的 1 到 4 个值来分别设置 4 个角的边框圆角效果
      1. 如果为 border-radius 属性设置一个值,则同时设置边框的四个圆角。
      2. 如果为 border-radius 属性设置两个值,则第一个值表示左上和右下圆角,第二个值表示右上和左下圆角。
      3. 如果为 border-radius 属性设置三个值,则第一个值表示左上圆角,第二个值表示右上和左下圆角,第三个值表示右下圆角。
      4. 如果为 border-radius 属性设置四个值,则分别表示设置左上、右上、右下和左下圆角。

    边框图像

    1. border-image 属性允许使用图像来设置边框
     <style>
        .example-element {
          width: 200px;
          height: 30px;
          border: 30px solid transparent;                    <-先设置边框
        }
    
        .box {
          border-image: url('./files/border.png') 30;         <-在边框中插入图片 设置图片的宽度
        }
     </style>
    

    {
    border-image: url(’./files/border.png’) 30; <-在边框中插入图片 设置图片的宽度
    }

    
    [外链图片转存中...(img-gcS8tb1b-1580972182347)]
    
    
    
    
    
    2. border-image:默认为图片的拉伸
    
    展开全文
  • HTML 盒子模型div

    千次阅读 2019-07-05 16:16:00
    HTML 中的div定义: 可定义文档中的分区或节(division/section)。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。 如果用 id 或 class 来标记 div,那么...

    HTML 中的div定义

    1. 可定义文档中的分区或节(division/section)。

    2. 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

    如果用 id 或 class 来标记 div,那么该标签的作用会变得更加有效。
    用法

    div是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是

    固有的唯一格式表现。可以通过 div的 class 或 id 应用额外的样式。

    不必为每一个 div都加上类或 id,虽然这样做也有一定的好处。

    可以对同一个 div 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

    实例
    <div id = " text"><div> <div class = " text1"><div> <div class = " text1"><div>
    //div 中可以设置id属性,通过引用id属性来为div设置一些样式

    //在style标签中,可以对你写的代码进行样式的设计,样式设计可以通过以下几种方法来写
    1.通过引用id来设置样式,在id名称前加上# 格式: #id名称{ }
    #text{ }
    2.通过class来设置样式,class后面的名字可以是一样的,而id取名唯一,因此在需要设置同类型的样式时可以使用class来设置 格式: .class名称{ }
    .text1{ }
    3.通过标签名称来设置样式 格式: div{ }
    div{ }

    样式:
    1.width :50px; // 宽度
    2.height :50px;//高度
    3.border : 1px solid red; //边框,border可以设置三个属性,分别是边框宽度,边框样式(实线,虚线等),边框颜色
    4.margin:属性定义及使用说明

    margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

    实例:

    margin:10px 5px 15px 20px;
        上边距是 10px
        右边距是 5px
        下边距是 15px
        左边距是 20px
    
    margin:10px 5px 15px;
        上边距是 10px
        右边距和左边距是 5px
        下边距是 15px
    
    margin:10px 5px;
        上边距和下边距是 10px
        右边距和左边距是 5px
    
    margin:10px;
        所有四个边距都是 10px
    
    展开全文
  • DIV CSS 盒子模型PPT演讲! HTML中 常见技术 盒子模式,网页设计基础同学可以用心,收获学习。
  • HTML之盒子模型内外边距

    千次阅读 2020-08-16 10:14:26
    /* 插入图片更改位置 可以用margin 或padding 盒模型 */ margin-left: 50px; /* 插入当图片也是一个盒子 */ } aside { width: 400px; height: 400px; border: 1px solid purple; background: #fff url(images/sun....
  • 我们可以为内容的每个边界单独设置内边距,或者使用 padding 简写属性在一条声明中设置所有的值。 如果使用百分数值指定内边距,百分数总是根包含块的宽度相关,高度不考虑在内。下面代码展示了如何为元素应用内...
  • HTML的两种盒子模型

    万次阅读 2018-06-10 19:10:25
    一、引入 ...只有理解了盒子模型才能更好的排版,更好的编写网站界面 二、盒子的布局 把HTML中的元素看做是一个矩形的盒子(盛装内容的的容器),每个容器都是由元素内容、内边距(paddin...
  • HTML中盒子模型用法

    千次阅读 2019-03-25 20:05:46
    盒子模型 在网页中一切的物体都可以以盒子相称网页就是由多个盒子组成 ##盒子 CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里,那么对网页的布局就相当于摆放盒子,只需要摆放好盒子就可以完成网页的...
  • HTML - 盒子模型的基本属性

    千次阅读 2020-07-29 12:03:59
    HTML - 盒子模型 边框样式(border-style) 属性值: none:没有边框 solid:边框为单实线 dashed:边框为虚线 dotted:边框为点线 double:边框为双实线 综合属性: 上右下左 顺时针方向 border-style:solid ; /...
  • HTML DIV+CSS两种盒模型的区别_附实验源代码.zip 标准的W3C盒模型与IE盒模型区别挺大的
  • html 弹性盒模型

    千次阅读 2017-01-05 14:11:41
    父元素:(display: flex,flex-...要使用弹性盒模型需要设置display: flex; 设置了flex-direction的一个方向为主轴则另一个方向就为侧轴,这个需要分清 1、flex-direction (1)flex-direction: row;默认从左到右
  • HTML中盒子模型六大属性

    千次阅读 2020-02-23 19:17:29
      一个网站就是靠盒子一个一个堆起来,HTML中所有的盒子都是矩形 (一)盒子组成结构简单了解 一个盒子是由如下几个区域组成: 1)盒子的内容区域:可以通过width和height来设置内容区域的宽高 2)盒子的内填充...
  • HTML 盒子模型

    2020-04-17 16:29:34
    一个独立的盒子模型由content(内容)、border(边框)、padding(内边距)和margin(外边距)组成。 content:对应内内容 border:对应包装的纸壳,有厚度 padding:位于边框内部,是内容与边框的距离,对应包装壳的...
  • html盒模型及其样式

    2020-05-24 16:03:44
    盒模型-边框: 记住盒子的大小是由三部分决定的 要设置边框,必须这三个同时设置,缺一不可 譬如:border-width: 10px 0;表示的是将上下边框宽度设置为10px 左右设置为0 border-width: 10px 20px 0; 表示的是将上...
  • 今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 ( 摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助 ) 1....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 82,294
精华内容 32,917
关键字:

关于html的盒模型