一些常见的CSS面试问题 #15

YutHelloWorld · 2017-10-08T04:38:11Z

display有哪些值？说明他们的作用。

block       	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none        	缺省值。象行内元素类型一样显示。
inline      	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block    默认宽度为内容宽度，可以设置宽高，同行显示。
list-item   	像块类型元素一样显示，并添加样式列表标记。
table       	此元素会作为块级表格来显示。
inherit     	规定应该从父元素继承 display 属性的值。

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区  别： IE 的content部分把 border 和 padding计算了进去;

如何居中div？

水平居中：给div设置一个宽度，然后添加margin:0 auto属性

div{
  width: 200px;
  margin: 0 auto;
}

让绝对定位的div居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink;	/* 方便看效果 */
}

水平垂直居中一

/* 确定容器的宽高 宽500 高 300 的层，设置层的外边距 */

div {
  position: relative;		/* 相对定位或绝对定位均可 */
  width:500px;
  height:300px;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
  background-color: pink;	 	/* 方便看效果 */
}

水平垂直居中二

/* 未知容器的宽高，利用 `transform` 属性 */

div {
  position: absolute;		/* 相对定位或绝对定位均可 */
  width:500px;
  height:300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;	 	/* 方便看效果 */
}

水平垂直居中三

/* 利用 flex 布局，实际使用时应考虑兼容性 */

.container {
  display: flex;
  align-items: center; 		/* 垂直居中 */
  justify-content: center;	/* 水平居中 */

}
.container div {
  width: 100px;
  height: 100px;
  background-color: pink;		/* 方便看效果 */
}

将多个元素设置为同一行?清除浮动有几种方式?

将多个元素设置为同一行：float，inline-block
清除浮动的方式：方法一：添加新的元素 、应用 clear：both；
方法二：父级div定义 overflow: hidden；
方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

The text was updated successfully, but these errors were encountered:

YutHelloWorld · 2018-03-23T01:45:45Z

左列定宽,右列自适应

(1)利用float+margin实现

<style>
.left {
  background-color: #f00;
  float: left;
  width: 100px;
  height: 500px;
}
.right {
  background-color: #0f0;
  height: 500px;
  margin-left: 100px; /*大于等于#left的宽度*/
}
</style>
<body>
  <div class="left">左列定宽</div>
  <div class="right">右列自适应</div>
</body>

(2)利用float+margin(fix)实现

<style>
.left {
  background-color: #f00;
  float: left;
  width: 100px;
  height: 500px;
}
.right-fix {
  float: right;
  width: 100%;
  margin-left: -100px; /*正值大于或等于#left的宽度,才能显示在同一行*/
}
.right{
  margin-left: 100px; /*大于或等于#left的宽度*/
  background-color: #0f0;
  height: 500px;
}
</style>
<body>
  <div class="left">左列定宽</div>
  <div class="right-fix">
    <div class="right">右列自适应</div>
  </div>
</body>

(3)使用float+overflow实现

<style>
.left {
  background-color: #f00;
  float: left;
  width: 100px;
  height: 500px;
}
.right {
  background-color: #0f0;
  height: 500px;
  overflow: hidden; /*触发bfc达到自适应*/
}

</style>
<body>
  <div class="left">左列定宽</div>
  <div class="right">右列自适应</div>
</body>

(4)使用table实现

<style>
.parent{
    width: 100%;
    display: table;
    height: 500px;
}
.left {
    width: 100px;
    background-color: #f00;
}
.right {
    background-color: #0f0;
}
.left,.right{
    display: table-cell;  /*利用单元格自动分配宽度*/
}
</style>
<body>
  <div class="parent">
    <div class="left">左列定宽</div>
    <div class="right">右列自适应</div>
  </div>
</body>

(5)使用绝对定位实现

<style>
.parent{
    position: relative;  /*子绝父相*/
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f00;
  width: 100px;
  height: 500px;
}
.right {
  position: absolute;
  top: 0;
  left: 100px;  /*值大于等于.left的宽度*/
  right: 0;
  background-color: #0f0;
  height: 500px;
}
</style>
<body>
  <div class="parent">
    <div class="left">左列定宽</div>
    <div class="right">右列自适应</div>
  </div>
</body>

(6)使用flex实现

<style>
.parent{
  width: 100%;
  height: 500px;
  display: flex;
}
.left {
  width: 100px;
  background-color: #f00;
}
.right {
  flex: 1; /*均分了父元素剩余空间*/
  background-color: #0f0;
}
</style>
<body>
  <div class="parent">
    <div class="left">左列定宽</div>
    <div class="right">右列自适应</div>
  </div>
</body>

YutHelloWorld · 2018-05-18T03:12:55Z

使用margin和padding的区别？

.mar {
  margin: 10px;
  background: red;
}
.pad {
  padding: 10px;
  background: red;
}
.con {
  border: 1px solid;
 width: 200px;
}

<div class="con">
  <p class="mar">测试文本</p>
  <p class="mar">测试文本</p>
</div>
<div class="con">
  <p class="pad">测试文本</p>
  <p class="pad">测试文本</p>
</div>

YutHelloWorld added the Css label Oct 8, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

一些常见的CSS面试问题 #15

一些常见的CSS面试问题 #15

YutHelloWorld commented Oct 8, 2017 •

edited

Loading

YutHelloWorld commented Mar 23, 2018 •

edited

Loading

YutHelloWorld commented May 18, 2018

一些常见的CSS面试问题 #15

一些常见的CSS面试问题 #15

Comments

YutHelloWorld commented Oct 8, 2017 • edited Loading

display有哪些值？说明他们的作用。

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

如何居中div？

水平居中：给div设置一个宽度，然后添加margin:0 auto属性

让绝对定位的div居中

水平垂直居中一

水平垂直居中二

水平垂直居中三

将多个元素设置为同一行?清除浮动有几种方式?

YutHelloWorld commented Mar 23, 2018 • edited Loading

左列定宽,右列自适应

YutHelloWorld commented May 18, 2018

YutHelloWorld commented Oct 8, 2017 •

edited

Loading

YutHelloWorld commented Mar 23, 2018 •

edited

Loading