一些HTML和CSS面试题

发表于 | 分类于 |

如何清除一个标签的子标签的浮动

清除浮动的几种方法：

  • 父元素有高度，此时就没有浮动的影响了
  • 父元素如果不愿意设置固定死的高度，而是自动适配，就写overflow:hidden;_zoom:1;
  • 后面的元素父盒子加上clear:both;盒子还是没有高度，margin失效；
  • 两个盒子之前加上一个<div class="cl"></div> .fl{clear:both}，隔墙法，盒子还是没有高度，但是marign有用。
  • 盒子加上::after{content:"",clear:both;} ，内墙法，这个元素自己最后的子元素是一个标准流元素，所以一下子给这个父盒子撑高了。

描述一下浮动会造成什么影响，如何居中一个浮动元素

  • 【脱标】：浮动的元素脱离标准文档流。【贴边】：左浮动就会紧贴父元素左边，右浮动贴右边。【字围】：文字会环绕这个浮动元素。【收缩】：不区分行内元素和块级元素了，原来的行内元素现在可以设置宽度和高度，原来的块级元素如果不写width现在会自动缩进为内容宽度。
  • 浮动的元素要想居中，必须定位。利用margin-left:50%; left: - 1/2width。
1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
	div{
		float: left;
		width: 500px;
		height: 100px;
		background-color: orange;
		position: relative;
		margin-left: 50%;
		left:-250px;
	}
</style>

原理：margin-left:50%;此时元素的左边线就会到屏幕中线，拉回自己的width一半即可。所以要用相对定位拉动。或者transform:translate(-50%,0);

简单说明绝对定位和浮动的区别和应用。

  • 绝对定位脱离标准文档流，它的参考点是文档的左上角或者右上角。如果有任何父元素有定位属性，此时就依据“子绝父相”规则来设置自己的定位参考元素。在做网页时候非常的灵活方便。制作覆盖效果的时候，会大量使用绝对定位。

  • 浮动脱离标准文档流，通常用于制作并排显示的元素，通常用于大的布局，或者无序列表比如图片的并排。可以使用clear:both;属性让标准流中的其他元素在此之后依次排列。

行内元素和块级元素的区别，行内元素有哪些，块级元素有哪些

行内元素不能设置宽度、高度，但是能并排显示，浏览器视行内元素是“文本流元素”。span、a、em、b、u、i。

块级元素能设置宽度、高度，但是不能并排显示。div、h1、ul、p、li、section、header。

CSS引入的方法有哪些？都有什么区别

1
2
3
4
外链式<link href="1.css" type="text/css" rel="stylesheet" />
内嵌式<style type="text/css"></style>
导入式<style>@import url(1.css)</style>
行内式<div style="width:200px;background:red;"></div>

外链式方便多个网页同时使用一个样式表。

内嵌式速度快，但是改版麻烦，可以减少HTTP请求。

导入式不好用，因为页面首先加载，然后导入样式表，页面在1s~2s内会有没有样式表的情况，然后突然有了样式。因为link引用CSS时，在页面加载时同步加载；而@import在页面加载完后才开始对对应CSS进行加载。

行内式通常用于开发时候的临时测试，语义不清晰，不能使用。

在书写高效CSS时，需要考虑哪些问题？

基本原则是：去掉不必要的样式、合并相同的样式、尽可能缩小样式的大小。多用公共类，让css变得不臃肿。

比如：gulp中有一个插件叫做gulp-csso，可以智能合并相同的样式，比如div p{font-size:10px;color:green;} p{color:green;} 它会智能变为：div p{font-size:10px;} p{color:green;}。

简述一下什么是内容与表现分离

HTML就是负责语义，其他什么都不需要管。HTML不要用b、u、i来设置加粗、下划线、倾斜，而是写font-weight:bold; text-decoration:underline; font-style:italic; 用CSS来表示。再比如，logo可以用h1，用背景替换文字来呈递图片。text-indent:-999em;

CSS层叠是什么

CSS全名叫做层叠式样式表，cascading style sheet，cascading就是层叠的意思。层叠具体有两层含义：

  1. 比如一个标签它可以通过多种手段给他添加属性。
    1
    2
    3
    4
    5
    6
    #logo{}
    .spec{}
    h1{}
    body{}

    <h1 id="logo" class="spec"></h1>

此时这个标签就被多个选择器添加属性，如果属性有冲突，CSS有精确的权重计算方法来确定“听谁的”。

  1. 一个选择器可以同时作用在多个标签身上，也有一些属性可以继承下去。使标签是由多个选择器共同影响而来。此时CSS就可以写的很精简。

浏览器是如何根据CSS选择器选择对应元素的

#表示id，浏览器会寻找拥有id的元素。.表示类名class属性，空格表示后代，> 表示子元素,+ 表示下一个兄弟 ， ~后面所有兄弟。

选择器 权重
ID选择器 100
类选择器 10
标签选择器 1
属性选择器 10
各种伪类选择器 如:link， :visited， :hover， :active， :target， :root， :not等 10
各种伪元素 如::first-letter,::first-line,::after,::before,::selection 1

!important优先级最高，高于上面一切。* 选择器最低，低于一切。

在HTML代码中如何做SEO

h标签合理使用，strong标签语义比较强，合理使用。
title、<meta name="description" />、<meta name="keywords" />要合理设置
a标签要写title，img要写alt
div要有合理类名，比如.content、.header、.address，便于搜索引擎爬虫检索
HTML层次清晰，id不要重复，便于搜索引擎爬虫检索

CSS怎样判断不同分辨率显示不同宽度布局，从而实现自适应宽度

  • 使用百分比布局，用百分比来写宽度、marign、padding
  • 使用em当做单位，写一段JS让html根元素的字号随着浏览器宽度的变化而等比例变化
  • 使用媒体查询，<link href="1.css" media="screen and (min-width=900px)" />

一个页面（HTML）由哪几部分构成？分别是什么？作用是什么

由head和body构成。

head里面放置一些配置信息，比如配置title、keyword、description、charset等等信息，不会显示在浏览器中。

body是内容，会显示在浏览器的屏幕中。

为什么利用多个域名来存储网站资源会更有效

CDN，表示让用户从离自己最近的下载点下载资源。

突破服务器的带宽限制。

节约主域名的连接数，提升并发。

更加安全，比如静态资源服务器上面，不能运行任何代码的。

谈谈对CSS Sprites技术优缺点的理解。

CSS精灵技术，优点就是减少HTTP的请求数量，加快网页渲染速度。便于一整套更换，比如圣诞节了，此时可以改变CSS中的各种按钮、logo变成圣诞风格，一下子全变了。

缺点就是不能随意改变之前已经在精灵上面的图片的位置，做repeat-x、repeat-y精灵难以实现。做先导小符号的时候，精灵要靠边。

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

1
2
3
4
5
6
7
8
把上、左、右三条边隐藏掉（颜色设为 transparent）
  #demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: yellow red blue gray;
  }

html5有哪些新特性

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API

拖拽释放(Drag and drop) API

本地离线存储

表单控件，calendar、date、time、email、url、search

------ 本文结束 ------
0%