前端遇到问题得进阶篇4---calc、CSS基础，布局

最新推荐文章于 2024-08-29 01:41:42 发布

by_side_with_sun

最新推荐文章于 2024-08-29 01:41:42 发布

阅读量264

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/by_side_with_sun/article/details/97012816

版权

前端专栏收录该内容

11 篇文章

订阅专栏

1.calc(40% - 431px) - 这个减号两边的空格是必须的、必须的、必须的。

2.js存在一个就近原则：具体是

var a = 1
function b() {
    a++;
    var a = 5;
    console.log(a);
}
b()
console.log(a)

// 5,1
// 这里就是a的就近原则的体现，a会先寻找当前作用域的申明。

3.position的问题：
子元素设置position：absolute时，父元素需要设置relative，否则会脱离。

4.前端常用布局

文档流：将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素

这里了解一下BFC(块级格式话上下文)

这里怎么理解BFC，当你写一个块级元素，却发现margin-bottom无用得时候，就是遇到了这个问题，当文档流遇到margin-top和margin-bottom时，会合并，取最大值的px表现，那么如何解决这个问题，就触发BFC就可以了

怎么触发BFC
浮动元素：float 除 none 以外的值。
绝对定位元素：position (absolute、fixed)。
display 为 inline-block、table-cells、flex。
overflow 除了 visible 以外的值 (hidden、auto、scroll)。

html
<div class="demo1"></div>
<div class="demo2"></div>
css
.demo1{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
.demo2{width: 200px;height: 200px;background-color: black;margin-top: 30px;}

外边距重叠（找的图，仅仅做纪录）

html
	<div class="demo1"></div>
    <div class="box">
    <div class="demo2"></div>
    </div>
css
.box{position :absolute;}
.demo1{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;}
.demo2{width: 200px;height: 200px;background-color: black;margin-top: 30px;}

第二个遇到的问题时高度塌陷：

html
<div class="box">
    <div class="demo"></div>
</div>
css
.box{width: 300px;height: 300px;background-color: black;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}

这个时候红色DIV左右外边距并没有重叠但是上外边距和父级重叠在了一起，这时候就要触发BFC来解决这个问题。

html
<div class="box">
    <div class="demo"></div>
</div>
css
.box{width: 300px;height: 300px;background-color: black;overflow: hidden;}
.demo{width: 100px;height: 100px;background-color: red;margin: 20px;}

通过触发BFC就可以处理高度塌陷的问题。

一般情况下如果没有 BFC的话，我们想要让普通元素与浮动元素产生左右边距，需要将 maring 设置为浮动元素的宽度加上你想要产生边距的宽度。

这里的浮动元素的宽度为 200px ，如果想和它产生 20px 的右边距，需要将非浮动元素的 margin-left 设置为 200px+20px 。

那么总结一下BFC：1.文档流top和bottom会合并，取最大值（是因为他们属于同一个BFC，让他们不属于通过一个就可以了）。2.内部元素高度塌陷。3.浮动元素计算间距大小之后的宽度。

2.浮动布局：float 让块级元素不脱离文档流，在父级内显示

2、文档流、完全脱离文档流、不完全脱离文档流

1、文档流：子标签在父级标签没有设置高度时，会自动撑开父级

2、完全脱离文档流：子标签不再为父级撑开高度，子标签高于文档流，不占用盒子模型的空间，有一个z-index

3、不完全脱离文档流：这是浮动后的结果，不清浮动,不会撑开父级高度,清浮动后,会重新撑开父级高度

清楚浮动：
clear：both； overflow:hidden;

使用了overflow:hidden的父元素要计算超出的部分然后进行隐藏，那么他就会撑开自身把所有的子元素包裹进来。写层的时候一般都用div，而div是块元素。

如果两个son层都用了float，那么father层就会失去宽度。紧接着father层的div就会受到浮动影响跟在sun层后面。要清除son的浮动影响。只要给father层添加ouverflow:hidden就可以。因为添加了之后father层就会在该行撑开包裹进他的子元素（son）。和clean:both不同的是前者用在浮动元素的父层，后者用在浮动元素本身。

好像是这样。也就是说只存在两种BFC的块级元素，一种是触发了BFC的，另一种是没有触发BFC的，两个不同的空间来理就好理解了，

3.流式布局：max-width / min-width 、%、vw、vh、em、rem、
4.定位布局：positon、left(top、bottom、right)这两个是搭配用的

relative:

未脱离文档流，相对布局方位只改变盒子显示区域，不改变盒子原有位置，

简单的说相当于灵魂出窍，在原有位置仍然占一块区域，margin-top改变会影响兄弟盒子

相对定位主要用于给父级定位，从而辅助子级的绝对定位

方位布局，方位改变上盒子不会影响下盒子（灵魂出窍），四个方位如果发生冲突，左右取左，上下取上

left:30px;
top:30px;

absolute:

完全脱离文档流，有一个z-index可以控制两个绝对定位的优先级，不在文档流中占位，也永远不会撑开父级高度，永远不会影响兄弟布局，显示层高于文档流层

margin依旧可以影响自身布局，但不会影响兄弟布局，margidinn改变兄弟标签布局不会改变

定位参考：sup(未定位) -> body(未定位) -> html(文档窗口）

fixed

完全脱离文档流，有一个z-index可以控制两个绝对定位的优先级，不在文档流中占位，也永远不会撑开父级高度，永远不会影响兄弟布局，显示层高于文档流层

margin依旧可以影响自身布局，但不会影响兄弟布局，margin改变兄弟标签布局不会改变

5.flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
水平为轴（main axis），主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
垂直为交叉轴（cross axis），交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

1.将父级display属性设置为flex,则父级成为container,子级成为item
2.container设置item的排列方向flex-direction
3.item对于container的空间占比flex-grow

6.响应式布局

@media