clearance css,前端面试总结CSS篇

最新推荐文章于 2023-02-25 22:10:23 发布

AutoPilot-15

最新推荐文章于 2023-02-25 22:10:23 发布

阅读量140

点赞数

文章标签： clearance css

1. 居中不定高div样式

垂直水平居中定高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;

}

.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%)

}

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

深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则，

在保持北京站特色之余，针对微信开发的新情况重新设置了议程，内容源于实践又富于启发性。

正进行微信开发的开发团队(开发者)、有兴趣或即将投身于微信开发的开发者、

想开发相关微信应用正努力寻找微信开发团队的传统IT企业，该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。

如果你还在犹豫，可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。

.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;

}

Flex 布局教程：语法篇:

容器的属性: 以下6个属性设置在容器上。

flex-direction

flex-wrap

flex-flow

justify-content: 水平居中

align-items：垂直居中

align-content

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

挨着的、且没有任何东西分割的两个普通元素会在垂直方向上合并 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

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

置换元素(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。你可以自行尝试一番。

总结下来margin 属性可以应用于几乎所有的元素，除了表格显示类型(不包括 table-caption, table and inline-table)的元素，而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。

4. media多属性设置

@media screen and (max-width: 960px){

body{

background: #000;

}

5. 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. 画布局

sub

nav

#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; */

}

5abbd210dccd

9CA715DB-00A6-4D87-8224-2DAE536672B6.png

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

8.清除浮动

这里我没有给最外层的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自动获取高度

优点：简单、代码少，浏览器支持好，不容易出现怪问题