HTML5+CSS3笔记(二)

一、css基础

派生选择器	ul li	<ul> <li></li> </ul>
id选择器	#main	<div id="main"><div></div></div> 常和派生选择器一起使用:#main div
类选择器	.han	<div class="han"></div>
属性选择器	[title=te]	<div title="te"></div>

更多选择器查看:https://www.w3school.com.cn/cssref/css_selectors.ASP

二、样式的基本讲解

1.背景：background(下面的属性值不止一个)，下面图片样式可以写成综合式

background-image:url("xxx/xxx")	背景图片
background-image:url("xxx/xxx1.png"),url("xxx/xxx2.png"),url("xxx/xxx3.png")	有多个背景图片，最好图片格式是png格式
background-repeat:no-repeat	是否重复
background-position:left left/100px 100px	图片位置
background-attachment:	页面是否固定或者跟随其他部分滚动
background-color:#090909	背景颜色
background-size:100px 100px/宽高	规定背景图片尺寸
:background-origin::border-box/padding-box/content-box	规定背景图片的定位的起始区域(从边框/从内边距/从内容区)
background-clip:border-box/padding-box/content-box	规定背景的绘制区域(背景图包含边框/背景图包含内边距/背景包含内容区域)

2.css样式文本

通过文本属性，可以改变文本的颜色、字符间距、对其文本、装饰文本、对文本缩进

后2个为html5

color:#123456	文本颜色
direction:left/right	文本方向
line-height:12px	行高
letter-spacing:20px	字符间距
text-align:center/right	对齐元素种文本的首行
text-decoration:none/underline	向文本添加修饰，是否有下划线
text-indent:20px	缩进元素文本的首行
text-transform:capitalize/uppercase/lowercase	元素中的字母首字母大写/全部大写/全部小写
unicode-bidi	设置文本方向
white-space	元素种空白的处理
word-spacing	字间距
text-shadow:5px 5px 5px #ff0000	向文本添加阴影
word-wrap:normal	规定文本的换行规则

3.css字体属性

有font-famiy/font-size/font-style/font-weight几种常用的

4.css链接属性

a:link {color:#000000;}	未访问链接
a:visited {color:#00FF00;}	已访问链接
a:hover {color:#FF00FF;}	鼠标移动到链接上
a:active {color:#0000FF;}	鼠标点击时

5.列表属性

list-style:none	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image:	将图象设置为列表项标志。
list-style-position:	设置列表中列表项标志的位置。
list-style-type:	设置列表项标志的类型。
marker-offset:

三、定位/盒子模型

可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的

实际宽度是margin + border + paddint + content 的宽度相加。

IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。怪异盒模型中，父元素的盒模型确定，子元素无法撑开父元素的盒模型。
在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

盒子总宽 = margin + width

四、常用操作

1.尺寸操作

height	设置元素高度
line-height	设置行高
max-height	设置元素最大高度
max-width	设置元素最大宽度
min-height	设置元素最小宽度
min-height	设置元素最小告诉
width	设置元素宽度

2.分类操作

clear	设置一个元素的侧面是否允许其他的浮动元素
cursor:	规定当指向某一元素之上时候显示的指针类型
display	设置是否及如何显示元素
float	定义元素在那个方向浮动
position	把元素放置到一个静态、相对、绝对、固定的位置
visibility	设置元素是否可见或者不可见

3、border边框

border:1px solid/dashed red	边框
border-raduis:20px/1px 1px 1px 1px/上右下左	圆角
border-image	边框图片(九宫格)

4.动画

1>基本动画

        transition-property:    //过渡属性的名称none           //没有过渡属性all             //所有属性都过渡(默认值)property:             //具体属性名称(property1,property2...)transition-duration:    //过渡属性花费的时间秒/毫秒transition-delay:                //过渡效果延迟时间 秒/毫秒transition-timing-function:      //过渡效果速度曲线 运动形式linear       //规定以相同速度开始至结束的过渡效果ease     //规定慢速开始，然后变快，然后慢速结束的过渡效果ease-in      //规定以慢速开始的过渡效果ease-out  //规定以慢速结束的过渡效果ease-in-out   //规定以慢速开始和结束的过渡效果综合写法:transition: property duration delay timing-function;

备注:可以给原来的元素加入过渡元素，这样子就是来回都有过渡，如果给新的元素加入过渡，那只有一次过渡。而且过度要加在有变化的元素身上。

2>自定义动画：

@keyframes name(规定动画名称)0-100%{}(动画时长的百分比)from（与 0% 相同）to（与 100% 相同）可以只有to

代码：

@keyframes attr_3{0%{margin-left:0px;margin-top:0px;}20%{margin-top:0px;margin-left:250px;}40%{margin-left:250px;margin-top:250px;background:#4615d9;}60%{margin-left:0px;margin-top:250px;}80%{margin-left:0px;margin-top:0px;}100%{margin-left:125px;margin-top:125px;background:#fe1616;}}#attr3 .active{animation:attr_3 5s;animation-iteration-count:2;    animation-fill-mode:forwards;   }#attr3:hover .active{animation-play-state:paused;          }

animation-duration(动画执行时间):3s
animation-delay(动画效果延迟时间):3s
animation-timing-function(动画速度曲线): linear / ease / ease-in / ease-out / ease-in-out
animation-play-state(动画执行状态): paused(暂停动画) / running(运行动画)
animation-fill-mode(动画执行过程效果是否可见):none (不改变（默认）) /forwards(当动画完成后，保持最后一个属性值（在最后一个关键帧中定义))
animation-iteration-count(动画执行次数):3;
animation-direction(动画执行方向):normal(正常)/alternate(动画轮流反向播放)

3>图形变换

要用到变换，必不可少的属性就是transform属性，旗下有： translate()移动， rotate(）旋转， scale()缩放， skew()斜的， matrix() 矩阵模型等一系列值，如果是平面变换(2D),在括号里写入x,y两个参数，如果是立体变换就要写入x,y,z三个值，z这个值一般用在手记硬件，保持手机浏览稳定。本节还讲了变换基点的使用，即transform-origin属性。还有景深基点,方位基点perspective-origin。


<!doctype html>
<html><head><!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码--><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--当前页面的三要素--><title>css3-平面立体变换</title><meta name="Keywords" content="关键词,关键词"><meta name="description" content="这是2D，3D变换hs"><!--css,js--><style type="text/css">*{margin:0px;padding:0px;}html,body{ width:100%; height:5000px; font-family:"微软雅黑";background-color: #fbfbfb;}li{list-style: none;}code{font-size:15px;font-family:"微软雅黑";border:1px solid #666;}.btn{font-size:15px;font-weight:300;font-family:"微软雅黑";}.linght{color:red;font-weight:600;}b{margin-left:10px;}a{text-decoration:none;color:red;box-shadow:0 0 3px #000;}a:hover{color:#000;text-decoration:underline;}.common{margin-left:10px;box-shadow: 2px 2px 6px #eaeaea;border:1px solid #eaeaea;}form{margin-left:15px;}/*主页部分*/.paper{width:300px;        }/* ------------------------------旋转--------------------------------- *//*绕x旋转*/.rotatex{width:200px;height:200px;display:inline-block;}/*绕y旋转*/.rotatey{width:200px;height:200px;display:inline-block;}/*绕z旋转*/.rotatez{width:200px;height:200px;display:inline-block;}/* 过度动画 */.common .smallbox{width:100px;height:100px;background:rgb(114,170,232);margin:50px auto;line-height:100px;transition:all 1s;}.rotatex:hover .xzhuan{transform:rotateX(60deg);}.rotatey:hover .yzhuan{transform:rotateY(60deg);}.rotatez:hover .zzhuan{transform:rotateZ(60deg);}/* ------------------------------放大与缩小------------------------- */.scale{width:600px;height:200px;}.scale .scale_con1{width:150px;height:150px;box-shadow:2px 2px 5px #eaeaea;background:rgb(197,182,67);margin-left:100px;margin-top:25px;line-height:150px;text-align: center;transition:1s;display:inline-block;}/* 缩小到原来的0.6倍 */.scale .scale_con1:hover{transform:scale(0.6);}.scale .scale_con2{width:100px;height:100px;box-shadow:2px 2px 5px #eaeaea;background:rgb(197,182,67);margin-left:100px;line-height:100px;text-align: center;transition:1s;display:inline-block;}/* 放大到原来的1.5倍 */.scale .scale_con2:hover{transform:scale(1.5);}/* ------------------------位移------------------------ *//* 垂直与x轴的平面在x轴上移动 */.translatex{width:200px;height:200px;display:inline-block;}/* 垂直与y轴的平面在y轴上移动 */.translatey{width:200px;height:200px;display:inline-block;}/* 垂直与z轴的平面在z轴上移动 */.translatez{width:200px;height:200px;display:inline-block;       }.common .smallbed{width:65px;height:65px;background:rgb(34,180,37);word-break:break-all;transition:1s;}.translatex:hover .xyi{transform:translate(100px,0px);}.translatey:hover .yyi{transform:translate(0px,100px);}.translatez:hover .zyi{transform:translate(100px,100px);}/* -------------------------------倾斜--------------------------- *//* kew()相当于ps自由变换中的倾斜z=-x实现的，skew(xdeg,ydeg),里面有两个值x代表水平倾斜，y代表垂直倾斜。 */.skew{width:600px;height:200px;}.skew .skew_con1{width:150px;height:150px;background: rgb(87,114,213);display:inline-block;margin-left:100px;margin-top:25px;transition:1s;}.skew .skew_con1:hover{transform:skew(30deg,30deg)}.skew .skew_con2{width:150px;height:150px;background: rgb(87,114,213);display:inline-block;margin-left:100px;transition:1s;}.skew .skew_con2:hover{transform:skew(-30deg,-30deg)}/* transform-origin为设置中轴线位置，一旦设定就按照此轴线旋转 */.origin_yuan{width:200px;height:200px;display:inline-block;}.origin_yuan .origin_auto{width:100px;height:100px;margin:20px 60px;}.origin_yuan .origin_auto .origin_yuan_con1{width:60px;height:60px;box-shadow:inset 0 0 6px #666;-webkit-transition:1s;transition:1s;}.origin_yuan:hover .origin_auto .origin_yuan_con1{transform:rotatex(48.8deg);}.origin_yuan .origin_auto .origin_yuan_con2{width:60px;height:60px;box-shadow:inset 0 0 6px #666;}.origin_xin{width:200px;height:200px;display:inline-block;}.origin_xin .origin_auto{width:100px;height:100px;margin:20px 60px;}.origin_xin .origin_auto .origin_xin_con1{width:60px;height:60px;box-shadow:inset 0 0 6px #666;-webkit-transition:1s;transition:1s;}.origin_xin:hover .origin_auto .origin_xin_con1{transform:rotatex(48.8deg); transform-origin:bottom;}.origin_xin .origin_auto .origin_xin_con2{width:60px;height:60px;box-shadow:inset 0 0 6px #666;}/* perspective-origin景深基点 在什么方位去看,符合近大远小 */   .origin_perspective_yuan{width:200px;height:200px;display:inline-block;}.origin_perspective_yuan .origin_auto{width:100px;height:120px;margin:40px 60px;}.origin_perspective_yuan .origin_auto .perspective_yuan_con1{width:60px;height:60px;box-shadow:inset 0 0 6px #666;transform:rotatex(-60deg); transform-origin:bottom;}.origin_perspective_yuan .origin_auto .perspective_yuan_con2{width:60px;height:60px;box-shadow:inset 0 0 6px #666;      }   .origin_perspective_xin{width:200px;height:200px;display:inline-block;perspective: 800px;}.origin_perspective_xin .origin_auto{width:100px;height:120px;margin:40px 60px;}.origin_perspective_xin .origin_auto .perspective_xin_con1{width:60px;height:60px;box-shadow:inset 0 0 6px #666;transform:rotatex(-60deg); transform-origin:bottom;}.origin_perspective_xin .origin_auto .perspective_xin_con2{width:60px;height:60px;box-shadow:inset 0 0 6px #666;      }/* 3D旋转 */.trans_style{width:300px;height:300px;perspective: 800px;}.trans_style .trans_style_warp{width:100px;height:100px;position:relative;left:150px;top:80px;transform:rotatex(20deg);transform:rotatey(20deg);transition:5s;transform-style:preserve-3d;transform-origin: center center -50px;/*保持轴线在中心点上*/}.trans_style .trans_style_warp div{width:100px;height:100px;position:absolute;}.trans_style .trans_style_warp div:nth-child(1){width:100px;height:100px;box-shadow:inset 0px 0px 100px #444;}.trans_style .trans_style_warp div:nth-child(2){width:100px;width:100px;box-shadow:inset 0px 0px 100px #444;transform:translatez(-100px);}.trans_style .trans_style_warp div:nth-child(3){width:100px;height:100px;box-shadow:inset 0px 0px 100px #444;left:-100px;transform:rotatey(-90deg);transform-origin:right;}.trans_style:hover > div{transform: rotateY(180deg);}</style></head><body><h4>摘要:</h4><div class="common paper">要用到变换，必不可少的属性就是transform属性，旗下有：translate()移动，rotate(）旋转，scale()缩放，skew()斜的，matrix() 矩阵模型等一系列值，如果是平面变换(2D),在括号里写入x,y两个参数，如果是立体变换就要写入x,y,z三个值，z这个值一般用在手记硬件，保持手机浏览稳定。本节还讲了变换基点的使用，即transform-origin属性。还有景深基点,方位基点perspective-origin。</div><br><br><hr><hr><h3>1.2D变换</h3><h4>(1)transform:rotate()旋转</h4><h5>--①rotateX()旋转</h5><pre class="btn">2D变换，里面填一个值，单位deg，即rotateX(xdeg),+xdeg是以中轴线x顺时针方向旋转，-xdeg则相反。</pre><h5>--②rotateY()旋转</h5><pre class="btn">2D变换，里面填一个值，单位deg，即rotateY(ydeg),+ydeg是以中轴线y顺时针方向旋转，-ydeg则相反。</pre><h5>--③rotateZ()旋转</h5><pre class="btn">2D变换，里面填一个值，单位deg，即rotate(zdeg),+zdeg是以中心点顺时针方向旋转，-zdeg则相反。</pre><h4>以下是三个案例</h4><div class="common rotatex"><div class="smallbox xzhuan">rotateX()旋转</div></div><div class="common rotatey"><div class="smallbox yzhuan">rotateY()旋转</div></div><div class="common rotatez"><div class="smallbox zzhuan">rotateZ()旋转</div></div><br/><b class="linght">备注:rotateZ()和rotate()的效果一样。</b><br><br><hr><hr><h4>(2)transform:scale()缩放</h4><pre class="btn">括号可填浮点数，代表倍数的意思,如果是1代表不缩放，大于1代表放大，小于1代表缩小。</pre><h4>案例</h4><div class="common scale"><div class="scale_con1">缩</div><div class="scale_con2">扩</div></div><h4>(3)transform:translate()位移</h4><pre class="btn">translate()与margin:类似，但是，前者用于移动端的位移比较多。translate(x,y),里面有两个参数x,y。x代表上下移动，y代表左右移动，x,y都有代表斜着移动。</pre><h4>以下是三个案例</h4><div class="common translatex"><div class="smallbed xyi">上下移动translate()</div></div><div class="common translatey"><div class="smallbed yyi">左右移动translate()</div></div><div class="common translatez"><div class="smallbed zyi">斜着移动translate()</div></div><h4>(4)transform:skew()倾斜</h4><pre class="btn">skew()相当于ps自由变换中的倾斜z=-x实现的，skew(xdeg,ydeg),里面有两个值x代表水平倾斜，y代表垂直倾斜。</pre><h4>以下是三个案例</h4><div class="common skew"><div class="skew_con1"></div><div class="skew_con2"></div></div><b class="以上四点括号内可以写上三个值，x,y,z。表示三个角度,开通z的角度"></b><h4>(5)transform-origin</h4><pre class="btn">transform-origin基点变换,通过设置坐标值和关键值变换，展示效果，配合rotate()旋转属性,然后根据元素方位灵活运用,值有left right top bottom。</pre><h4>以下是变换案例</h4><div class="common origin_yuan"><b class="btn">默认中心轴线transform-origin</b><div class="origin_auto"><div class="origin_yuan_con1">1</div><div class="origin_yuan_con2">2</div></div></div><div class="common origin_xin"><b class="btn">底部轴线transform-origin:bottom;</b><div class="origin_auto"><div class="origin_xin_con1">1</div><div class="origin_xin_con2">2</div></div></div><h4>(6)perspective-origin</h4><pre class="btn">景深基点 在什么方位去看,符合近大远小。</pre><h4>以下是变换案例</h4><div class="common origin_perspective_yuan"><div class="origin_auto"><div class="perspective_yuan_con1">1</div><div class="perspective_yuan_con2">2</div></div></div><div class="common origin_perspective_xin"><div class="origin_auto"><div class="perspective_xin_con1">1</div><div class="perspective_xin_con2">2</div></div></div><br><br><hr><hr><h3>2.3D变换</h3><h4>transform-style</h4><pre class="btn">变换风格transform-style:preserve-3d和 景深perspective(近大远小),这个属性主要写在外边盒子上a)浏览器默认2D变换场景，是无法体现出3D变换样式的，所以在3D变换时要加上这两个属性</pre><h4>例子</h4><div class="common trans_style"><div class="trans_style_warp"><div>1</div><div>2</div><div>3</div>  </div>        </div><b class="linght">备注:transform-style:preserve-3d在过渡的时候保持结构不变,这是3d结构的特性。</b></body></html>

下面是一些面试题：

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 单选框或复选框被选中。

6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

div：

border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;

浮动元素的上下左右居中：

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

绝对定位的左右居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

还有更加优雅的居中方式就是用flexbox，我以后会做整理。

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

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

8 position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

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上也完美支持。

11 用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

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;将其转化为行内属性。
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
14 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

15 absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
否则,则由这个祖先元素的 padding box 构成。
如果都找不到，则为 initial containing block。

补充：

static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
absolute: 向上找最近的定位为absolute/relative的元素
fixed: 它的containing block一律为根元素(html/body)
16 CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
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如何布局。
定位方案：

内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的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。

1
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
32 视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
jQuery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高
插件实现方式
例如：parallax-scrolling，兼容性十分好
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 的文字？

1
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
36 让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

37 position:fixed;在android下无效怎么处理？

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
38 如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

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时候，溢出隐藏。

45 阐述一下CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

HTML5+CSS3笔记(二)相关推荐

最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 ...
html 对p中一段话指定样式,HTML5学习笔记(二)
一.常用标签 1.< p> 标签:段落标签,用来显示一段文本段落文本 2.< h> 标签:从 h1-h6字体越来越大.标题标签. 一级标题二级标题三级标题四级标题五级 ...
尚硅谷web前端HTML5+CSS3笔记
目录 1尚硅谷-课程简介 2尚硅谷-网页简史 3尚硅谷-HTML简史 4尚硅谷-编写你的第一个网页 5尚硅谷-安装notepad++ 6尚硅谷-自结束标签和注释 7尚硅谷-标签中的属性 8尚硅谷-文档 ...
HTML5+CSS3笔记
文章目录 HTML5新增特性: CSS3新增特性: **属性选择器** **结构伪类选择器** 伪元素选择器 2.盒子模型: CSS3 弹性盒子(flex box) **flex-direction: ...
HTML5学习笔记二 HTML基础
一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...
html5 css 笔记,HTML5+CSS3笔记
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? emmet语法? IE 9 + H5新增的语义化标签除了ie,这些标签默认是块元素header :定义页面头部 nav ...
HTML5/CSS3笔记
前言: 前端无非就是围绕标签.属性.属性值这三个词展开的. (标签也可以叫做元素, 元素的内容是开始标签与结束标签之间的内容) *常规标签 <标签属性1="属性值1" 属性 ...
html5+css3笔记整理
目录 day1 01-标题 02-段落标签 03-文本格式 04-图片标签 05-音频标签 06-视频标签 07-链接标签 day2 01-列表-无序 02-列表-有序 03-列表-自定义 04-列表 ...
2022最新html5+css3笔记
VsCode快捷键 Chrome调试工具思维导图 Html 渲染引擎渲染引擎:浏览器中,专门用来对代码进行解析渲染的部分. Can I use 注意:渲染引擎不同,导致解析相同的代码,速度,效果也 ...

HTML5+CSS3笔记(二)

HTML5+CSS3笔记(二)相关推荐

最新文章

热门文章