面试--css面试

sPeng 发布于2019-08-30 15:53 / 1957人阅读

摘要：怪异的盒模型和标准浏览器的盒模型，可以通过属性控制两种盒模型的变化属性值这个属性值和是的盒模型是有关系的。简便完整响应式地实现各种页面布局提出了布局。交叉轴的起点对齐。

1、css盒模型

css的盒模型包括：content+padding+border+margin
同时值得注意的是：css 的外边距会在垂直方向合并。两个上下方向相邻的块元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

IE怪异的盒模型和标准浏览器的盒模型，可以通过box-sizing属性控制两种盒模型的变化

2、box-sizing属性值

这个属性值和是css的盒模型是有关系的。
box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。在写css 代码的时候最好先css reset以下。
这个属性有以下3个值：
1、content-box ：可以使设置的宽度和高度值应用到元素的内容框，，盒子的width只包含内容。
即总宽度=margin+border+padding+width
2、border-box:设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
3、inherit , 规定应从父元素继承 box-sizing 属性的值
画一个三角形出来

3、box-sizing属性的应用场景

IE8及以上版本支持该属性
（1）在css reset的过程中使用 box-sizing:border-box 让代码更符合ui设计者和前端设计者的逻辑
使用方法如下：

*, *:before, *:after {
　　-moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;
　　}

（2）使用box-sizing：border-box实现布局三栏目案例

如果要是没有在div上使用 box-sizing:border-box;这个值的时候最后一个div会被挤下来。。

4、flex布局弹性布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。
简便、完整、响应式地实现各种页面布局提出了flex布局。IE10以上支持这个属性。
flex容器的属性
flex容器中有：水平轴垂直轴
使用方法，为父元素设置display属性值

.box{
  display: flex;  或者是  inline-flex
}

Webkit 内核的浏览器，必须加上-webkit前缀。
设为 Flex 布局以后，flex容器中子元素的float、clear和vertical-align属性将失效。
flex-direction 规定子项目在主轴方向上的排列方式 row row-reverse column column-reverse
flex-wrap 如果项目在一条轴线上排不下如何换行 no-wrap wrap wrap-reverse换行第一行在下方
flex-flow 是以上两个属性的简写
justify-content 属性定义了项目在主轴上的对齐方式。
flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中  实现了水平居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items 属性定义了项目在垂直轴上的对齐方式。
flex-start | flex-end | center | baseline | stretch;

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。   实现了垂直居中
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex项目的属性
order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 定义为1 的时候如果有剩余空间就会放大这个div
属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex 以上两个属性的简写
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式

5、Gird布局

flex布局是较好的一维布局方式 gird是二维布局方式
ie10+以上支持手机都不支持
容器需要设置：
display:grid，
grid-template-columns：第1列的大小第2列的大小第3列的大小第4列的大小..
grid-template-rows：第1行的大小第2行的大小第3行的大小第4行的大小
gird-column-gap:定义列之间的距离
gird-row-gap:定义行之间的距离
justify-items: start | end | center | stretch（默认）定义项目在水平方向的排列位置
align-items: start | end | center | stretch ; 定义项目在垂直方向的排列位置
项目需要设置：
grid-column：子元素的位置
grid-row：子元素的位置
要实现gird布局里边的子项的数目必须是足够的
使用gird布局

 .container{
        display:grid;height: 400px;
        grid-template-columns: 40px  50px  auto 50px 40px ;
        grid-template-rows: 1fr 1fr 1fr;   //将continer纵向分成3等分
          grid-column-gap: 10px;   //定义每一列之间的空隙的宽度
        grid-row-gap: 10px;     //定义每一行之间的空隙的宽度

    }
    .item{
        border: 1px solid red;
    }

html


    
    
    里边有9个

未完见http://www.jianshu.com/p/d183...

GPU云服务器云服务器女生面试技术面试小米面试面试心得

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116628.html

7 个开放式的 CSS 面试题及回答策略

摘要：通过面试者的答案可以得知他都知道哪些开发语言。这个问题的答案能够知道求职者有没有可靠的资源，这些资源在未来开展项目时可能会派上用场。对这个问题的诚实回答可以帮助面试官为求职者提供合适的团队。翻译：疯狂的技术宅原文：https://www.indeed.com/hire/i... 不管你是面试官还是求职者，里面的思路都能让你获益匪浅。你用 CSS 多久了？解析：这个问题可以让面...

AJie 2019-08-30 15:56 评论0 收藏0
前端 CSS 面试大纲

摘要：比如说预处理器，组件化，工程化，兼容性处理等方面，这些主要是基于自己的开发经验业界流行技术方案进行准备。但是在开始谈面试前我想先提出一个概念学霸面试模型学校的学习和公司的工作有很多相似的地方。所以对于面试，请参考上学那会儿你们班学霸的姿势。背景参加完厦门第四届CSS Conf 后，让我对 CSS 产生了新的思考。CSS 是前端必须熟练掌握并保持持续关注的技术，但是我又不想在 CS...

mating 2019-08-30 14:19 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
转眼人到中年：前端老程序员无法忘怀的一次百度电话面试（二）

摘要：节后，收到了来自百度的电话，简单明了，商定了电话面试的时间。转眼间，约定之日到来。后记当天就收到了上海百度的邮件，确认了三面的的时间，还有差旅报销注意事项。想到要只身一人去到人生地不熟的上海面试，内心有些期待，又有些忐忑。一切都不那么真实当一面结束时，一切都显得不那么真实。几分钟前还在着急忙慌地接招，随着电话的挂断，周遭又安静了下来，安静到感觉连脑袋都变得有些迟钝。这种感觉很熟悉...

LiuRhoRamen 2019-08-30 13:52 评论0 收藏0
掌握面试——弹出框的实现（一道题中包含布局/js设计模式）

摘要：面试会进入下一个环节。如果在页面中有多个按钮，那么这个弹出窗要如何实现同上，根据之前的建议在回答问题之前要问清楚问题中模棱两可的地方。是否触发不同按钮弹出的窗口现实的内容不同。这道面试题，当初我面试的时候被问过两次，因此比较深，此外，我记得还有设计模式的考察，所以，有深刻的体会。面试题主要考察什么面试不是个轻松的活，不管是对面试官还是面试者都一样。对于面试官来说，别的先不管，首先...

defcon 2019-08-21 18:34 评论0 收藏0
2018.11.19秋招末第二波前端实习/校招小结

摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，vue技术栈时间背景大概是在11月9日准备...

suxier 2019-08-29 17:21 评论0 收藏0