前端面试总结CSS篇

2016-11-22  本文已影响0人  darr250

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个属性设置在容器上。

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(包括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元素共处一行。

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 盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。

$.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
    建议：不推荐使用，但此方法是目前使用很频繁的一种方法

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都是对的

上一篇 下一篇

猜你喜欢

热点阅读