前端相关

yf_lin
181 阅读6分钟

flex布局：

www.ruanyifeng.com/blog/2015/0…
注意点：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。Webkit 内核的浏览器，必须加上-webkit前缀。

容器的属性(父元素)

  • flex-direction: 属性决定主轴的方向
    row：水平方向column：垂直方向
  • flex-wrap :换行
  • flex-flow:flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
  • justify-content:在主轴上的对齐方式
  • align-items:在交叉轴上如何对齐。
  • align-content

项目的属性（子元素）

  • order:属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
  • flex-grow:属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  • flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
  • align-self:align-self属性允许单个元素有与其他元素不一样的对齐方式，可覆盖align-items属性，用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
    align-self: auto | flex-start | flex-end | center | baseline | stretch。

关于子元素的flex

flex属性其实是一种简写，是flex-grow，flex-shrink和flex-basis的缩写形式。 默认值为0 1 auto。
flex-grow:默认为0，即使有剩余空间，也不放大。
flex-shrink:默认为1，空间不足，该项目将缩小。
flex-basis:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

20220228114417.jpg

flex:1 = flex: 1 1 0%;
flex:1在父元素尺寸不足的时候，会优先最小化内容尺寸。
使用场景: 等分布局 ,等比例列表 image.png

flex:auto = flex: 1 1 auto;
在充分分配容器尺寸的前提下，会优先扩展自己,填充父容器的尺寸
使用场景: 内容动态适配布局，自适应布局

20220228112318.jpg

flex:0 = flex: 0 1 0%;
lex:0 :通常表现为内容最小化宽度，不会充分的分配容器的尺寸
使用场景: 当希望元素item占用最小化的内容宽度的时候

20220228112456.jpg

flex:none = flex:0 0 auto;
元素的内容直接溢出容器，没有换行，表现为最大内容宽度
使用场景:元素的宽度就是内容的宽度，并且内容永远不会换行

20220228112739.jpg

面试题

水平居中

弹性盒：
    父元素： display: flex;
    子元素： margin: auto;
弹性盒2：
    父元素：display:flex;
    justify-content: center;
    align-item: center;
定位：
    父元素：position: relative;
    子元素：position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
定位加2d变形:
    父元素： position:relative;
    子元素：position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

骰子

两点
display: flex;
justify-content: space-between;
.item:nth-of-type(2) {
align-self: flex-end;
}
三点
/* 3点 */
.item3:nth-of-type(2){
align-self: center;
}
.item3:nth-of-type(3){
align-self: flex-end;
}

三角形

（块状元素）{
    width: 0; //通过把块元素的宽高设为0让他边框塌陷
    height: 0;
    border-top: 50px solid black;
    border-right: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid blue;
}
//这里如果只要一个三角形的话可以把不需要的边设为transparent

响应式布局

媒体查询
    使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。
百分比%
    比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。
vw/vh
    css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。
与百分比布局很相似，但更好用。
rem
    rem单位是相对于字体大小的html元素，也称为根元素。 默认情况下，html元素的font-size为16px。所以此时1rem = 16px。
利用UI框架实现响应式布局
    其实，现在的主流UI框架都会考虑到响应式布局这个问题，比如elementUI，iview等框架提供了栅格系统，<row>搭配<col>来实现响应式布局。 所以在工作中直接拿来使用就完事了

BFC

1.什么是BFC
    - BFC是一种独立的渲染区域
2.BFC的规则:
    - 上下排列
    - 从左开始
    - 上下margin会重叠
    - 族元素不会影响外部元素
    - BFC不与浮动发生重叠
    - 浮动参与高度计算
3.触发规则
    - float,属性不为none
    - overflow:hidden/auto/scroll
    - position:absolute/fixed
    - display:inline-block/flex/inline-cell

清除浮动的方式

父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

外边距margin值重叠

情况一：两个div垂直边界相邻，margin会等于二者中margin较大的值 
解决方案 1.position：absolute 2.float：left 
情况二：子元素在父元素内，子元素的margin-top会与父元素的margin-top重叠，值等于 
二者中较大的，如果只有子元素设置了margin-top，则显示为父元素的margin-top 
解决方案 :
1.给父元素设置border（给子元素设置边框没有用） 
2.给父元素设置padding值 
3.给父元素或子元素添加float：left 
4.给父元素或子元素添加position：absolute 
5.给父元素添加overflow：hidden 
6.给子元素添加display：inline-block 
情况三：一个空白元素自身的margin-top和margin-bottom会重叠，值为而这种较大的 
解决方案 1.设置透明border
上下margin值重叠
在重合元素的其中一个外包裹一层容器overflow:hidden，并触发该容器生成一个BFC。

display有哪些属性值

block: 块状元素
inline-block：行内块元素
inline：行内元素
none：隐藏元素
flex：弹性盒
inline-flex: 行内的弹性盒
avatar
文章
阅读
粉丝