CSS基础篇
CSS基础篇
1，介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
2，CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高
3，display有哪些值？说明他们的作用?
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 缺省值。象行内元素类型一样显示。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。
4，position的值？
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
5，元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
6，对BFC规范(块级格式化上下文：block formatting context)的理解？
1、Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念
2、具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性
3、通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部
4、触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
7，为什么要清除浮动以及清除浮动的几种方法？
1，因为当父盒子高度为0时，子盒子不占位置，子盒子不会撑开父盒子，所以下面的标准流盒子，会跑到父盒子中的子盒子下面
2，清除方法：
①在浮动盒子的后面添加一个空盒子，对该空盒子添加CSS样式：clear: both;
②对浮动的盒子父级添加该属性：overflow: hidden;
③单伪元素标签法，谁出问题就给谁加一个clearfix类名（常用）。
④双伪元素标签法，谁出问题就给谁加一个clearfix类名。
8，css中的单冒号和双冒号的区别？::before和:after的作用是什么？
1，CSS3为了区分伪类和伪元素，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示
2，单冒号(:)用于css3伪类，双冒号(::)用于CSS3伪元素
3，::before :在元素之前插入某些内容；：after:在元素之后插入某些内容
9，ZOOM:1的原理和作用（清除浮动）
1，Zoom属是IE浏览器的专有属性
2，当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
10，对line-height的理解？
1，line-height只影响行内元素，并不能直接应用于块级元素，line-height 具有可继承性，块级元素的子元素会继承该特性，并且在行内元素上生效。
2，line-height指的是在同一个元素中，两个文本行基线间的距离。
11，手动写动画，最小的时间间隔是多少？
多数显示器的默认频率是60HZ，即每秒刷新60次。所以理论上的最小间隔是 1/60*1000ms = 16.7ms
12，行内块元素什么时候出现间隙？怎么解决？
行内元素之间产生水平空隙的原因：代码中有意或无意的添加了换行符，tab（制表符）或者空格等字符引起的；
解决方法？
- 删除引起问题的换行符，制表符或者空格等，但是缺点是会使代码结构混乱；
- 设置margin属性为负数，如：margin-left: -3px;缺点是负数的值不确定，得具体情况具体分析，不推荐；
- 设置font-size: 0; 用于消除换行符、tab（制表符）、空格等字符造成的影响.
13,div水平垂直居中的方法？
1，div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】
div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }
2，div绝对定位水平垂直居中【margin 负间距】
div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }
3，css不定宽高水平垂直居中（display:flex;）
.box{ height:600px; display:flex; justify-content:center; align-items:center; /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ } .box>div{ background: green; width: 200px; height: 200px; }
14，CSS实现div的高度填满剩余空间？
1，box-sizing方案
- 外层
box-sizing: border-box;同时设置padding: 100px 0 0； - 内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间；
- 另一个元素直接
height: 100%;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box; } .A { height: 100px; margin: -100px 0 0; background: #BBE8F2; } .B { height: 100%; background: #D9C666; } </style> </head> <body> <div class="outer"> <div class="A"></div> <div class="B"></div> </div> </body> </html>
2，absolute positioning
- 外层
position: relative； - 百分百自适应元素直接
position: absolute; top: 100px; bottom: 0; left: 0
html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; position: relative; } .A { height: 100px; background: #BBE8F2; } .B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
15，圣杯布局和双飞翼布局（问的我点蒙）
要求：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句
方法1：flex: 0 0 100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {
box-sizing: content-box;
/* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
/* 头、中部、脚纵向显示 */
}
header,
footer {
flex: 0 0 50px;
/* 头、脚尺寸固定，不放大、不缩小 */
background: #3f3f3f;
}
.main {
display: flex;
/*
flex:1 == 1 1 auto：剩余空间放大比例(flex-grow) 空间不足缩小比例(flex-shrink) 分配多余空间之前项目占据的主轴空间(flex-basis)
flex:1指的是：中部区域自由伸缩
auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
*/
flex: 1;
}
.content {
background: red;
height: 1000px;
/*
横向中间内容区自适应，即使未指定宽度，但会分配宽度
块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
*/
flex: 1;
}
.left,
.right {
height: 800px;
background: blue;
flex: 0 0 100px;
/* 左右两列固定宽 */
}
.left {
order: -1;
/* 让left居于左侧 */
}
</style>
</head>
<body>
<header></header>
<div class="main">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
</html>
方法2,float布局
<p>三栏布局</p>
<div>
<div class="main">
<!-- main宽度为100%，撑开占满全屏 -->
<div class="main-wrap">
<!-- main-wrap设置左右margin -->
Main
</div>
</div>
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<style>
.left, .main, .right {
height: 100px;
line-height: 100px;
float: left;
background: #fff;
}
.left {
width: 190px;
margin-left: -100%;
background: #e4e4e4;
}
.right {
width: 230px;
margin-left: -230px;
background: #c90;
}
.main {
width: 100%;
}
.main-wrap {
margin: 0 230px 0 190px;
}
</style>
3，
<p>两栏布局</p>
<div>
<div class="main2">
<div class="main2-wrap">
Main2
</div>
</div>
<div class="left2">
Left2
</div>
</div>
<style>
.main2, .left2 {
float: left;
height: 100px;
line-height: 100px;
}
.main2 {
width: 100%;
background: #fff;
}
.main2-wrap {
margin-left: 200px;
}
.left2 {
width: 200px;
margin-left: -100%;
background: #c60;
}
</style>
