CSS布局艺术：居中、三角形、品字与兼容问题解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50382279/article/details/121297055

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

根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
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.youkuaiyun.com/qq_33769914/article/details/76343762
11href和scr的区别
https://blog.youkuaiyun.com/binlety/article/details/81448195
+
https://blog.youkuaiyun.com/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能继承的属性:思考那些统一点的东西,比较方便的适合开发者

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

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

15 CSS 实现沿Y轴旋转360度