第四章必备前端基础知识-第二节3:CSS盒模型和浮动

原标题:第四章必备前端基础知识-第二节3:CSS盒模型和浮动

文章目录

  • 一:盒模型
    • (1)border
    • (2)padding
    • (3)margin
  • 二:flex布局

一:盒模型

盒模型:在HTML中,每个标签(或元素)相当于是一个盒子,这个盒子由以下四个部分构成

  • 边框border
  • 内容content
  • 内边距padding
  • 外边距margin

在这里插入图片描述

(1)border

border:可以利用以下属性来设置border

  • border-width:边框粗细
  • border-style:边框样式
    • solid:实现
    • dashed:虚线
    • dotted:点线
  • border-color:边框颜色
div {  
    width: 200px;  
    height: 100px;  
    background-color: indianred;  
    border-width: 5px;  
    border-style: solid;  
    border-color:green;  
  
}

当然也可以简写为(没有顺序要求)

div {  
    width: 200px;  
    height: 100px;  
    background-color: indianred;  
    border:5px solid green;  
  
}

在这里插入图片描述

仔细观察上图,最终盒子大小并不是设定的200100,而是210110,这是因为边框会撑大盒子,这样的行为并不是我们所期望的,所以使用box-sizing: border-box禁止这种行为,转而让content缩水

在这里插入图片描述

另外可以也可以单独设定任意方向上的边框,使用border-lefwww.yii666.comt/right/bottom/top

div {  
    width: 200px;  
    height: 100px;  
    background-color: indianred;  
    border-top:5px solid green;  
    border-left:5px solid green;  
    box-sizing:border-box;  
    text-align: center;  
    line-height: 100px;  
  
}

在这里插入图片描述

(2)padding

padding:默认状态下内容会紧挨着边框,而padding则可以控制这个距离,和boarder一样,也可以分别在四个方向上设定或者统一设定

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
div {  
    width: 200px;  
    height: 100px;  
    background文章来源站点https://www.yii666.com/-color: indianred;  
    padding: 10px;  
  
    text-align: center;  
    line-height: 100px;  
  
}

在这里插入图片描述

可以看到,paddingborder一样,默认也会撑大盒子,所以这里也可以利用box-sizing:border-box

div {  
    width: 200px;  
    height: 100px;  
    background-color: indianred;  
    padding: 10px;  
    box-sizing: border-box;  
  
    text-align: center;  
    line-height: 80px;  
  
}

在这里插入图片描述

(3)margin

margin:用于控制和盒子与盒子之间的距离,写法和borderpadding类似

<div id="one">测试元素1</div>  
<div id="two">测试元素2</div>  
<div id="three">测试元素3</div>
div {  
    width: 200px;  
    height: 100px;  
  
    text-align: center;  
    line-height: 100px;  
}  
  
#one {  
    background-color: red;  
    margin-bottom: 50px;  
}  
  
#two {  
    background-color: blue;  
}  
  
#three {  
    margin-top: 100px;  
    background-color: green;  
}

在这里插入图片描述

二:flex布局

flex布局:又称为弹性布局,是W3C于2009年推出的一种布局方文章来源地址https://www.yii666.com/blog/63040.html式,可以简单、快速、响应式的实现各种布局页面,现在已经得到了所有主流浏览器的支持

如下,设置一个div,内部含有3个span

<div>  
    <span>1</span>  
    <span>2</span>  
    <span>3</span>  
</div>
div {  
    width: 100%;  
    height: 150px;  
    background-color: red;  
}  
  
span {  
    width: 100px;  
    background-color: green;  
}

效果如下,并不是我们预期的样子,这是因为对于行内标签,其宽度、高度、外边距都是不生效的

在这里插入图片描述

所以这里我们把span转换为块级标签

div {  
    width: 100%;  
    height: 150px;  
    background-color: red;  
}  
  
span {  
    width: 100px;  
    background-color: green;  
    display: block;  
}

效果如下,此时宽度生效,但三个标签独占一行

在这里插入图片描述

如果我们想要让这几个标签能够在水平方向上排列开就要使用到flex布局,注意在设定时要给父标签设定,并且它只会作用于子标签

div {  
    width: 100%;  
    height: 150px;  
    background-color: red;  
    display: flex;  
}  
  
span {  
    width: 100px;  
    background-color: green;  
    display: block;  
}

效果如下,可以发现此时这几个标签在水平方向上排列开来(水平方向上默认左对齐,高度和父标签一样(当然也可以指定具体大小)

在这里插入图片描述

所以flex布局其实解决了如何在一行里排列标签的问题。由于块级标签本身就是按照垂直方向排列,所以在实际网页布局的时候,就会按照一行一行的方式布局,然后在每一行里如果有多个标签并列则会使用flex规则进行布局

此时,我们便可以使用相关属性对这些标签在水平方向上随意布局,例如居中

div {  
    width: 100%;  
    height: 150px;  
    background-color: red;  
    display: flex;  
    justify-content: center;文章来源地址https://www.yii666.com/blog/63040.html  
}  
  
span {  
    width: 100px;  
    height: 50px;  
    background-color: green;  
    display: block;  
}

在这里插入图片描述

又或者以等间距排列

div {  
    width:www.yii666.com 100%;  
    height: 150px;  
    background-color: red;  
    display: flex;  
    justify-content: space-around;  
}  
  
span {  
    width: 100px;  
    height: 50px;  
    background-color: green;  
    display: block;  
}

在这里插入图片描述

来源于:第四章必备前端基础知识-第二节3:CSS盒模型和浮动

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

领支付宝红包赞助服务器费用

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png