CSS(三)

目录

1.盒模型

1.1边框

1.2内边框

1.3外边框

1.4块级元素水平居中

2.弹性布局

2.1设为弹性布局

2.2水平方向

2.3竖直方向

---

1.盒模型

 

1.1边框

粗细: border-width

样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色: border-color

边框会撑大盒子

通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.会挤压内容,

* {

    box-sizing: border-box;

}

1.2内边框

默认内容是顶着边框来放置的. 用 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 (顺时针)

1.3外边框

控制盒子和盒子之间的距离.

可以给四个方向都加上边距

• margin-top
• margin-bottom
• margin-left
• margin-right

1.4块级元素水平居中

前提:

• 指定宽度(如果不指定宽度, 默认和父元素一致)
• 把水平 margin 设为 auto

margin-left: auto; margin-right: auto;

margin: auto;

margin: 0 auto;

2.弹性布局

2.1设为弹性布局

display: flex;

2.2水平方向

设置主轴上的子元素排列方式.

使用之前一定要确定好主轴是哪个方向

值	描述
flex-start	项目位于容器开头
flex-end	位于结尾
center	位于中间
space-between	行与行有空隙
space-around	行前,行间,行后有空隙

2.3竖直方向

设置侧轴上的元素排列方式

在上面的代码中, 我们是让元素按照主轴的方向排列, 同理我们也可以指定元素按照侧轴方向排列.

取值和 justify-content 差不多.

值	描述
streth	行拉伸占剩余空间
center	朝弹性容器中央对行打包
flex-start	朝弹性容器开头对行打包
flex-end	朝弹性容器结尾对行打包
space-between	行均匀分布
space-around	行均匀分布,两端各占一半