HTML问题总结

1.隐藏元素 - display:none或visibility:hidden“*”是通配符，在CSS样式里面是代表所有标签，
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，虽然被隐藏了，但仍然会影响布局。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。
2.重叠的元素

• 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）一个元素可以有正数在前或负数在后的堆叠顺序：
• 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。clip:rect(top,right,bottom,left);
  3.元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear:both; 属性。
  4.让 line-height 属性值和 height 属性值相等来设置 div 元素居中
  5.list-style-type:none - 移除列表前小标志。
  6.“*”是通配符，在CSS样式里面是代表所有标签，
  7.径向渐变是从“一个点”向四周的颜色渐变。
  其语法如下：background: radial-gradient(center, shape, size, start-color, …, last-color);center：
  渐变起点的位置，可以为百分比，默认是图形的正中心。
  shape：渐变的形状，
  ellipse表示椭圆形，
  circle表示圆形。
  默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
  size：渐变的大小，即渐变到哪里停止，它有四个值。
  closest-side：最近边；
  farthest-side：最远边；
  closest-corner：最近角；
  farthest-corner：最远角
  8.为a设置text-align属性后 为什么看不出网页中的链接有什么变化
  这个text-align:center;是说：超链接a标签内的文字居中对齐；如果超链接a标签没有固定宽度是不会显示居中对齐的；9.a标签会经常使用到，href属性值通常需要给一个空连接1、
  2、
  3、
  10.h5元素垂直居中方法
• 设置padding,上下px设为相同
• 让 line-height 属性值和 height 属性值相等来设置 div 元素居中
• position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%)不知宽高
• position:relective;然后top设置px;
  11.position:relative是指元素相对于在文档流中位置进行移动的，而不是以父元素为基准进行移动的。
  12.子DIV块中设置margin-top时影响父DIV块位置问题问题：
  给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。
  解释: 给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。
  毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
  提供这样几种方法：
• 让父级具有“包裹性”将父级over-flow设为hidden
• 将父级display设为inline-block将父级float或absolute改变父级的结构给父元素设置padding给父元素设置透明border
  13.H5图片显示方式解决方案（图片不变形显示、图片裁剪、自适应）
  方案一：当图片高度大于宽度时，将宽度设置为100%，超出的高度隐藏并垂直居中。
  方案二：当图片宽度大于高度时，将高度设置为100%，超出的宽度隐藏并水平居中。ps：.imgs写在父块中 。.heightLong写在img里或子块中。
  14.text-align: center;div内文本居中,对于span设置起作用必须写在对应父类的div中
  15.当盒子有宽高的时候 设置padding会导致盒子宽高变化。。如果盒子没有宽度，它是继承了父亲盒子的宽度100%，所以不会因为设置padding而导致撑开盒子。
  16.行内元素和块级元素的区别：
  行内元素：与其他行内元素并排不能设置宽高，默认的宽度就是文字的宽度
  块级元素：霸占一行，不能与其他任何元素并列。能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
  块级元素和行内元素的分类在HTML的角度来讲，
  标签分为：　　　　
  文本级标签：p , span , a , b , i , u ,em　　　　容器级标签：div , h系列 , li , dt ,dd　　　　p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。　　
  从CSS的角度讲，CSS的分类和上面的很像，就p不一样：　　　　
  行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。　　　　
  块级元素：所有的容器级标签，都是块级元素，以及p标签。
  17.当div标签的display 为 inline-block;为什么会出现默认的边距？
  解决办法：在写代码时 设置为inline-block的标签不添加换行；或者：在标签之间加上注释
  18.div中的img和div顶部有一小段距离的处理方法：
  方法一：定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。
  方法二：定义容器里的字体大小为0。
  原因：图片文字等inline元素默许是和父级元素的baseline对齐的，而baseline又和父级底边有必定间隔（这个间隔和 font-size，font-family 相关），所以设置 vertical-align:top/bottom/text-top/text-bottom 都能够防止这种状况呈现。而且不光li，其他的block元素中包括img也会有这个景象。19.margin-block-start 属性有着和 margin-left 属性一样的值.
  20.css3 实现鼠标放上去图片外框架放大
  
  

css代码 .img-box{ width: 390px; height: 296px; overflow: hidden; //这个一定要加上 不然就不是 外框不变里面变大了 } .img{ display: block; width: 100%; height: 100%; transition: all 1s; } .img:hover{ transform: scale(1.4); //放大 倍数随意} 21. 标签为 input 元素定义标注（标记）。 22.伪类元素要配合content属性一起使用:before 和 :after 的主要作用是在元素内容前后加上指定内容。。 ：after清除浮动. :before和:after 用来写小三角形23.text-transform 属性控制文本的大小写。24.vertical-align: middle;没有用原因25.translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 26.select 元素可创建单选或多选菜单。