前端面试总结CSS篇

1. 居中不定高div样式

参考:http://www.haorooms.com/post/css_div_juzhong

垂直水平居中定高div

.parent-panel2{
    width:100%;
    height:400px;
    border:1px solid #888;
  position: relative;
}
.middle-panel2{
  position: absolute;
    width:300px;
  height: 100px;
    border:1px solid #888;
  top:50%;
  margin-top:-50px;
left: 50%;
  margin-left: -150px;
}


CSS position: absolute 绝对定位精讲

.div2 {
  position: absolute;
  border: 1px solid #888;
  width: 100px;
  height: 100px;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

垂直居中不固定高宽div的方法

相对页面居中
.div2 {
  position: absolute;
  border: 1px solid #888;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%)
}


<!--方法1:有些弹出层的样式,也可以用这个方法居中-->
position: fixed;//absolute
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
<!--某容器内居中 方法2 parent-panel内的元素水平垂直居中 flex布局-->
<div class="parent-panel">方法2
    <div class="middle-panel">
        <p>深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则,
        在保持北京站特色之余,针对微信开发的新情况重新设置了议程,内容源于实践又富于启发性。
        </p>
        <p>正进行微信开发的开发团队(开发者)、有兴趣或即将投身于微信开发的开发者、
        想开发相关微信应用正努力寻找微信开发团队的传统IT企业,该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。
        </p>
        <p>如果你还在犹豫,可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。
        </p>
    </div>
</div>

<style type="text/css">
.parent-panel{
    width:100%;
    height:400px;
    border:1px solid #888;
    
    /**主要代码*/
     display: flex;
    align-items: center;
    justify-content: center;
}
.middle-panel{
    /*width:500px;不用设置宽度*/
    border:1px solid #888;
}

</style>

Flex 布局教程:语法篇:
容器的属性: 以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content: 水平居中
  • align-items:垂直居中
  • align-content

2. 相邻div之间的margin,怎样不覆盖

参考:Collapsing margins——合并的外边距

挨着的、且没有任何东西分割的 两个普通元素会在垂直方向上合并 margin
1.父子毗邻元素Adjacent siblings
毗邻元素的外边距会合并(当靠后的元素 清除浮动 时除外)。
2.上下毗邻元素Adjacent siblings
如果块元素的 margin-top 与它的第一个子元素之间没有border, padding, inline content, 或 clearance 分隔,或者块元素的 margin-bottom 与它的最后一个子元素之间没有padding, inline content, height, min-height, or max-height 分隔,那么外边距会合并。
3.空块元素
如果块元素 margin-top 与 margin-bottom 之间没有border, padding, inline content, height, 与min-height来分隔, 那么它的上下外边距合并。

  • 浮动元素和其他任何元素之间不发生外边距叠加 (包括和它的子元素).
  • 创建了 BFC 的元素不会和它的子元素发生外边距叠加
  • 绝对定位元素和其他任何元素之间不发生外边距叠加(包括和它的子元素).
  • inline-block 元素和其他任何元素之间不发生外边距叠加 (包括和它的子元素).
  • 普通流中的块级元素的 margin-bottom 永远和它相邻的下一个块级元素的 margin-top 叠加(除非相邻的兄弟元素clear)
  • 普通流中的块级元素(没有 border-top、没有 padding-top )的 margin-top 和它的第一个普通流中的子元素(没有 clear )发生 margin-top 叠加
  • 普通流中的块级元素( height 为 auto、min-height 为 0、没有 border-bottom、没有 padding-bottom )和它的最后一个普通流中的子元素(没有自身发生 margin 叠加或 clear )发生 margin-bottom 叠加
  • 如果一个元素的 min-height 为 0、没有 border、没有 padding、高度为 0 或者 auto、不包含子元素,那么它自身的外边距会发生叠加

解决方法:

为父元素设置 BFC(包括overflow:auto) 或 padding 或 border (解决父子重叠)
兄弟元素间设置 float 或 inline-block 或 absolute(创建BFC不一定可以,设置overflow就不可以)
写结构的时候最好用一个方向,要不都 top 要不都 bottom

BFC: 总结_1207

3. 行内元素,块级元素 区别

margin在块元素、内联元素中的区别
HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline。顾名思义,block元素就是以”块”表现的元素(block-like elements),inline元素即是以”行”表现的元素(character level elements and text strings)。二者表现的主要差别在于,在页面文档中block元素另起一行开始,并独占一行。inline元素则同其他inline元素共处一行。

  • block元素(块元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进,一些元素将被废除,而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block,像table这种display:table的元素也是block元素。
  • inline元素(内联元素)大致有:#PCDATA(即文本)| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON
  • 其中有类特殊的元素:如img|input|select|textarea|button|label等,他们被称为可置换元素(Replaced element)。他们区别一般inline元素(相对而言,称non-replaced element)是:这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。
    置换元素(replaced element)主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知,非置换元素(non-replaced element)就是除了 img, input, textarea, select, object 等置换元素以外的元素。
    margin在块级元素下,他的性能可以完全体现,上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素,则就是相对于父元素的margin距离(但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识)
    margin也能用于内联元素,这是规范所允许的,但是** margin-top和margin-bottom对内联元素(对行)的高度没有影响**,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。
    这是因为边界应用于内联元素时不改变元素的行高度,如果你要改变内联元素的行高即类似文本的行间距,那么你只能使用这三个属性:line-height,fong-size,vertical-align。请记住,这个影响内联元素高度的是line-height而不是height,因为内联元素是一行行的,定一个height的话,那这到底是整段inline元素的高呢?还是inline元素一行的高呢?这都说不准,所以统一都给每行定一个高,只能是line-height了。
    margin-top/margin-bottom对内联元素没有多大实际效果,不过margin-left/margin-right还是能够对内联元素产生影响的。应用margin:10px 20px 30px 40px;,左边这个css如果写在inline元素上,他的效果大致是,上下无效果,左边离他相邻元素或者文本距离为40px,右边离他相邻元素或者文本距离为20px。你可以自行尝试一番。
    最后在内联元素中还有上文我们提到的非可置换inline元素(non-replaced element),这些个元素img|input|select|textarea|button|label虽然是内联元素,但margin依旧可以影响到他的上下左右!
    总结下来margin 属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。

4. media多属性设置

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

5. rem怎么设置

移动web适配利器-rem

6. 盒模型: 求宽度

.outer{
  width: 500px;
  height: 300px;
  border: 1px solid red;
  padding: 10px;
}
.box1 {
  height: 200px;
  border: 1px black solid;
  padding: 5px;
  margin: 20px;
}

$(".box1").width()
盒模型width是content .
答案:448

box-sizing
属性用来改变默认的 CSS 盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。

  • content-box
    默认值,标准盒模型
  • border-box
    width
    height
    包括内边距(padding)与边框(border),不包括外边距(margin)。这是IE 怪异模式(Quirks mode)使用的 盒模型

$.width()
注意.width()
总是返回内容宽度,不管CSS box-sizing属性值。截至jQuery 1.8,这可能需要检索的CSS的宽度加加上box-sizing的属性,然后当元素有 box-sizing: border-box
时候,减去个元素上任何潜在border和padding值。为了避免这种问题,使用.css( "width" )而非.width()。

7. 画布局

<div id="page">
  <div class="main"><div class="sub">sub</div></div>
  <div class="nav">nav</div>
</div>
#page {
  border: 1px solid red;
  width: 520px;
}
.nav {
  width: 200px;
  float: right;
}
.main {
  width: 200px;
  float: left;
  padding-left: 110px;
}
.sub {
  width: 100px;
  float: left;
  margin: 10px 10px 10px -100px;
}
.main {
  border: 1px solid yellow;
}
.nav,
.sub {
  border: 1px dashed #000;
  height: 300px;
}
.sub {
  /*   height: 280px; */
}
9CA715DB-00A6-4D87-8224-2DAE536672B6.png

float 和 absolute的元素都没有了默认的宽度,宽度由子元素绝定。

8.清除浮动

经验分享:CSS浮动(float,clear)通俗讲解
CSS清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

这里我没有给最外层的DIV.outer 设置高度,但是我们知道如果它里面的元素不浮动的话,那么这个外层的高是会自动被撑开的。但是当内层元素浮动后,就出现了一下影响:

(1):背景不能显示 (2):边框不能撑开 (3):margin 设置值不能正确显示
方法一:添加新的元素 、应用 clear:both;

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

缺点: 我想说这并不是一个好方法,尽管它兼容所有浏览器并且随用随清。这个方法需要添加大量无语义的html元素,你能想象一个并不算复杂的footer里就使用4次div.clear吗?天哪!

方法二:父级div定义 overflow: auto(注意:是父级div也就是这里的 div.outer)

原理:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以,其区据说在于一个对seo比较友好,另个hidden对seo不是太友好,其他区别我就说不上了,也不浪费时间。

.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题}

方法三: 据说是最高大上的方法 :after 方法:(注意:作用于浮动元素的父亲)

先说原理:这种方法清除浮动是现在网上最拉风的一种清除浮动,他就是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法:

.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/ .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
建议:推荐使用,建议定义公共类,以减少CSS代码

方法优劣总结:清除浮动方式总结

  • 父级div定义height
    原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
    优点:简单、代码少、容易掌握
    缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
    建议:不建议使用,只建议高度固定的布局时使用
    结尾处加空div标签 clear:both
    原理:添加一个空div,利用CSS提供的clear:both清楚浮动,让父级div自动获取高度
    优点:简单、代码少,浏览器支持好,不容易出现怪问题
    缺点:如果页面浮动布局多,就要增加很多空div
    建议:不推荐使用,但此方法是目前使用很频繁的一种方法
  • 父级div定义伪类:after和zoom
    原理:IE8以上和非IE浏览器才支持,原理类似2,zoom(IE专有属性)可解决ie6,ie7浮动问题
    优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
    缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
    建议:推荐使用,建议定义公共类,以减少css代码
  • 父级div定义overflow:hidden
    原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域高度
    优点:简单、代码少、浏览器支持好
    缺点:不能和position配合使用,因为超出的尺寸会被隐藏
    建议:只推荐没有使用position的朋友
  • 父级div定义overflow:auto
    原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
    优点:简单、代码少、浏览器支持好
    缺点:内部宽高超过父级div时,会出现滚动条。
    建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
  • 父级div 也一起浮动
    原理:所有代码一起浮动,就变成了一个整体
    优点:没有优点
    缺点:会产生新的浮动问题。
    建议:不推荐使用,只作了解。
  • 父级div定义 display:table
    原理:将div属性变成表格
    优点:没有优点
    缺点:会产生新的未知问题。
    建议:不推荐使用,只作了解。
  • 结尾处加 br标签 clear:both
    原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both
    建议:不推荐使用,只作了解。

10.当文本溢出包含元素时用...。

  • 单行:
tex{
  width: 40px;
  border: 1px solid blue;
 white-space:nowrap;/*不换行*/
  text-overflow: ellipsis;
  overflow: hidden;/*必须设置*/
}
  • 多行:
.tex {
  width: 40px;
  border: 1px solid blue;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;/*必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数。*/
  -webkit-box-orient: vertical;/*必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。*/
}

9. 下列CSS表达式错误的是

.a .b .c 是正确的
font: 12px是错的 font不能用来设置font-size
overflow: visible``visibility: visible都是对的

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,411评论 0 20
  • CSS 1、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种,IE盒子模型、W3C...
    京程一灯阅读 1,747评论 3 26
  • 我这里天气好呢,那你呢? 我这里天已经黑了,那你呢? 我这里下雨了,那你呢? 如果,我们晚一点遇到会是怎样? 如果...
    异雪阅读 504评论 0 0