新手小白学习，前端的Flex布局的第一天

LiujinleiAaa

于 2024-08-27 18:30:52 发布

阅读量701

点赞数 6

文章标签：笔记学习前端

本文链接：https://blog.csdn.net/LiujinleiAaa/article/details/138050158

版权

盒子的组成

属性的介绍

盒子的4个组成部分（内容（内容的宽和高），填充的区域，边框，外边距）

内容区域

内容里面可以包括，文本、图像或视频播放器。可以设置他的内容宽度和内容高度也可以设置背景颜色或背景图像。

就是content-box只是内容的大小，不包括填充和，边框

然而boder-box就是包括了内容大小，还有边框的大小还有边距

正式的语法

display属性的显示方式

1.显示块

所以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;

外面

block

该元素生成一个块框，当处于正常流动中时，该元素在元素之前和之后都会生成换行符。

inline

该元素生成一个或多个内联框，这些内联框不会在自身之前或之后生成换行符。在正常流动中，如果有空间，下一个元素将在同一条线上。

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;