目录
边框
内边距
基础写法
复合写法
外边距
基础写法
复合写法
块级元素的水平居中
弹性布局
设置行内元素的属性 ,span
每一个HTML元素就相当于是一个矩形的“盒子”
这个盒子由以下这几个部分构成:
1.边框 border
2.内容 content
3.内边距 padding
4.外边距 margin
边框
基础属性
粗细:border-width
样式:border-stytle 默认没边框, solid实线边框 dashed虚线边框 dotted点线边框
颜色:border-color
<style>
div{
width: 200px;
height: 100px;
//以下三行也可以写成 border:blue solid 10px; 这三个参数不区分先后顺序
border-color: blue;
border-style: solid;
border-width: 10px;
}
</style>
<div></div>
效果如下:
但是可以看出,我们的边框撑大了这个盒子,为了避免这种情况,我们使用
box-sizing:border-box
内边距
padding 设置内容和边框之间的距离。
基础写法
padding-top
padding-bottom
padding-left
padding-right
复合写法
padding:5px; //表示四个方向都是5px
padding:5px 10px ;//表示上下内边距5px 左右内边距10px
padding:5px 10px 20px;//表示上边距5px 左右内边距为10px 下内边距20px
padding:5px 10px 20px 30px;//表示 上5px 右10px 下20px 左30px (顺时针)
外边距
控制盒子和盒子之间的距离。
基础写法
margin-top
margin-bottom
margin-left
margin-right
复合写法
//规则同padding
margin:5px; //表示四个方向都是5px
margin:5px 10px ;//表示上下5px 左右10px
margin:5px 10px 20px;//表示上5px 左右10px 下20px
margin:5px 10px 20px 30px;//表示 上5px 右10px 下20px 左30px (顺时针)
块级元素的水平居中
//以下三种写法都可以
margin-left:auto; margin-right:auto;
margin:auto;
margin:0 auto;
弹性布局
设置行内元素的属性 ,span
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div{
width: 700px;
height: 700px;
background-color: blue;
}
div span{
height: 100px;
width: 100px;
background-color: yellow;
}
</style>
当我们设置span属性时,因为span是行内元素,所以对他的设置并没有生效如下图,我们需要在span的父级标签中也就是div设置display:flex; 使其进入弹性布局模式
//添加display:flex;
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div{
width: 700px;
height: 700px;
background-color: blue;
display: flex;
}
div span{
height: 100px;
width: 100px;
background-color: yellow;
}
</style>
常用属性
justify-content //设置主轴上的子元素排列方式 水平方向
默认是start
效果如下:
当值为center
取值为end
取值为space-between,意味着行方向上元素均匀布局
align-items //设置侧轴上的元素排列方式 垂直方向
取值与justify-content一致