当前位置：网站首页>盒子模型、文档流、定位、布局和响应式设计

盒子模型、文档流、定位、布局和响应式设计

2022-07-16 04:22:00 【猿婴】

title: “盒子模型、文档流、定位、布局和响应式设计”

盒子模型

当我们设置盒子的宽度与高度的时候，设置的是 content 的高度与宽度，padding 和 border 没有被计算进去。可通过 box-sizing 设置盒子模型的大小，默认情况下是值 content-box，即计算内容区计算盒子大小。实际项目中，会按照 border-box 计算盒子大小，会将盒子外边框(margin)设置为 0。

文档流

盒子在文档中如何排列，即行内块元素和块元素。

定位

坐标定位

static：位置不会发生变化。
relative：指元素相对其所在文档流的位置坐标，元素在文档流中的原始位置被保留，不会影响其它元素的位置。
absolute：脱离文档流，并且会查找第一个非 static 的父元素作为其相对坐标参照物。
fixed：脱离文档流，针对窗口进行定位。

浮动定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WXnnDd5B-1657132434434)(https://raw.githubusercontent.com/Coder-itCheng/blog-images/master/blog/image-20220707021103428-16571310651877-165713109780611.png "浮动前")]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IMZx1ljc-1657132434436)(https://raw.githubusercontent.com/Coder-itCheng/blog-images/master/blog/image-20220707021124229-16571310962799.png "浮动后")]

页面布局

Flex 布局

Flex 容器

排列方向(flex-direction)

注意：反转的时候开始和结束位置页反转了

溢出处理（flex-wrap）：no-wrap、wrap、wrap-reverse
对齐方式（align-items(纵向) 和 justify-content（横向））：flex-start、center、space-between、space-around、flex-end

注意：反转之后，纵向变横向，横向变纵向。

Flex元素

flex-grow、flex-shrink、flex-basis

Grid 布局

在这里插入图片描述

命名区域

浮动区域

响应式 web 设计

视窗响应：在不同视窗中保证网页按原始大小占据屏幕，不会发生像素缩放。
在这里插入图片描述
样式响应

像素响应

图片响应

版权声明
本文为[猿婴]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_45775746/article/details/125650961

边栏推荐

猜你喜欢

随机推荐