前端面试-css篇 (1)

一、 文字与块元素自动居中的方法?

        文字:

        1.    text-align:center;line-height:元素模块高度,

        2. vertical-align:middle + text-align:center;但是要注意vettical-align需要将兄弟元素的高度设置的与父元素高度相同,同时,它只对display:inline;与inline-block起作用。

        模块居中: 

        1.不定高宽position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;

        2. 定宽高 position:absolute;top:50%;left:50%;margin-top:-(h/2);margin-left:-(w/2);

        3. 不定宽高:position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;

        4.flex布局:display:flex; justify-content: center;  align-items: center;

二、position有哪些属性?

        理论上说,position存在8个属性:static | relative | absolute | fixed | sticky | initial | inherit | unset,但常用的只有五个属性,static、relative、absolute 、 fixed 、 sticky。

        static:默认属性;忽略所有设置的偏移属性值。

        relative:相对定位,相对元素本身所在位置,且定位过后当前所在位置预留下。

        absolute:绝对定位,相对于除了static以外的所有属性进行定位,若无,则相对于浏览器视口进行定位。

        fixed:固定定位,相对于浏览器窗口进行定位,不随滚动条的滚动滚动。

        sticky:粘性定位,相对定位和固定定位的结合,粘性定位需要一个阀值决定,left,top,right,bottom最少一个值,当大于这个阀值是采用相对定位,小于这个阀值,采用固定定位。

        出现一下三种情况会造成失效:

        1. 父元素的内容需滚动查看,且不能有 overflow: hidden 、 overflow: auto 属性    

        2. 父元素的高度不能低于粘性定位元素的高度

        3. sticky 是容器相关的,只会在它所处的容器(父元素)里生效。

三、清除浮动的几种方式?

        1.空标签,clear;both

        2. overflow:hidden

        3.伪类清除

        4.父元素设置高度

四、三角形css书写原理

        使用css属性transparent      border:20px solid; border-color:transparent transparent red transparent

五、ios 浏览器滚动不流畅问题

        -webkit-overflow-scroll:touch;   一个属性

六、元素高的设置的百分比是相对容器的高度吗?

        当我们设置宽度百分比时,它是相对于我们所设定的相对模块的宽度的百分比,但是当我们设定高度百分比时,比如padding-buttom;margin-top这些属性,其实它还是相对模块的宽的百分比

七、如何实现三列布局,且中间列自适应?

        1. 左右浮动,采用calc方法计算宽度,艰巨等问题。

        2.flex布局,左右两块设置 flex-basis,中间设置 flex-grow

        3.绝对定位+中间板块不给固定宽度。








--------  后续将会持续慢慢更新,之前尝试大厂面试,真的是超级基础,如遇到感兴趣可以留言,我会进行查找补全。-----------

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,367评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,959评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,750评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,226评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,252评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,975评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,592评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,497评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,027评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,147评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,274评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,953评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,623评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,143评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,260评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,607评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,271评论 2 358