html,css笔试题分享(2)

行内元素有哪些？块级元素有哪些？

行内：a,b,span,input
块级：div,ul,p,h1-h5,li（占单独一行）
空：br,hr
画图解释一下盒模型
margin——>border——>padding——>content

css选择符有哪些？哪些属性可以继承？优先级算法如何计算？

id  #
. class
标签 div p
相邻 ul+div
子 ul>li
后代元素 ul li
通配符  *
属性 a[ herf="xxx" ]
伪类 a:after    a:hover

可以继承的属性：
字体，颜色

优先级算法：
！important  > div   >   class  > tag标签

css3新增伪类：

p:last-of-type         选择其父元素的最后的一个P元素

p:last-child            选择其父元素的最后子元素(一定是P才行)

 

p:first-of-type        选择其父元素的首个P元素

p:first-child           选择其父元素的首个p元素(一定是p才行)

 

p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)

p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)　

 

选第N个

p:nth-child(n)    　　选择其父元素的第N个 刚好是p的元素

p:nth-last-child(n)    ..............................................从最后一个子元素开始计数

p:nth-of-type(n)　  选择其父元素的n个元素

p:nth-last-of-type(n)   ........................从最后一个子元素开始计数

 

 

用在input上

:enabled

:

flex布局的应用场景

比如普通的web布局代替了百分比的布局，微信小程序就是采用flex布局；
弹性布局使用步骤：
		1 定义弹性盒
			display:flex;
		2 确定主轴
			左右排列  flex-direction:row;
			上下排列  flex-direction:column;
		3 主轴对齐方式
			起点  justify-content:flex-start;
			终点  justify-content:flex-end;
			居中  justify-content:center;
			两端有间距 justify-content:space-around;
			两端无间距 justify-content:space-between;
		4 侧轴对齐方式
			起点  align-items:flex-start;
			终点  align-items:flex-end;
			居中  align-items:center;
		5 子元素超出时是否换行
			不换行(默认) flex-wrap:nowrap;
			换行        flex-wrap:wrap;
题外话：flex:0 0 100px;(第一个0是缩放，第二个0是缩小)

清除浮动的几种方式？各自的优缺点？

 1. 添加一个盒子，加入clear：both；（缺点：多了一个盒子）
 2. 给父元素加入overflow：hidden（缺点：很多地方要写）;
 3. 给父元素加上伪元素，div : after { content: "’’; clear：both；display:table；}
 4. 

常见浏览器的内核分别是什么？经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么？常用的hack技巧？

ie，360，搜狗浏览器——8/7/6trident
火狐——Geoko
欧朋——presto
谷歌,safari——webket

关于兼容问题;
解决浏览器默认间距不一致： *{ margin: 0;padding: 0; }
移动端1像素问题：
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
table，td的自动换行：
1.在中设置样式style为word-wrap:break-word;word-break:break-all;（一般情况只需要设置word-break:break-all即可，但是有时候需要加word-wrap:break-word ）
2.把表格的sytle的table-layout：fixed，就是表格固定宽度，就是表格即要自适应他外面的容器，也不要撑出去，然后设置td的word-wrap：break-word；换行，问题就解决了

h5新特性有哪些？如何处理h5新标签浏览器兼容问题？

（常见的）添加了很多标签：canvas可以画图，
语义化标签header，footer，section、nav、aside、article
音频视频：audio、video
本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

处理h5新标签浏览器兼容问题：
ie低级版本不支持header，footer，我们可以document.creaelement(footer),再自己写样式
html5 Shiv 在ie不能用，引用Google的html5.js文件（具体操作shiv）