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.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能继承的属性:思考那些统一点的东西,比较方便的适合开发者
- 文本格式
- 布局
- 字体样式
- 元素可见性
- 光标属性
13flex布局三参数很好的文
https://juejin.cn/post/6951592511928270885#heading-5%C2%A0
第三个参数flex-basis表示在flex items 假设大小,就是在计算空间剩余空间后,如果有剩余空间,实际空间=这个flex-basis+分配到的空间
14 CSS transition的实现效果和有哪些属性
15 CSS 实现沿Y轴旋转360度