关于Web的学习（18.5.19）——css篇

1.如何居中div？

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

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

• 让绝对定位的div居中

div{
    position:absolute;
    width:300px;
    hight: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;/* 方便看效果 */
}

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

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

3.position的值relative和absolute定位原点是？（CSS position属性）

• absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

• fixed：生成绝对定位的元素，相当于浏览器窗口进行定位（老IE不支持）。

• relative：生成相对定位的元素，相对于器正常位置进行定位。

• static：默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）。

• inherit：规定从父元素继承position属性的值。

4.CSS3有哪些新特性？

• 新增各种CSS选择器 :not(.input) 所有class不是“input”的节点
• 圆角 border-radius:8px
• 多列布局 multi-column layout
• 阴影和反射 Shadow\Reflect
• 文字特效 text-shadow
• 文字渲染 text-decoration
• 线性渐变 gradient
• 旋转 transform
• 缩放 scale
• 倾斜 skew
• 动画 Animation
• 多背景

5.请解释一下CSS3的Flexbox（弹性盒布局模型），以及适用场景？

• 一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
• 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
• 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
• 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
• 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
• 在布局上有了比以前更加灵活的空间。

具体：Flexbox——快速布局神器    快速布局神器Flexbox布局