CSS的面试题的思考

1.原网址:https://segmentfault.com/a/1190000013325778

问题1:
如何居中一个浮动元素？

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px; 

其中,width和height的大小会影响margin的上和左的大小,思考一下:
left的定义是这个box-sizing:content-box(默认),边框的左距离父元素(position: absolute)为百分之50,但是右边+边框的width占了百分之五十,所以需要把一半的width匀给左边,用margin-left:-50px;( -width*(1/2)) 让这个元素移动一些过去左边 让padding-left+width/2=页面所占的百分之五十的比例
绝对定位的左右居中：

.box{
    border: 1px solid red;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
margin-left:-100px; 

}

2.用css写一个三角形的理解

.body{
    background-color: yellow;
    width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}

记住一个原理 两个粗的边框比如左 下 交叉的区域会各占一半江山 例子见:
https://jsrun.net/58UKp/edit
所以想实现一个三角形,应该要去先想象一个点 width和height等于1,然后汇聚四条粗变,这样形成了一个正方形,中间只有一个1x1的小正方形,我们再去把他width height变为0,就形成了一个正方形被四个三角形瓜分 只需要把某三条边的颜色变成透明即可,见例子:
https://jsrun.net/kTUKp/edit
思考题:如何实现一个等边三角形呢?

.body{
    background-color: yellow;
    width: 0;
height: 0;
border-top: 80px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 80px solid #ff0000;
}

3.问题 一个满屏品字布局如何设计?
:https://jsrun.net/qTUKp/edit

4.用displays:flex实现品字布局:https://jsrun.net/qTUKp/edit

5.浏览器常见兼容问题

• 不同浏览器的标签默认的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 {}

6.还不是很好理解
absolute的containing block计算方式跟正常流有什么不同？

• 无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

  若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的
  padding box (除 margin, border 外的区域) 的最小矩形； 否则,则由这个祖先元素的 padding box
  构成。 如果都找不到，则为 initial containing block。

补充：

• static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分） absolute: 向上找最近的定位为absolute/relative的元素
  fixed: 它的containing block一律为根元素(html/body)

7position跟display、overflow、float这些特性相互叠加后会怎么样？

• display属性规定元素应该生成的框的类型；
• position属性规定元素的定位类型；
• float属性是一种布局方式，定义元素在哪个方向浮动。
• 类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。
• float或者absolute定位的元素，只能是块元素或表格。

对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC规定了内部的Block Box如何布局。
定位方案：

• 内部的Box会在垂直方向上一个接一个放置。

• Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 每个元素的margin
  box的左边，与包含块border box的左边相接触。

• BFC的区域不会与float box重叠。

• BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

1. 根元素，即html
2. float的值不为none（默认）
3. overflow的值不为visible（默认）
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed

元素竖向的百分比设定是相对于容器的高度吗？

• 当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top ,
  padding-bottom , margin-top , margin-bottom
  等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

9.display:inline-block 什么时候会显示间隙？

• 有空格时候会有间隙 解决：移除空格
• margin正值的时候 解决：margin使用负值
• 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

10有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度:
https://blog.csdn.net/qq_33769914/article/details/76343762
11href和scr的区别
https://blog.csdn.net/binlety/article/details/81448195
+
https://blog.csdn.net/i_dont_know_a/article/details/82774456?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.showsourcetag&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.showsourcetag
12能继承的属性:思考那些统一点的东西,比较方便的适合开发者

1. 文本格式
2. 布局
3. 字体样式
4. 元素可见性
5. 光标属性
   13flex布局三参数很好的文
   https://juejin.cn/post/6951592511928270885#heading-5%C2%A0
   第三个参数flex-basis表示在flex items 假设大小,就是在计算空间剩余空间后,如果有剩余空间,实际空间=这个flex-basis+分配到的空间

14 CSS transition的实现效果和有哪些属性

15 CSS 实现沿Y轴旋转360度