HTML与CSS常见问题总结
HTML
1.结构分类
HTML结构层————html标签
CSS样式层————html标签的修饰
js行为交互层————动态的交互效果
2.规则
做到结构样式行为的分离
3.HTML与HTML5
HTML————超文本标记语言
HTML5————超文本标记语言的第五个版本
4.元素按显示类型分类
行内元素：默认横向显示，不能设置宽度和高度
eg: a, b, strong, i, em, s, del, span, u, sup, sub, font
块级元素：默认纵向排列，默认占宽一整行， 并且能设置宽度高度
eg: div, p ,h1~h6, ul, ol, li, dl, dt, dd ,table, form, hr, fieldset, legend
行内块元素：既有行内元素的特点，又有块级元素的特点
eg: input, img, textarea, select
CSS
1.使用位置：
行内样式，内部样式，外部样式<link rel="stylesheet" href="CSS路径">
扩充另一个样式表
<style> @import url(CSS文件路径); </style>
两个样式表的对比：
a.本质不同：link是html语法，@import是css语法
b.兼容的不同：link能兼容所有浏览器，@import兼容性不是特别好
c.代码的加载顺序：link加载是同时加载，@import加载页面时是先加载结构后加载样式，有抖动的情况
d.操作dom不同，目前操作dom的时候，大部分是通过link操作js的样式的，@import不能操作样式
2.样式优先级
!important > 行内样式 > 内部样式 > 外部样式
3.选择器
id：#unique { }
类：.box { }
标签：a[title] { }
通配符：* { }
后代：article p
子代：article > p
伪类：a:hover { }
4.选择器的优先级
id > 类 > 标签 > 通配符
100 > 10 > 1 > 0
!important > 行内样式 > id > 类选择器 > 标签 > 通配符选择器
5.隐藏文本
如何实现在不隐藏元素的情况下隐藏元素中的文本？
text-indent: -9999px
font-size: 0px
6.属性取负值
text-indent, z-index, margin, transform:scal(数值),
定位的偏移属性的取值：top, bottom, right, left
order:(提高排列顺序)（移动端内）
7.浮动的取值
float: left/right/none
作用：用来让盒子横向显示，应用于布局上面
影响：后面元素会上去补位置，必然产生高度塌陷
如何不让元素上去补位置
8.清除浮动
clear: none/both/left/right
9.解决高度塌陷
1）可以给父元素添加高度
2）可以直接使用清除浮动解决补位问题
3）父元素里面只有一个子元素时，子元素浮动，产生高度塌陷
a.在浮动元素后面添加一个块级元素，给这个块级元素进行清除浮动
b.给父元素添加overflow: hidden;触发BFC会让浮动元素继续参与高度的计算
（具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。）
c.万能清除法
.wnac : after {
content: "文本"；
display: block;
clear: both;
height: 0px;
font-size: 0px;
overflow: hidden;
visibility: hidden;
}
10.盒子模型
1）盒子模型总共分为两类：标准盒子模型（W3C官方盒子模型），IE怪异盒子模型
2）组成部分：内容(content), 内边距(padding), 边框(border), 外边距(margin)
3）如何区分
若box-sizing: content-box, 标准盒子模型
若box-sizing: border-box, IE怪异盒子模型
4）计算方法
标准盒子：
实际宽度：CSS.width+左右的padding+左右的border+左右的margin
实际高度：CSS.height+上下的padding+上下的border+上下的margin
IE怪异盒子模型：
实际宽度：CSS.width+左右的margin
实际高度：CSS.height+上下的margin
怪异盒子里面的css的width里面已经包含了对应内容区域，内边框区域，边框区域
11.定位的取值
position: static/relative/absolute/fixed/sticky
参照物的问题：
静态定位没有参照物
相对定位的参照物是自己原来的位置
绝对定位的参照物：
a.如果所有外层的父级元素中都没有任何定位的话，则相对于浏览器左上角的位置（body）
b.如果父级元素中有定位的话，则相对于比较近的父元素进行位置的微调
固定定位的参照物：浏览器窗口的左上角（视口的左上角），不会受到滚动条的影响
粘性定位：视口的左上角
12.父相子绝
父元素使用相对定位，子元素使用绝对定位，改变子元素的参照物
13.浮动和定位的区别
1）不同点
a.概念不同
浮动主要是用来做布局，横向显示元素的
定位用来调整元素位置的
b.脱离文档流不同
浮动：半脱离文档流，如果后面补位元素中有文本的话，会产生文本环绕的效果
定位：全脱离文档流，如果后面补位元素中有文本的话，不产生文本环绕的效果
2）相同点
a.都能让后面的元素上去补位置===会产生高度塌陷
b.如果补位元素中没有文本的话，实现的效果是一样的
c.都能让行内元素变成块级元素
d.都能触发BFC
e.都能解决margin-top作用在父元素上面的问题
f.都能让margin: 0 auto失效
g.如果是一个自适应宽度的盒子，添加浮动或者定位的时候，盒子仍然是自适应，是被文本撑开的
14.溢出效果显示
div {
width: 500px;
white-sapce: nowrap //文本不折行显示
overflow: hidden;
text-overflow: ellipsis
}
15.如何制作一个三角形
div {
display: inline-block;
width: 0px;
height: 0px;
border-top: 10px solid red
border-right: 10px solid transplate
border-bottom: 10px solid transplate
border-left: 10px solid transplate
}
16.如何隐藏元素
1)display: none 不占空间
2)visibility: hidden 占页面空间
3)height: 0px; weight: 0px; 不占页面空间
注意：如果该盒子里有文本，还需添加：font-size: 0px; / overflow: hidden; / visibility:hidden;
4)opacity: 0 占页面空间
5)transform: scale(0) 占页面空间
17.如何让一个元素边透明
1）透明颜色 transparent
2）颜色透明 rgba(red, green, blue, 0) alpha的取值为0~1
3）opacity: 0 还能透明元素里面的所有文本/图片/边框
4）如何解决ie低版本浏览器的透明兼容
filter: alpha(opacity=0~100) 0透明 100不透明
注意： 父子元素中，如果给父元素添加透明的时候，使用opacity的话，会直接影响到子元素，如何只给父元素添加透明，不影响子元素？
换属性成rgba
18.兼容问题
低版本浏览器中，图片添加一个超链接的话，会显示1px的边框如何解决 img {border: none/0}
二者都能取消边框，但是实际意义不一样
0代表的是有数值的，有边框，边框的粗细为0
none代表的是没有边框，不设置边框
从加载渲染角度考虑： 0会被加载渲染， none不会
19.内核
产生兼容性问题的原因：由于浏览器的内核不一样造成的
1）Trident内核：IE，遨游，腾讯，世界之窗和360浏览器
2）Grcko内核：火狐
3）webkit内核：Safari, chrome
4）Presto内核：Opera
5）Blink内核：是webkit的分支，由谷歌公司和Opera software开发的浏览器排版引擎
20.属性不兼容
有一些属性在使用的时候，不兼容怎么处理呢？
浏览器属性的前缀问题：
-webkit- : 谷歌和Safari
-moz- : 支持火狐浏览器里面的属性
-ms- : IE浏览器
-o- : Opera浏览器
21.图片下面3px的留白问题
1）使用vertical-align属性调整图片的行内块元素的垂直对齐方式
2）display: block;
3）给图片添加浮动，变成块级元素，在图片外层添加div盒子，给盒子添加overflow: hidden
22.图片整合技术-精灵图技术
background-position
优点：
1）通过图片整合技术，减少对服务器的请求次数，从而提高页面的加载速度
2）通过图片整合减少图片的体积，降低节约带宽
23.实现元素的水平居中显示
1）屏幕中
div {
width: ;
height: ;
position: absolute/fixed;
top: 50%;
left: 50%;
margin-top: -高度的一半；
margin-left: -宽度的一半；
}
二者区别在于：本质上，absolute是相对于左上角body位置，fixed是相对于浏览器视口左上角位置，如果没有滚动条的话，实现效果没有多大差别，有滚动条的情况下，absolute会被滚上去，fixed不会被滚上去。
2）父元素中
父元素 {
position: relative;
}
子元素 {
width: ;
height: ;
position: absolute;
top: 50%;
left: 50%;
margin-top: -高度的一半；
margin-left: -宽度的一半；
}
23.如何让一个元素变成块级元素
1）display: block;
2）使用浮动取值不为none
3）添加定位：absolute/fixed
4）父元素中，给父元素触发弹性盒子或者让父元素触发网格布局
24.继承性问题
文本的大部分属性都具有继承性：字体大小，字体颜色，加粗，倾斜，行高，字体等等
列表属性：list-style-image/type/position list-style
宽度使用百分比时，会继承父元素的宽度