HTML,CSS基础十大重点问题

1.浏览器内核(主要指渲染引擎)：

webkit 谷歌用的多

Safari 苹果

trident(IE内核)

Gecko 火狐用的最多，跨平台

Chromium/Blink  谷歌

移动端  iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

 

2.css3新增选择器：

结构伪类选择器：例如：li:nth-child(n)  （even偶数 odd奇数）

属性选择器：例如：div[class]{}    （ ^=以开头 $=以结尾 *通配）

伪元素选择器：例如：p::first-letter{}

 

3.行内元素，行内块元素，块级元素的区别以及相互转换

行内元素（如span,b,img,a,u等）：1）设置宽高无效 2）margin左右有效上下无效，padding都有效 3）不会自动换行 4）除a外，里面只能放行内元素

行内块元素：1）不自动换行 2）宽高有效

块级元素(如div,p,nav,aside,header等)：1)宽高有效 2）margin,padding均有效 3）自动换行

 

4.CSS三大特性

1) 层叠

2) 继承（文本）

3) 优先（!important>行内样式>id>类>标签）

 

 5.盒子模型:

padding指内边距 写法：1)上、右、下、左

margin指外边距

border指边框

width、height在标准盒模型中指内容的宽高，IE盒模型指内容+border+padding的宽高

默认带有padding的标签：th,td

默认带有margin的标签：h1~h6,dl,dd,p

默认带有padding、margin的标签：ol,ul,textarea

 

6.外边距合并问题

1）互为兄弟关系的块级元素。解决方案：避免

2）互为父子关系的块级元素，父元素没有内边距和边框。解决方案：1）父元素加边框或内边距2）overflow：hidden

 

7.清楚浮动

Why:解决父级元素因为子级元素引起的内部高度为0的问题

When: 父元素没有确定高度值，子元素浮动，导致父元素没有高

How:  1）额外标签法：在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

2）父元素添加overflow：hidden;

3）After伪元素清楚浮动

　　　　.clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;为了兼容IE

　　　　}

4）双伪元素

参考文档  https://www.jianshu.com/p/7e04ed3f4bea 了解BFC才能了解清楚浮动的原理

 

8.定位：

1）静态static：（默认）

2）相对relative：可通过边偏移改变位置，原来位置继续占有

3）绝对absolute：不占位置，父元素没定位，以屏幕，父亲有定位以最近父亲为基准（子绝父相）

4）固定fixed：变异的绝对，不占位置，完全脱标

 

9.模式转换：

浮动、绝对定位、固定定位会转换为行内块模式

 

10.display、visibility、overflow区别：

Display 隐藏后不保留位置，Visibility 保留 位置Overflow 溢出隐藏

转载于:https://www.cnblogs.com/front-end0829/p/10290033.html