html+css常见问题与解答

html+css常见问题

	1、display:block；
	2、给img加float:Left；
	3、给img添加vertical-align：top/middle/bottom;
	4、给body添加font-size：0；
		<!--2.如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中？-->
	1、给盒子添加text-align：center；让图片水平居中
	2、给盒子加line-height，值等于盒子的高度，主要是图片需要借助行高来移动	自己垂直方向的位置。
	3、给图片本身添加vertical-align：middle；实现垂直居中。	
		<!--3.元素的类型分类哪几种？各自都有什么特点？-->
	1、块元素 block
	特点：独占一行，竖着排；可以设置宽高和margin/padding值，还可以作为其他元素的父级。
	2、行内元素inline
	特点：文本一行显示，默认情况下，不能设置宽高，其中margin和padding只有左右有效，上下无效
	3、行内块元素 inli-block
	特点：既有块状元素的特点，又有行内元素特点。与其他元素待在一起的时候，会产生默认的间距。
	           专有属性 vertical-align：top/middle/bottom；
	作用：a解决图片撑大3像素的问题；b实现图片水平垂直居中
	4、可变元素
	给任何元素添加float，相当于就display：block；
		<!--4.如何实现一个元素消失和出现？-->
	1、display：none；让一个元素消失，而且消失的很彻底；display：block；让一个元素出现。

2、opacity：0； opacity：1；

步骤：
1、给元素加width；
2、让文本一行显示，就加white-space：nowrap；
3、让超出宽度之外的内容隐藏，就加overflow：hidden；
4、添加省略号 text-overflow：ellipsis；

定位：position
(1)绝对定位absolute 脱离文档流
(2)相对定位relative 没有脱离文档流
(3)默认值：static 脱离文档流
(4)固定定位fixed 脱离文档流
(5)粘性定位：sticky 没有脱离文档流

		<!--7.样式引入的方式有哪几种，请写出来。-->
	1、行内样式
	2、内部样式
	3、外部样式
	4、！mportant引入
		<!--8.transition过渡动画使用的过程中要注意一些什么？-->
	1、	transition属性必须配合hover使用才行
	2、a：当transition给到hover时，鼠标移入是有效果，鼠标移出是没效果。
		b：当transition给到自己的时候鼠标移入和鼠标移出都有效果
		<!--9.用边框写出一个箭头超右的三角形-->
	步骤：
		1、div1{
			border-left：100px solid red
			border-right：100px solid transparent；（透明色）
			border-top: 100px solid transparent；
			border-bottom: 100px solid transparent；
			width：0px；
			height：0px；
		}
		<!--10.可以取负值的css属性有哪些？-->
	1、	margin：  left  top
	2、position
	3、text-indent 首行缩进
	4、z-index；
	5、text-shadow：文字阴影      第一个和第二个值
	6、box-shadow：
	8、transform:rotate:(-50deg)		旋转50度
	9、transilate
	10、order
		<!--11.请写出一个宽高200*200的盒子在一个宽高500*500的盒子里面水平垂直居中。请写出5种方法。-->
	1、margin
	2、padding
	3、position
	4、定位margin-left：50%；margin-top:50%; margin-left宽度的一半，margin-top的宽度一半；
	5、五马分尸法：position left：0； top：0；right：0； bottom：0； margin：auto；
	6、弹性盒子布局 display：fiex；  jusify-contnet:centre;  align-items:center
	7、定位position  top:0; left:0; transifom:translate(-50%,-50%)？？
		<!--12.当子元素使用margin-top，导致父元素整个下移，解决方案有哪些？-->
	1、给盒子加一个上边框：border-top：1px solid #fff；
	2、给父元素添加一个：overflow：hidding；（推荐）
	3、给父元素子元素加一个float：left；（不推荐，会出现新的问题）
	4、把margin换成padding
		<!--13.子元素都设置浮动，父元素没有设置高度，出现高度塌陷的问题，解决方案有哪些？-->
	1、给父元素一个高度（只适合做固定高度的布局）
	2、在下面添加一个空的div 并且设置float：left；（以前比较流行的写法，但会有代码冗余的问题）
	3、万能清除法：给父元素后面添加伪对象
	.clearfloat:after{
		display:block;
		clear:both;
		content:"";
		visibility:hidden;
		height:0;
		overflow:hidden;
	}
	兼容ie6的为：zoom：1；
	4、overflow:hidden;
	5、overflow:auto;
		<!--14.透明度的属性是什么？请也写上它的兼容写法？-->
	1、opacity：0.3；
	2、filter：alpha（opacity=30）；（兼容ie6的写法）
		<!--15.什么是BFC？BFC的触发条件有哪些？-->
	1、块级格式化上下文.  它是一个独立的渲染区域，
		具有bfc特征的元素可以看作是隔离了的独立的容器，
		容器里面的元素不会在布局上影响到外面的元素，
		并且bfc具有普通容器所没有的一些特征。	
	2、	a：根元素html
		b：float属性不为none
		c：position为absolute或fixed
		d: display为inline-block，table-cell，table-caption，flex，inline-flex
		e：overflow不为visible
		<!--16.请写出一个两栏布局的页面，要求左边固定宽，右边自适应，请问怎么实现？-->
	1、左边固定宽度
	2、右边不给宽度添加一个overflow-heidden;可实现右边自适应宽度。
	弹性盒布局：左边固定宽 右边添加一个flex：1；
		<!--17.如何解决margin上下值发生重叠的问题？-->
	1、 给一个盒子套一个盒子  触发BFC功能 可以添加ovrflow-heidden;			
		<!--18.怪异盒是怎么产生 的？它有什么特点？如何有w3c标准盒模型变成怪异盒模型？-->
	有DOCTYPE缺失，导致在ie6/ie7/ie8中出现怪异盒模式
	标准：总宽度=width+padding+border+margin
	怪异：总宽度=width+margin（即width包含padding和border）
								padding和border不计算在原有的宽高上面
				box-sizing：border-box；
		
			
		<!--19.H5有哪些特点？H5新增加了哪些标签？（写6个）-->
(特点)
	1、更简洁、但是在实际开发中要注意书写规范，有利于后期的维护
	2、标签语义化
	   语义化的重要性：
	   a：当页面加载失败的时候，还能呈现出清晰的结构
	   b：有利于seo优化，利于被搜索引擎收录（即便于网络爬虫的识别）
	   c:在项目开发及维护时，语义化的也很大程度上降低开发难度，节省成本
	3、语法更宽松
	4、多设备跨平台
	5、自适应网页设计
（新增标签）
	a.header  b.footer  c.nav  d.mark  e.embed  f.video  g.audio
		<!--20、用自己的话描述一下什么是渐进增强和优雅降级。-->
	1、一开始兼容的是低版本浏览器，逐渐的优化兼容高版本浏览器。
	2、一开始兼容的是高版本浏览器，逐渐兼容低版本的浏览器
		<!--21、说一下什么是css样式的层叠。-->
	1、CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，
		选择应用权重高的CSS选择器所指定的属性，一般也被描 述为权重高的覆盖权重低的，
		因此也称作层叠。
	2、层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
		<!--22、w3c标准盒模型包含哪些？-->
	margin border padding 内容 
		<!--23、哪些css属性可以被继承？请说出10个。-->
	font-weight：  text-indent： font-size： text-align： line-height：
	list-style-type  list-style-position  list-style-image  color： font-style
	
		<!--24.图片整合是用什么技术实现的？图片整合技术有哪些优势？-->
	1、（图片整合技术）css精灵  雪碧图
	    将导航背景图片，按钮背景图片等有规则的合并成一张背景图，
	    即将多张图片合为一张整图，然后用background-position来实现
	    背景图片的定位技术。
	   （实现 图片整合的方法和技巧：a使用ps进行小图片整合；b使用相关软件来进行操作。
	2、优势：a、通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。
			b、通过整合图片来减少图片体积。
			
	（必考）	<!--25.CSS3新增加的属性有哪些特点？请写出你知道的css3的属性。（至少6个）-->
	特点：
		a：让页面效果看起来非常炫酷，用户体验更高。
		b：有利于开发和维护，还能提高网站的性能，增加网站的可访问性，可用性。
		c：使网站能适配更多的设备，利于seo网站优化，提高网站的搜索排名。
	属性：border-raidus（设置圆角）
		background-size（指定背景中图像的尺寸；）
		text-shadow：5px 5px 5px #f66；文字阴影
		box-shadow：让盒子在显示的时候产生阴影效果
		word-break：使用该属性自己决定自动换行的处理方法
					参数：normal（默认样式）
					/	：keep-all（不允许字断开）
					/	：break-all（允许在单词内换行）
		word-wrap：normal/break-word;属性用来标明是否允许浏览器在单词内进行断句			
		<!--26.背景大小属性里面，哪一个属性值不会让背景图被裁切？-->
		background-size：cover/100%；把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无
									法显示在背景定位区域中。但这种方法会致使背景图片失真。
		background-size：contain；（不会被裁切保证原图按照尺寸方法）
		<!--27.transition和animation之间有什么共同点和不同点？-->
	相同点：都是随着时间改变元素的属性值。
	不同点（a）transition需要触发一个事件（hover事件或click事件等）才会随着时间改变其css属性
		(b)而animation在不需要触发任何事件的情况下也可以显示的随着时间变化来改变元素css的属性值，
			从而达到一种动画的效果，css3和animation就需要明确的动画属性值。
		<!--28.请问transform:translateX(100px) rotate(90deg);
		和transform:rotate(90deg) translateX(100px);的结果是一样的吗？为什么？-->
	结果不一样，两者之间的轴系发生了改变 一个是先改变再旋转 第二个是先旋转再改变


                           “ 如有不对的地方请大佬们多多指教”