css 常见问题

Bertha 。 2022-03-18 03:06 255阅读 0赞

隐藏滚动条并可以滚动内容  
1.计算滚动条宽度并隐藏起来  
页面向右偏移一定的距离。可以使用绝对定位或者translate。  
2.使用三个容器包围起来，不需要计算滚动条的宽度  
未知  
css隐藏滚动条  
这个方法不兼容IE，做移动端的可以使用。那就是自定义滚动条的伪对象选择器::-webkit-scrollbar

chrome 和Safari: .element::-webkit-scrollbar \{ width: 0 !important \}

IE 10+: .element \{ -ms-overflow-style: none; \}

Firefox: .element \{ overflow: -moz-scrollbars-none; \}

盒子模型  
内容区域content area 是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，它的大小为内容宽度 或 content-box宽及内容高度或content-box高。  
如果 box-sizing 为默认值， width, min-width, max-width, height, min-height 与 max-height 控制内容大小。  
内边距区域padding area 延伸到包围padding的边框。如果内容区域content area设置了背景、颜色或者图片，这些样式将会延伸到padding上(译者注：而不仅仅是作用于内容区域)。它位于内边距边界内部, 它的大小为 padding-box 宽与 padding-box 高。  
内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。  
边框区域border area 是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 border-box 宽和 border-box 高。由 border-width 及简写属性 border控制。  
外边距区域margin area用空白区域扩展边框区域，以分开相邻的元素。它的大小为 margin-box 的高宽。  
外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left 及简写属性 margin 控制。  
在 外边距合并 的情况下，由于盒之间共享外边距，外边距不容易弄清楚。  
最后，请注意，对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由 line-height 属性决定。  
什么是非替换元素和替换元素  
替换元素  
替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。比如input标签，未输入时和输入后再浏览器的状态是不一样的。 input,textarea,img,select,object都是替换元素，这些元素没有实际的内容。  
非替换元素  
(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。比如p标签，浏览器直接显示内容。  
盒子模型的标准模式和怪异模式  
标准模式：box-sizing:content-box;

怪异模式：box-sizing:border-box;

两种模式的区别：

标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。

标准模式：盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin。

怪异模式：盒子总宽度/高度 = width/height + margin。

使用样式表的方式  
外部样式表，使用link标签引入  
内部样式表，样式写入到head标签中的style标签  
内联样式表，样式直接在html标签上写入  
css选择器有哪些类型？  
全局选择器（例如\*）  
标签选择器（例如body,html标签）  
id选择器（例如id=“id\_name” \#id\_name\{…\}）  
class选择器（例如class=“class-name” .class-name\{…\}）  
组合选择器:  
分组选择器（例如 html,body，注意逗号）  
直接后代选择器（例如 .parent > .son，注意 > ）  
相邻选择器（例如 div + p，注意 + ）  
兄弟选择器（例如 div ~ p，注意 ~ ）  
后代选择器（例如 div p，注意空格）  
伪类选择器（例如a标签的:link,:visited,:hover,:active）  
属性选择器（例如p\[title=“content”\],p\[title~=“content”\],p\[title^=“content”\]等）  
css3新增的伪类选择器  
p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。  
p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。  
p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。  
p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。  
p:nth-child(N) 选择属于其父元素的第N个子元素的每个 p 元素。  
:enabled、:disabled 控制表单控件的禁用状态。  
:checked，单选框或复选框被选中。  
css选择器的优先级计算方式？  
选择器的优先级从大到小  
!important关键字（权重无穷大，不建议使用，因为不知道什么时候对同一属性使用多个!important）  
内联样式（权重可以用1000表示）  
id选择器（权重可以用0100表示）  
类选择器或属性选择器或伪类选择器（权重可以用0010表示）  
标签选择器（权重可以用0001表示）  
全局选择器 \* （权重最低，不建议使用，杀伤范围太大）  
Firefox等浏览器所有的类名(classes)都是以8字节字符串存储的，8字节所能hold的最大值就是255. 所以你想啊，当同时出现256个class, 势必会越过其边缘，溢出到id区域。

Opera浏览器class类名的存储是以16字节的字符串。因此，该浏览器要想发生class溢出到id的话，需要连续65536个class。

超链接的伪类的样式顺序  
L-V-H-A（:link, :visited, :hover, :active）

什么是css hack？IE的css hack怎么写？  
针对不同的浏览器写不同的css代码，就是css hack

IE的css hack  
IE9: 单行样式后面加上\\9，例如color: blue\\9;  
IE7: 单行样式前面加上+，例如+color: blue;  
IE6: 单行样式前面加上\_，例如\_color: blue\\9;  
行内元素和块级元素的区别是什么？它们的width,height,margin,padding都是可以设置的吗？  
块级元素再布局中总是单独占一行，相邻其他内容总是从下一行开始。它的width,height,margin,padding都是可以设置的。

内联元素只占自己内容的大小，可以与其他相邻内容在一行显示。它的width,height,margin-top,margin-bottom,padding-top,padding-bottom都不可以设置的，但是margin-left,margin-right,padding-left,padding-right都是可以设置的。

内联块级元素也是只占自身内容的大小，可以与其他相邻的内容一行显示，但是它的width,height,margin,padding都可以设置。

什么是外边距重叠？重叠的结果是什么？  
外边距重叠就是margin-collapse，在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：  
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。  
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。  
两个外边距一正一负时，折叠结果是两者的相加的和。  
rgba()和opacity的透明效果有什么不同？  
opacity作用于元素的本身以及元素的内容，而rgba()作用元素的颜色或者背景色，并且子元素不会继承。

css中可以让文字在垂直和水平方向上重叠的两个属性是什么？  
垂直方向：line-height  
水平方向：letter-spacing  
letter-spacing可以消除inline-block元素换行带来的空格间隙问题（font-size: 0;也可以）

如何居中一个元素？  
绝对定位加上负外边距  
父级容器使用相对定位，元素使用绝对定位加上负边距。例如：

.parent {
                position: relative;
            }
            .son {
                position: absolute;
                top: 50%;
                height: 50%;
                margin-top: /*高度的一半的负值*/;
                margin-bottom: /*宽度的一半的负值*/;
            }

固定定位加上负外边距  
元素使用固定定位加上负边距。例如：

.son {
                position: fixed;
                top: 50%;
                height: 50%;
                margin-top: /*高度的一半的负值*/;
                margin-bottom: /*宽度的一半的负值*/;
            }

绝对定位加上translate  
父级容器使用相对定位，元素使用绝对定位加上translate。例如：

.parent {
                position: relative;
            }
            .son {
                position: absolute;
                top: 50%;
                height: 50%;
                transform: translate(-50%, -50%);
            }

固定定位加上translate  
元素使用固定定位加上translate。例如：

.son {
                position: fixed;
                top: 50%;
                height: 50%;
                transform: translate(-50%, -50%);
            }

父级元素使用flex布局  
例如：

.parent {
                display: flex;
                justify-content: cneter;
                align-content: center;
                align-item: center;
            }

父级元素使用table布局  
例如：

.parent {
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }

css中link和@import的区别  
link属于HTML标签，而@import是css提供的  
在页面加载的时候，link会并行加载，而@import会在css加载完毕后才会加载引用的样式  
@import 在ie5以上才能识别，而link是HTML标签，不存在兼容性问题。  
link引入的样式的权重大于@import的引用。  
如何实现三列布局？  
1.父级容器使用相对定位，两边padding加上绝对定位  
2.使用flex布局（推荐）  
3.使用table布局（不推荐）  
什么是BFC？  
BFC全称block formatting context，BFC也是HTML中的一个盒子（看不见而已），只有满足至少下列条件之一才能形成BFC:  
float属性不为none.  
position属性不为static和relative.  
display属性为下列之一:table-cell,table-caption,inline-block,flex,或者 inline-flex.  
overflow属性不为visible.  
BFC的作用:  
可以消除margin collapse  
可以消除浮动  
如何消除浮动  
clear属性加上伪类  
使用overflow属性，形成BFC  
zoom属性加上clear加上伪类