盒子的组成
属性的介绍
盒子的4个组成部分(内容(内容的宽和高),填充的区域,边框,外边距)
- 内容区域
内容里面可以包括,文本、图像或视频播放器。可以设置他的内容宽度和内容高度也可以设置背景颜色或背景图像。
就是content-box只是内容的大小,不包括填充和,边框
然而boder-box就是包括了内容大小,还有边框的大小还有边距
正式的语法
display属性的显示方式
1.显示块
2.
4.
5.
所以display属性设置是将元素视为块框还是内联框
内联元素的显示就是书写模式就是从左到右的顺序,块元素就是一个接一个的显示,就是从上到下
关于display的属性
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* box generation */
display: none;
display: contents;
/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;
/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;
外面
该元素生成一个块框,当处于正常流动中时,该元素在元素之前和之后都会生成换行符。
该元素生成一个或多个内联框,这些内联框不会在自身之前或之后生成换行符。在正常流动中,如果有空间,下一个元素将在同一条线上。
position属性
position
CSS 属性设置元素在文档中的位置。top、right、bottom 和 left 属性确定定位元素的最终位置。
- 和4.是一样的
2.相对定位
3.绝对定位
position的属性值
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;
inline-block解释
float属性
flex属性
justify-content
x轴的对齐方式
y轴对齐的方式
多线轴的对齐方式
语法篇:
定义:Flex 是 Flexible Box 的缩写,意为"弹性布局"
注意事项: 注意,设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效
容器的属性
以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1.flex-direction就是决定x轴的方向的
2.flex-wrap项目换行
3.flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
4.justify-content
5.align-items
性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
6.order属性
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
常见的实例篇
flex-direction: column;
这个是垂直的方式
如果是以上的文章还是看不懂,这个就是强烈推荐的视频,任务六 网页布局 知识点2:清除盒子浮动_哔哩哔哩_bilibili,9分钟搞定布局的问题