CSS的盒模型
每一个HTML就相当于一个矩形的"盒子".
这个盒子由以下几个部分组成
- 边框 border
- 内容 content(下图中间蓝色部分)
- 内边距 padding
- 外边距 margin
边框
边框的基础属性:
粗细: border-width
样式: border-style
颜色:border-color
<style>
div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
/* solid为实线边框,dashed为虚线边框,dotted为点线边框 */
border-color: blue;
}
</style>
<div>
边框
</div>
接下来我们设计一个500x250的盒子
<style>
div {
height: 250px;
width: 500px;
background-color: green;
}
</style>
<div >盒子</div>
我们为其设置一个边框
border-width: 10px;
border-style: solid;
border-color: red;
我们会发现盒子变大了,得出边框会撑大盒子的结论.那么怎么样才能使盒不会被边框撑大呢
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子
* {
box-sizing: border-box;
}
内边距
设置内容和边框之间的距离
- padding-top
- padding-bottom
- padding-left
- padding-right
<style>
div {
background-color: red;
width: 400px;
height: 200px;
padding-top: 50px;
padding-left: 100px;
}
</style>
<div>盒子</div>
可以看到内边距也会撑大盒子的,当然也可以使用box-sizing 属性进行修改.
外边距
控制盒子和盒子之间的距离
- margin-top
- margin-bottom
- margin-left
- margin-right
使用方法跟内边距相差无几,所以这里就不子演示了
块级元素水平居中
三种写法:
<style>
div {
width: 500px;
height: 200px;
margin-left: auto;
margin-right: auto;
/* 第二种:
margin: auto;
第三种:
margin: 0 auto; */
background-color: green;
}
</style>
<div>盒子</div>
有一个前提是必须为块元素指定宽度,不然就会跟父元素一致.
有一点需要注意的是
text-align: center 是让行内元素或者行内块元素居中的.
margin: auto 是给块级元素用得.
弹性布局
弹性布局需要了解一些概念
flex 是 flexible box 的缩写. 意思为 “弹性盒子”.
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.
- 被设置为 display:flex 属性的元素, 称为 flex container
- 它的所有子元素立刻称为了该容器的成员, 称为 flex item
- flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
这些概念看完不懂没关系,继续看下面的属性及案例演示.
常用的一些属性
justify-content
设置主轴上的子元素排列方式
<style>
div {
height: 150px;
width: 100%;
background-color: red;
display: flex;
}
div span {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
div {
height: 150px;
width: 100%;
background-color: red;
display: flex;
justify-content: center;
}
加上 justify-content: center后样式就发生了变化
justify-content的常用取值有:
center -位于容器中央
flex-start -位于容器结尾
flex-end -位于容器开头
space-between -在行与行之间留有空间
space-around -在行前行后行之间都留有空间
align-items
设置侧轴上的元素排列方式
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: space-around;
}
div span {
width: 150px;
background-color: red;
}
</style>
使用 align-items 实现容器的结尾对行打包文章来源:https://www.toymoban.com/news/detail-465932.html
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: space-around;
align-items: flex-end;
}
div span {
width: 150px;
background-color: red;
}
</style>
align-items的常用取值:
center -容器的中央对行打包
flex-start -容器开头对行打包
flex-end -容器结尾对行打包
space-between -行均匀分布在容器中
space-around -行均匀分布在容器中,两端各占一半文章来源地址https://www.toymoban.com/news/detail-465932.html
到了这里,关于JavaWeb-CSS的盒模型与弹性布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!