本文深入探讨CSS盒模型的概念，包括content-box和border-box两种模式，以及如何使用JavaScript获取盒模型尺寸。同时，介绍了BFC（Block Formatting Context）的概念及其应用场景，详细解析flex和grid布局的使用方法，并提供了多种清除浮动和元素居中的解决方案。
！！.css盒模型
1.谈谈你对盒模型的认识?
盒模型简介：
- 1.box-sizing： content-box （浏览器默认方式）类似于W3C定义的盒模型 content = width；
- 2.box-sizing： border-box 类似于IE定义的盒模型 content = width + border + padding；
3、JS如何设置获取盒模型对应的宽和高
- 1.dom.style.width/height //内联样式才可以 = with + 'px'
- 2.dom.currentStyle.width/height //仅IE支持
- 3.原理是渲染后的元素的宽高相对来说比较准确
- 4.window.gteComputedStyle(dom).width/height //兼容Firefox与Chrome原理跟上面的一样，所有浏览器都支持
- 5.dom.getBoundingClientRect().width/height 计算元素的绝对位置，相对于视窗来计算的 //dom.getBoundingClientRect() {函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height}；
- 55。计算父元素的实际高度 父元素的实际高度是100px
5、BFC（布局边距重叠解决方案）
-
基本概念(原理)：BFC(Block formatting context)直译为"块级格式化上下文" 原理/特性/渲染规则：
-
处于同一个BFC中的元素相互影响，可能会发生margin collapse(边距坍塌&边距重叠)；
-
BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然；
-
计算BFC的高度时，考虑BFC所包含的所有元素，包括浮动元素也参与计算； 浮动盒的区域不会叠加到BFC上； 创建：怎么创建或者说哪些元素会生成BFC?
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
-
使用场景：
- 1、利用BFC可以闭合浮动
- 2、防止与浮动元素重叠
- 3、由于BFC的隔离作用，可以利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse。
6.flex布局和grid布局？
- 1.flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持
- 1使用flex布局的容器（flex container），它内部的元素自动成为flex项目（flex item）。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置称为cross start；交叉轴结束的位置称为cross end。item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。 此外，需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。 三、容器属性详述
1.flex-direction
- 决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse
- row:主轴为水平方向，项目沿主轴从左至右排列
- column：主轴为竖直方向，项目沿主轴从上至下排列
- row-reverse：主轴水平，项目从右至左排列，与row反向
- column-reverse：主轴竖直，项目从下至上排列，与column反向
默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认)|wrap|wrap-reverse
nowrap：自动缩小项目，不换行
wrap：换行，且第一行在上方
wrap-reverse：换行，第一行在下面
是flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行。
4、justify-content
决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。当主轴沿水平方向时，具体含义为
flex-start：左对齐
flex-end：右对齐
center：居中对齐
space- between：两端对齐
space-around：沿轴线均匀分布
效果如下图
决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch，当主轴水平时，其具体含义为
flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：item第一行文字的底部对齐
stretch：当item未设置高度时，item将和容器等高对齐
效果图如下：
该属性定义了当有多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效。align-content可能值含义如下（假设主轴为水平方向）：
flex-start：左对齐
flex-end：右对齐
center：居中对齐
space- between：两端对齐
space-around：沿轴线均匀分布
stretch：各行将根据其flex-grow值伸展以充分占据剩余空间
效果图如下
item的属性在item的style中设置。item共有如下六种属性
1、order
order的值是整数，默认为0，整数越小，item排列越靠前，如下图所示代码如下
item 1
item 2
item 3
item 4
item 1
item 2
item 3
3、flex-shrink
定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。flex-grow
4、flex-basis
表示项目在主轴上占据的空间，默认值为auto。如下代码
item 1
item 2
item 3
flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。
6、align-self
align-self属性允许item有自己独特的在交叉轴上的对齐方式，它有六个可能的值。默认值为auto
auto：和父元素align-self的值一致
flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：item第一行文字的底部对齐
stretch：当item未设置高度时，item将和容器等高对齐
五.圣杯布局的四种方法？
- grid布局
- flex布局
- float解决方案：
- position解决方案：
六：清除浮动的方法？
CSS3中三种清除浮动（float）的方法
- 方法一：添加新的元素 、应用 clear：both .clear{ clear:both; height: 0; height: 0; overflow:hidden; }
- 方法二：父级div定义 overflow: auto .over-flow{ overflow: auto; zoom: 1; //处理兼容性问题 }
- 方法三： 伪类 :after 方法 outer是父div的样式 .outer {zoom:1;} /==for IE6/7 Maxthon2==/ .outer :after { clear:both; content:'.'; display:block; width: 0; height: 0; visibility:hidden; }
七： 四种居中的方式：
- 方案1：position 元素已知宽度 父元素设置为：position: relative; 子元素设置为：position: absolute; 距上50%，据左50%，然后减去元素自身宽度的距离就可以实现 示例 2：
八.display: none;和visibility: hidden;的区别？
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
九，用css写出一个三角形？
十. 写出五条兼容问题？
- 1.IE6下图片下有空隙产生 解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom都可以解决.
- 2.LI中内容超过长度后以省略号显示 此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。
-
3.不同浏览器的标签默认的margin和padding不一样。 *{margin:0;padding:0;}
-
- IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
{ background-color:#f1ee18;/所有识别/ .background-color:#00deff\9; /IE6、7、8识别/ +background-color:#a200ff;/IE6、7识别/ _background-color:#1e0bd1;/IE6识别/ }
-
- 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
-
- IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
-
- 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
-
- 为什么FF下文本无法撑开容器的高度 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; }
扫一扫
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
