CSS面试集锦

谁借莪１个温暖的怀抱￠ 2022-07-12 20:20 320阅读 0赞

*更新时间：2017年3月31日14:46:04*

[《我的博客地图》][Link 1]

一.布局

原理：元素浮动 || 绝对定位 均可以使元素脱离常规文档流

方案：尺寸和定位，即所有与尺寸和定位有关的属性，都可以用来布局。

“浮动”，可形象化理解为，当你将木块压入水下，它会向水面浮动，直到浮力等于重力，对于浮动元素而言，当两个元素的border接触时浮动终止。注意：浮动≠布局，浮动起初仅仅用于文字环绕的样式，而布局是一个设计方案层面的问题。

1.左侧固定宽度，右侧自适应

![20170109172258219][]

![Image 1][]  
方案一：左侧元素设固定宽度且左浮动，右侧元素设margin-left且不设宽度

\#div01\{width:50px;height:50px;float:left;background:red;\}

\#div02\{height:50px;margin-left:50px;background:green;\}

方案二：左侧元素设绝对定位，右侧元素设margin-left且不设宽度

\#div01\{position:absolute;top:0;left:0;width:50px;height:50px;background:red;\}

\#div02\{height:50px;margin-left:50px;background:green;\}

方案三：父元素设为table，子元素设为table-cell

![20170109172407783][]

![Image 1][]

</div>

\#parent\{width:200px;height:200px;background:yellow;display:table;\}

\#div01\{width:50px;display:table-cell;background:red;\}

\#div02\{display:table-cell;background:green;\}

方案四：弹性盒模型

flex 属性用于 设置|| 检索 弹性盒模型对象的 子元素 如何分配空间。

flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;

flex-grow、flex-shrink、flex-basis这三个属性的作用是：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素的空间的。

flex-grow(父元素的宽度大于所有子元素的宽度的和时,子元素索取父元素的剩余空间)属性用于设置或检索弹性盒的 扩展比率。如果元素不是弹性盒对象的元素，则flex-grow 属性不起作用。

flex-shrink(当父元素的宽度小于所有子元素的宽度的和时，子元素如何缩小自己的宽度。)属性用于设置或检索弹性盒的 收缩比率。注意：如果元素不是弹性盒对象的元素，则flex-shrink 属性不起作用。

flex-basis属性用于设置或检索弹性盒 伸缩基准值。注意：如果元素不是弹性盒对象的元素，则flex-basis 属性不起作用。

\#parent\{width:200px;height:200px;background:yellow;display:flex;\}

\#div01\{background:green;flex-basis:30px;\}

\#div02\{background:red;flex-grow:1;\}

\#div03\{background:red;flex-basis:30px;\}

![20170109172413143][]

\#parent\{width:200px;height:200px;background:yellow;display:flex;\}

\#div01\{background:green;flex-basis:50px;\}![Image 1][]\#div03\{background:green;flex-basis:30px;\}  
![Image 1][]

\#div02\{background:red;flex-grow:1;\}

\#div03\{background:lightgreen;flex-grow:9;\}

\#div03\{background:green;flex-basis:50px;\}

![20170109172625300][]

2.右侧固定宽度，左侧自适应

</div>

方案一：固定宽度区域浮动，自适应区域使用margin，注意div结构顺序，有点微妙

\#parent01\{width:200px;height:200px;background:yellow;\}

\#div01\{background:green;width:20px;height:100%;float: right;\}

\#div02\{background:red;height:100%;margin-right:20px;\}

![Image 1][]

方案二：固定宽度使用绝对定位，自适应宽度使用margin

\#parent\{width:200px;height:200px;background:yellow;position:relative;\}

\#div01\{background:green;position:absolute;top:0;right:0;width:20px;height:100%;\}

\#div02\{background:red;height:100%;margin-right:20px;\}

方案三：table和table-cell

方案四：flex和flex-basis/flex-grow

3.左右两侧固定宽度，中间自适应

方案一：固定宽度区域浮动，自适应区域使用margin，注意div结构顺序，有点微妙

\#parent\{width:200px;height:200px;background:yellow;position:relative;\}

\#div01\{background:red;float:left;width:50px;height:100%;\}

\#div02\{background:pink;float:right;width:50px;height:100%;\}

\#div03\{background:green;height:100%;margin: 0 50px;\}

方案二：固定宽度使用绝对定位+top+left+right，自适应区域使用margin，注意div结构顺序，有点微妙

方案三：table和table-cell

方案四：flex和flex-basis/flex-grow或flex-grow/width

4、伪类和伪元素

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。  
伪类，用于向某些选择器添加特殊的效果。  
伪元素，用于将特殊的效果添加到某些选择器。  
伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang   
伪元素有：:first-line，:first-letter，:before，:after

5、更改input元素placeholder属性默认样式

::-webkit-input-placeholder \{color:\#515151;font-size:11px;\}

6、元素显示与隐藏

display：none；看不见摸不着，不占据 普通流 位置，不存在于DOM树中，不渲染该元素；

visibility：hidden；看不见摸得着，占据 普通流 位置，存在于DOM树中，不渲染该元素；

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[20170109172258219]: /images/20220713/1d5e1871a82b4e1999a743699db9bdfa.png
[Image 1]: 
[20170109172407783]: /images/20220713/647880c8d2fe434e8cf6b036ed587de2.png
[20170109172413143]: /images/20220713/578b6690c51c4bf7828494eae5200b79.png
[20170109172625300]: /images/20220713/a867b8a83e0449229750d6cbaf4030df.png