css 常见问题

隐藏滚动条并可以滚动内容
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加上伪类