1.实现三角形：
<style>
#box{
width:0;
height:0;
border:10px solid transparent;
border-top-color:black;
}
#box1{
width:10px;
height:10px;
border:2px solid transparent;
border-top-color:black;
border-left-color:black;
transform:rotate(45deg)
}
</style>
居中：
#box0{
background:red;
width:100px;
height:100px;
display:flex;
justify-content:center;
align-items:center;
}
#box1{
width:10px;
background:black;
height:10px;
}
#box2{
background:red;
width:100px;
height:100px;
position:relative;
}
#box3{
width:10px;
background:black;
height:10px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
#box4{
background:red;
width:100px;
height:100px;
position:relative;
}
#box5{
width:10px;
background:black;
height:10px;
position:absolute;
top:50%;
left:50%;
/* transform:translate(-50%,-50%) */
margin-left:-5px;
margin-top:-5px;
}
通过设置top，left四属性为0居中元素的做法有个前置条件，就是需要居中的盒子必须有固定的宽高(px)，否则会失效。这就像四个方向有相同的力在拉这个盒子，配上margin:auto让这个盒子的位置保持中立，来达到盒子处于正中心的目的
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.2);
}
top:0,left:0,right:0,bottom:0和width:100%和height:100有什么区别
从实现效果上来看，两种做法都能让一个没有宽高的盒子完全填满父容器。
但设置子容器宽高为100%表示继承父容器宽高，即父容器不管多大子容器始终为父容器的百分百。
而设置top:0，left:0，right:0，bottom:0本质目的，是让子盒子四边与父容器间距为0，而子盒子没有明确宽高，自然被拉伸到完全填满父容器了。这也是为何上文中对于让盒子垂直水平居中时必须要有明确宽高的原因。
3. 请写出至少5个html5新增的标签，并说明其语义和应用场景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
4. 请说说你对标签语义化的理解？
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
5. Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6. 你知道多少种Doctype文档类型？
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frames7. HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
8. html5有哪些新特性、移除了那些元素？
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，noframes；
11. 请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
12. 简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
13.Zoom:设置或检索对象的缩放比例。
Block formatting contexts （块级格式化上下文），简称 BFC。
2. 请列举几种可以清除浮动的方法（至少两种）
浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）。
a. 添加额外标签，例如
<div style="clear:both"></div>
c. 父元素设置 overflow：hidden；在IE6中还需要触发hasLayout，例如zoom：1；
d. 父元素设置 overflow：auto 属性；同样IE6需要触发hasLayout
g. 使用:after 伪元素；
e. 父元素也设置浮动
visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
b. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate
c. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。
d. display: none；元素会变得不可见，并且不会再占用文档的空间。
e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。
['kæpɪtəlaɪz]
4. 如何让一段文本中的所有英文单词的首字母大写
text-transform：
none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )
5. 请简述CSS样式表继承
CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下：
文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color
列表相关：list-style-image，list-style-position，list-style-type， list-style
6. 请简述CSS的选择器
元素选择器：* 、E、 E#id、 E.class
关系选择器：E、F、E>F、E+F、E~F
属性选择器：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]
伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
7. CSS伪类与CSS伪对象的区别
CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西
根本区别在于：它们是否创造了新的元素（抽象）
伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
8. 请简述CSS的权重规则
一个行内样式+1000，一个id+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选择器+1
11. CSS中 link 和@import 的区别是什么？
a. link属于HTML标签，而@import是CSS提供的，且只能加载 CSS
b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题
d. link方式的样式的权重 高于@import的权重
e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制
块状元素上下margin和padding无效；
17. 解释下浮动和它的工作原理？
a. 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
b. 浮动元素碰到包含它的边框或者浮动元素的边框停留
25. rgba()和opacity的透明效果有什么不同？
a. opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。
b. 设置rgba透明的元素的子元素不会继承透明效果！
三栏布局：
1.float
<title>浮动实现三栏布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.left{
float: left;
width: 300px;
height: 100px;
background: #631D9F;
}
.right{
float: right;
width: 300px;
height: 100px;
background: red;
}
.center{
margin-left: 300px;
margin-right: 300px;
background-color: #4990E2;
}
</style>
</head>
<body>
<article class="main">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中
<h2>浮动布局</h2>
</div>
</article>
</body>
2. .left{
position: absolute;
left: 0;
width: 300px;
background-color: red;
}
.center{
position: absolute;
left: 300px;
right: 300px;
background-color: blue;
}
.right{
position: absolute;
right: 0;
width: 300px;
background-color: #3A2CAC;
}
Position实现
3、table布局:
首先先写html模版: 这里的html模版和 position使用的html一样,这里就不复制代码了。
table是一种常见的布局方式,他可以将整个页面按照表格的方式设置为多行多列,但是由于书写table标签比较麻烦尤其是涉及到table内嵌table的时候，所以CSS给我们提供了display: table的方式可以让让们方便的使用table布局, 设置子元素为列的属性为display:table-cell
了解了table布局的属性那么就可以写出CSS样式:
.main{
width: 100%;
display: table;
}.left,.center,.right{
display: table-cell;
}.left{
width: 300px;
background-color: red;
}.center{
background-color: blue;
}.right{
width: 300px;
background-color: red;
}
由于table布局本身已经有自己特有的属性,所以我们只需要设置其dispaly属性就可以达到我们的目的。使用起来还是很方便的。
flex布局
当给元素设置display:flex，则该元素就是一个flex容器,其子元素就是容器成员,称之为flex项目,每个项目默认按照从左到右方式排列，所以我们可以很轻松的写出CSS样式:
.main {
display: flex;
}
.left{
width: 400px;
background-color: red;
}
.center{
background-color: blue;
}
.right{
background-color: red;
width: 400px;
}
</总结：1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。
2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局
3、table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息
4、flex布局比较强大,但是还是存在IE上兼容性问题，只能支持到IE9以上
5、grid布局很强大，但是兼容性很差。
1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
2 box-sizing属性？
用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
3 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 比内联优先级高
4 CSS优先级算法如何计算？
元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000
!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。
5 CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
7 display有哪些值？说明他们的作用?
inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block
9 CSS3有哪些新特性？
RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
10 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
12 一个满屏品字布局如何设计?
第一种真正的品字：
三块高宽是确定的；
上面那块用margin: 0 auto;居中；
下面两块用float或者inline-block不换行；
用margin调整位置使他们居中。
第二种全屏的品字布局:
上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。
13 常见的兼容性问题？
不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:原因：a:visited和a:hover的顺序放错了：a标签的四种状态排序原则：love hate原则---l(Link) ov(visited)e h(hover)a(active)te
14 为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
15 absolute的containing block计算方式跟正常流有什么不同？
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
17 display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
18 position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
19 对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC规定了内部的Block Box如何布局。使 BFC 内部浮动元素不会到处乱跑；和浮动元素产生边界。
定位方案：
内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
在正常的文档流中，块级元素是按照从上自下，内联元素从左到右的顺序排列的。
如果我给里面的元素一个 float 或者绝对定位，它就会脱离普通文档流中。
此时如果我们还想让外层元素包裹住内层元素该如果去做？？使 BFC 内部的浮动元素不会到处乱跑，让外层元素产生一个 BFC 。(产生 BFC 的方法 MDN 文档里有写)
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。
满足下列条件之一就可触发BFC
根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
20 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom
21 上下margin重合的问题
在重合元素外包裹一层容器，并触发该容器生成一个BFC。
<div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>
<!--下面是css代码-->
.aside {
margin-bottom: 100px;
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 100px;
height: 200px;
background: #fcc;
}
.text{
/*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
overflow: hidden; //此时已经触发了BFC属性。
}
22设置元素浮动后，该元素的display值是多少？
自动变成display:block
23 移动端的布局用过媒体查询吗？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css样式/}
24 使用 CSS 预处理器吗？
Less sass
25 CSS优化、提高性能的方法有哪些？
避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免！important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则
26 浏览器是怎样解析CSS选择器的？
CSS选择器的解析是从右向左解析的。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
27 在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
28 margin和padding分别适合什么场景使用？
何时使用margin：
需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：
需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。
兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。
29 元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
30 全屏滚动的原理是什么？用到了CSS的哪些属性？
原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
overflow：hidden；transition：all 1000ms ease；
31 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
33 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
34 你对line-height是如何理解的？
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。
35 怎么让Chrome支持小于12px 的文字？
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
39 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：
可以将<li>代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
40 display:inline-block 什么时候会显示间隙？
有空格时候会有间隙 解决：移除空格
margin正值的时候 解决：margin使用负值
使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
41 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0
42 png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
43 style标签写在body后与body前有什么区别？
页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
44 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
持续更新中…
————————————————
版权声明：本文为CSDN博主「Pink李伟」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014697639/article/details/80311559
width：100%和width：auto的区别
width:auto比较聪明，如果margin已经左右占去10px的空间，那么width给的值就是580px。
<style>
div{
width:600px;
overflow:auto;
background:#ccc;}
p{
width:auto;
margin:10px;
background:red;}</style></head><body>
<div>
<p>123</p></div>
</body></html>
如果是width:100%，则说明p的width会得到600px就已经充满div区域，然后自己又有margin，所以会出现滚动条。
div{
width:600px;
overflow:auto;
background:#ccc;
}
p{
width:100%;
margin:10px;
background:red;
}</style></head><body>
<div>
<p>123</p></div>
都是以父元素的宽度为参照。
扫一扫
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
