精华内容
下载资源
问答
  • 盒子模型 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): Margin...

    盒子模型

    CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    下面的图片说明了盒子模型(Box Model):
    在这里插入图片描述
    Margin(外边距) - 清除边框外的区域,外边距是透明的。
    Border(边框) - 围绕在内边距和内容外的边框。
    Padding(内边距) - 清除内容周围的区域,内边距是透明的。
    Content(内容) - 盒子的内容,显示文本和图像。

    关于border(边框):
    border-style:solid (边框样式:实线)dashed:虚线边框 dotted:点线边框
    border-color: violet(边框颜色)
    边框简写:
    border:1px solid red;(没有顺序)
    边框分开写法:
    border-top: 1px solid #000;//只设定上边框
    border-collapse: collapse;//把相邻的边框合在一起

    表格边框样式实例:

    table,
        td,
        th {
          border: 10px solid, violet;
          border-collapse: collapse;
          font-size: 14px;
          text-align: center;
        }
    

    边框宽度会影响盒子大小

    关于padding(内边距):
    有padding-top,padding-bottom,padding-left,padding-right,分别定义上下左右四个内边距

    关于简写:

    padding:0px,0px,0px,0px;

    • 指定一个值时 该值指定四个边的内边距
    • 指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距
    • 指定三个值时第一个指定上边的内边距.第二个指定左右两边 第三个指定下边
    • 指定四个值时分别为上 右 下 左(顺时针顺序)

    内边距也会影响盒子的实际大小
    若盒子本身已经有宽度和高度,使用内边距会撑大盒子
    若盒子本身没有指定width/height属性,padding不会撑开盒子大小

    关于margin(外边距):
    主要用于控制盒子与盒子之间的距离
    也分上下左右(与padding类似)
    外边距的应用:实现盒子水平居中
    两个条件:
    1.盒子必须指明宽度
    2.盒子左右外边距都设为auto

    margin : o auto;//上下外边框为0,左右是auto
    行内元素或者行内块元素水平居中只需给其父元素添加: text-align: center;

    嵌套块元素垂直外边距的塌陷:
    对于两个嵌套关系的块元素,父元素有上边距同时子元素也有上边距,此时父元素会塌陷较大的外边距值
    解决方案:
    1.可为父元素定义上边框
    2.可为父元素定义上内边距
    3.可为父元素添加overflow:hidden

    清除内外边距
    网页元素很多带有默认的内外边距,而且不同浏览器默认的也不一致,因此在布局前,首先要清除下网页元素的内外边距

    *{
         padding:0px;
         margin :0px;
    }
    

    行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级和行内元素就可以了

    tips:
    去除li前面的项目符号(小圆点):
    list-style: none;

    圆角有关

    圆角边框:border-radious:length(数值);
    圆形边框做法:把length值设为正方形边框宽度的一半(也可设为50%)
    圆角边框:把length值设为边框高度或宽度的一半(也可设为50%)

    //该属性是一个简写属性,其实是四个取值(依旧是顺时针)

    盒子阴影

    box-shadow:
    在这里插入图片描述
    例如:
    box-shadow: 10px 10px 10px -4px rgb(129, 95, 95);
    阴影不占空间,不影响其他盒子的排列

    文字阴影

    text-shadow:
    例如:
    text-shadow: 5px 5px 6px rgb(173, 157, 157);

    展开全文
  • css 盒子模型布局案例

    2019-10-22 12:48:17
    <... <head>...css 盒子模型</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> div{ width:300px; ...
    <html>
    	<head>
    		<title>css 盒子模型</title>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    		<style type="text/css">
    			div{
    				width:300px;
    				height:300px;
    				
    			}
    			#h1{
    				width:650px;
    			}
    			#h2{
    				width:650px;
    			}
    			#d1{
    				border:solid 1px red;
    				float:left;
    				margin-right: 10px;
    				
    			}
    			#d2{
    				border:solid 1px yellowgreen;
    				float:left;
    			}
    			#d3{
    				border:solid 1px orange;
    				float:left;
    				margin-right:10px;
    			}
    			#d4{
    				border:solid 1px magenta;
    				float:left;
    			}
    			#h1,#h2{
    				width:650px;
    				margin-top:20px;
    				margin:auto;
    				
    			}
    							
    		</style>
    	</head>
    	<body>
    		<h3 align="center">css 盒子</h3>
    		<hr size="30" color="aquamarine"/>
    		<div id="h1">
    			<div id="d1">
    			  1
    			</div >
    			<div id="d2">
    				2
    			</div>
    		</div>
    		<div id="h2">
    			<div id="d3">
    				3
    			</div>
    			<div id="d4">
    				4
    			</div>
    		</div>
    	</body>
    
    </html>
    
    展开全文
  • 本次分享CSS盒子模型的相关知识点和在web页面中的应用

    本次分享CSS盒子模型中浮动和定位的相关知识点和在web页面中的应用

    一、css盒子模型的知识点归纳如下图所示

    二、使用盒子模型设计一个简单的自适应网页

            该例子我们一共使用三个div盒子进行设计,首先定义一个大盒子,然后在大盒子中嵌套三个小盒子,再在<style>标签中编写css样式,html源代码如下所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自适应布局</title>
        <style>
            .box{
               width: 100%;
               height: 100%;
               display: flex;
            }
            .box1{
                background-color: rgb(182,162,220);
                height: 100px;
                flex: 1;
            }
            .box2{
                background-color: rgb(158,226,172);
                height: 100px;
                flex: 1;
            }
            .box3{
                background-color: rgb(246,150,84);
                height: 100px;
                flex: 1;            
            }
        </style>
    </head> 
    <body>
        <div class="box">
            <div class="box1">第1个元素中的内容</div>
            <div class="box2">第2个元素中的内容</div>
            <div class="box3">第3个元素中的内容</div>
        </div>
    </body>
    </html>

    通过浏览器打开文件查看结果如下图所示,页面的布局是可以自适应浏览器页面的缩放的

     

     

    展开全文
  • css盒子模型布局详解

    千次阅读 2017-01-18 22:06:31
    盒子模型css里的一个重点内容,一般来讲主要是W3C的盒子模型,不过IE也有自己的盒子模型,虽然说现在IE已经基本被微软放弃,不过目前在中国还有大部分的用户,所以还是有了解的需要。 一:标准W3C盒子模型 ...

    盒子模型是css里的一个重点内容,一般来讲主要是W3C的盒子模型,不过IE原先也有自己的盒子模型,但是随着发展IE也调整了盒子模型同步W3C,因此这里就不讲IE盒子模型了。


    标准W3C盒子模型


    以下用一个div的盒子模型作为范例进行解读:


    可以看出这个div里面只有范例的文字,而它的盒模型分为四部分:content部分(这部分就是div里的内容部分),padding部分(这个是内边距),border部分(边框),margin部分(外边距)。而该div的width和height在没有其他因素的影响下是content的宽和高。


    padding和border以及margin都有top、bottom、left、right四个属性,代表各自四个方向的部分,下面进行了文字标注。



    这就是标准的W3C盒子模型,另外有;两个属性对于盒子模型也非常重要,一个是box-sizing,一个是background-clip,这两个属性经常会和盒子模型一起使用,这里也一起说一下。


    box-sizing属性具有三个值,且该属性无法继承,该属性用来改变盒子模型的content内容部分宽高的计算方式,默认的宽高计算方式是只计算content部分为宽高,在这里选用不同的值可以改变这种计算方式,这三个值分别是:

    border-box:将border部分和padding部分都算入width和height里

    padding-box:将padding部分计算入width和height里

    content-box:默认content内容部分计算为width和height里


    这里举个例子更好理解:

    <div style="width:100px;padding:10px;border:10px solid black;">内容</div>


    这里默认情况下div内的content部分的宽度为100px,因为没有使用box-sizing,因此默认content-box模式,width就是指的content部分,因此content部分为100px。

    如果这里使用了box-sizing:padding-box的css,那么width就是包含了padding部分了,我们知道padding的上下左右都为10px,因此content=width-padding(左右部分),因此是100-20等于80,content部分为80px。

    如果这里使用的是box-sizing:border-box的css,那么width就是包含了border和padding部分,padding的上下左右都为10px,border的上下左右夜斗为10px,因此content=width - padding(左右)- border(左右),这样的话就是100-20-20=60,content部分为60px。


    blackground-clip属性同样具有三个值,该属性的值用来选择渲染的内容部分,默认情况下blackground-clip的默认值是content-box,也就是默认content部分进行background渲染,该属性没有继承性。

    content-box:background的渲染部分是content部分。

    padding-box:background的渲染部分是content部分加上padding部分。

    border-box:background的渲染部分是content部分加上padding部分以及border部分。


    举个例子:

    <div>内容</div>
    
    //以下是css
    div{
       width:100px;
       padding:5px;
       border:5px solid black;
       background:red;
    }

    如果在上面的css中加入blackground-clip:content-box,那么还是默认的,红色部分width将为100px,如果是padding-box,红色部分width为110px,如果是border-box将是120px,因为背景颜色的渲染部分随着background-clip的值变化了。





    展开全文
  • CSS盒子模型布局

    千次阅读 2018-10-19 21:45:47
    CSS盒子模型 网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模式都具备这些属性。 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫...
  • CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在)一个盒子的构成:盒子中的内容:content盒子的边框:border盒子边框与内容之间的距离:...
  • CSS 盒子模型

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

    千次阅读 2019-03-04 20:06:44
    盒子模型简单布局&lt;/title&gt; &lt;meta charset="UTF-8"/&gt; &lt;/head&gt; &lt;style type="text/css"&gt; div{ width: 300px; height:
  • 练习 | CSS盒子模型

    千次阅读 2020-01-31 17:33:49
    请用盒子模型的边框实现下面版面(如何不让外边距合并) 解 这里采用的是 padding 和 margin 一起使用的方法 找到了一篇写了很多解法的文章 (码) index.html <!DOCTYPE html> <html lang...
  • margin-top塌陷 1.设置边框 2.overflow:hidden; 3.使用伪元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...style type="text/css"&g...
  • CSS —— 盒子模型(Flexbox 布局方式)

    万次阅读 多人点赞 2018-05-11 15:19:19
    传统盒模型 Flexbox 布局方式 Flexbox 核心概念 Flex 容器属性 flex-direction :项目元素排列的方向 flex-wrap :项目元素排列方式 justify-content : 项目在主轴上的对齐方式 align-items :...
  • 1、组成: content -> padding -> border -> margin content:内容区域,由width和height组成 ...2、width,height不设置的话,对盒子模型的影响:自适应父容器,会自动计算容器大小,节省代码。
  • HTML盒子模型话不多说,直接上一段代码(参考来自这里):div { width: 400px;height: 100px;border: 6px solid #949599;margin: 20px;padding: 20px;}效果(图片来自这里):这里非常有趣,实际所...
  • 2,css样式作用3,css布局3.1 盒子模型(五大模块)3.1.1盒子模型值内容区域3.1.5盒子模型之背景 background3.2 块级元素并排显示3.2.1关于浮动的相关知识:4,元素之间存在的重叠问题4.1 兄弟元素之间的重叠问题:...
  • CSS知识介绍(盒子模型和DIV + CSS布局) 目录 一、音视频标签 二、CSS介绍 三、盒子模型 四、版心和布局流程 一、音视频标签 1、音频控件 2、视频标签: 二、CSS介绍 1、CSS介绍:HTML搭建骨架...
  • 博学谷——让IT教学更简单,让IT学习更有效PAGE 12PAGE 1《HTML+CSS+JavaScript网页制作案例教程》... 某某老师201 年 月 日课题名称第4章 CSS盒子模型计划课时8课时内容分析盒子模型是CSS网页布局的基础,只有掌握...
  • 第十三章 盒子模型盒子模型盒子模型就是一个有高度和宽度的矩形区域所有html标签都是盒子模型div标签自定义盒子模型所有的标签都是盒子模型class和id的主要差别是:class用于元素组(类似的元素,或者可以理解为某...
  • css 盒子模型理解

    千次阅读 2021-01-17 14:56:36
    盒子模型是html+css中最...一、css盒子模型概念CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:图中最内部的框是元素的实际内...
  • CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距margin,边框border,填充padding,和...
  • 最近在学习中遇到了盒子模型的两个坑,所以在这里做个总结 第一个: 上下两个盒子的间隙问题: .box1{ height: 200px; width: 200px; background-color: #51b7ec; margin-bottom: 30px; } .box2{ ...
  • CSS盒子模型总结

    万次阅读 多人点赞 2018-09-27 20:34:58
    在使用CSS进行网页布局时,我们一定离不开的一个东西————盒子模型盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。或者说,每一个可见的 HTML 元素都是一个盒子,下面所说的盒子都...
  • 1.页面布局概述 布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种: 1、table布局:通过table元素将页面空间划分成若干个...2、HTML+CSS布局(DIV+CSS):主要...
  • 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置? CSS的定位机制有3种:普通流(标准流)、浮动和定位。 html语言当中另外一个相当重要的概念----------标准流!或者普通流。...
  • 一、盒子模型一个盒子模型包含外边距margin,边框border,内边距padding,内容content。上面这个盒子模型的设计代码是:#box { width: 70px; margin: 10px; padding: 5px;}1.内边距padding的属性值属性描述...
  • CSS盒子模型理解以及使用

    千次阅读 2019-10-17 21:56:50
    盒子模型对于css的作用可以用下面两个图来比喻 二、理解以及使用 盒子模型的类型分为两类①:W3C标准的盒子模型(标准盒子模型),表示方法box-sizing:content-box,②另一种是IE盒子模型(怪异盒子模型),...
  • CSS盒子模型;10.1 盒子BOX的基本概念;CSS盒子模型;在HTML文档中每个元素都有盒子模型所以说在Web世界里特别是页面布局盒子模型无处不在这个盒子就是一个矩形的块可以对其进行幅面边框和边距的设置;10.1.1 盒子的基本...
  • 目录1 盒子模型1.1 看透网页布局的本质1.2 盒子模型组成1.3 边框(border)1.4 表格的细线边框1.5 边框会影响盒子实际大小1.6 内边距(padding)案例:新浪导航案例-padding影响盒子好处1.7 外边距1.8 外边距合并1.9 ...
  • CSS 理解盒子模型

    2020-09-25 13:11:27
    盒子模型,是XHTML+CSS布局页面中的核心!要想学会用CSS布局页面,就首先要理解盒子模型
  • CSS知识点——盒子布局及一些常用属性 - 盒子布局 先上一张图,方便理解后面的布局内容 盒子布局的主体通常为标记()

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,616
精华内容 13,046
关键字:

css盒子模型布局