CSS学习笔记--Div+Css布局(div+span以及盒模型)

Web前端 专栏收录该内容
15 篇文章 0 订阅

1.DIV与SPAN


1.1简介


1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式

2.DIV和span的区别在与,span是内联元素,div是块级元素

内联元素又名行内元素(inline element),和其对应的是块元素(block element),都是html规范中的概念。内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。

Block元素特点:
①总是在新行上开始;
②高度,行高以及外边距和内边距都可控制;
③宽度缺省是它的容器的100%,除非设定一个宽度。
④它可以容纳内联元素和其他块元素
Inline元素特点:
①和其他元素都在一行上;
②高,行高及外 边距和内边距不可改变;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素
常见块元素(block element)
◎ address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器,也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu -  菜单列表
◎ noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容)
◎ noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表(无序列表)
常见内联元素(inline element)
◎ a - 锚点
◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code -  计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器,定义文本内区块
◎strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义 变量
可变元素
◎applet - java applet
◎button - 按钮
◎del - 删除文本
◎iframe - inline frame
◎ins - 插入的文本
◎map - 图片区块(map)
◎object - object对象
◎script - 客户端脚本


1.2实战


<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css" >
    .div1 {
        background-color: green;
    }

    .div2 {
        background-color: gold;
    }
        .span1{
            background-color: red;
        }

    .span2{
        background-color: pink;
    }
    </style>
    <title></title>
</head>
<body>
<div class="div1">我是DIV1</div>
<div class="div2">我是DIV2</div>
<span class="span1">我是SPAN1</span>
<span class="span2">我是SPAN2</span>
</body>
</html></span></span>

如下图可以看到,DIV默认会占据了整一行,而span只是占据了文字内容部分

2.盒子模型


2.1简介


1.margin-盒子外边距(标签元素与其他元素之间的边距
2.padding-盒子内边距(标签元素与标签内的元素之间的边距
3.border-盒子边框宽度(标签元素边框的宽度)
4.width-盒子宽度
5.height-盒子高度



2.2实战



我们利用盒子模型来完成一个简单的布局,最终效果如下:


1.首先我们创建3个DIV元素,填充背景颜色以便于区分,并在外面的大DIV设置固定高端和宽度分别为600px,小div高度和宽度分别为:300px
<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css" >

       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 300px;
          height:300px;
      }
       .div .div2{
           background-color:blue;
           width: 300px;
           height:300px;
       }
    </style>
    <title></title>
</head>
<body>
<div class="div">
  <div class="div1">
 </div>

    <div class="div2"></div>
 </div>
</body>
</html></span></span>
两个DIV高度刚好等于最外层DIV的高度



2.从上图我们可以看到,最外层DIV与浏览器边界有间隙,如下:


我们对body的margin属性做调整,把它设置为0,把DIV与浏览器边缘的间隙去掉

<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;">body{
          margin: 0;
      }
       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 300px;
          height:300px;
      }
       .div .div2{
           background-color:blue;
           width: 300px;
           height:300px;
       }</span></span>


3.把div1和div2并排在同一行,需要加入float属性,设置为float:left
<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><span style="font-size:10px;">  body{
          margin: 0;
      }
       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 300px;
          height:300px;
          float:left;
      }
       .div .div2{
           background-color:blue;
           width: 300px;
           height:300px;
           float:left;
       }</span></span></span>
两个小div已经并排在同一行


4.我们对DIV1和DIV2分别对margin属性设置10px
<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><span style="font-size:18px;">    </span><span style="font-size:10px;">  body{
          margin: 0;
      }
       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 300px;
          height:300px;
          float:left;
          margin: 10px;
      }
       .div .div2{
           background-color:blue;
           width: 300px;
           height:300px;
           float:left;
           margin:10px
       }</span></span></span>
从下图可以看到,加入margin:10px后,两个div排版已经错位,原因是加入magin属性,总高度和宽度已经发生了变化,超出了最外层DIV的高度与宽度(600px),实际上两个div加上margin属性的像素,总宽度和高度应该是:div1(300px+20px)+div2(300px+20px)=640px

5.因为最外层DIV总高度和宽度只是600px,而我们加入了margin:10px,实际上两个DIV相当于在高度和宽度分别新增了20px,如果希望两个DIV元素能并排,需要对DIV的宽度和高度减去margin新增的部分,使总和等于600px,对div1和div2的高度与宽度分别减去20px
<span style="font-family:Times New Roman;"><span style="font-family:Microsoft YaHei;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css" >
      body{
          margin: 0;
      }
       .div {
           background-color:red;
           width: 600px;
           height:600px;
       }
      .div .div1{
          background-color:green;
          width: 280px;
          height:280px;
          float:left;
          margin: 10px;
      }
       .div .div2{
           background-color:blue;
           width: 280px;
           height:280px;
           float:left;
           margin:10px
       }
    </style>
    <title></title>
</head>
<body>
<div class="div">
  <div class="div1">
 </div>

    <div class="div2"></div>
 </div>
</body>
</html></span></span>
这样就完成了我们想要的效果了


5.最后我们对比下在最外层DIV加入padding元素前后会有什么效果

加入padding之前:


加入padding元素后,我们可以发现最外层DIV高度与宽度发生变化了,分别变为了620px


3.总结


对于margin属性,它不会改变标签元素的宽度与高度,只会影响元素与元素之间的边距;对于border与padding属性,如果增加了border或padding的大小,那么元素的高度与宽度也会相应增加,也就是border与padding属性会影响标签元素的实际高度与宽度

  • 3
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值