html+css常见问题总结

1.块元素和内联元素的区别

区块元素：每个元素独占一行；支持所有的样式；不设置宽度时宽度等于父元素宽度；换行符不会解析；
内联元素：在一行有空间时，多个元素可以在同一行显示；不支持宽高样式，使用上下margin和padding等样式会出现问题；宽度由内容（文字图片等）撑开；换行符会被解析（不同浏览器下显示的宽度也不同） 注：p元素下不可嵌套任何区块元素，放区块元素，内容会被截断。

2.替换元素和不可替换元素

替换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如： <img src=”cat.jpg” /><input type="submit" name="submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。 可替换元素也在其显示中生成了框。

不可替换元素

html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

例如： <p>段落的内容</p>段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

3.盒子模型有几种？区别是什么？

盒模型有border-box,content-box(默认),padding-box;
（1）border-box：设置的宽高为整个盒子除了margin之外的大小
（2）content-box：设置的宽高为内容部分
（3）padding-box: width 和 height 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 5.0中被删除。

4.CSS选择器的优先级

id选择器>class选择器=伪类选择器>标签名选择器

5.隐藏元素的方法有哪些？

（1）display:none;
（2）visibility:hidden;
（3）opacity 设为 0;
（4）position 设为 absolute 然后将位置设到不可见区域
（5）Clip-path 该属性很少见，该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。此外，这个属性能够使用各种过渡动画来实现不同的效果。在IE中是完全不支持的

区别：

1. display:none在隐藏元素时，将其占位空间也去掉，子元素也会一同从盒子模型中消失。jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。
   
2. visibility:hidden类似opacity属性，只是隐藏了内容，而其占位空间仍然保留，与 opacity 唯一不同的是它不会响应任何用户交互，元素在读屏软件中也会被隐藏。 如果一个元素的 visibility被设置为hidden，但是想要显示它的子元素，只要给想要显示的子元素添加visibility：visible;