HTML,CSS基础十大重点问题

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

webkit 谷歌用的多

Safari 苹果

trident(IE内核)

Gecko 火狐用的最多,跨平台

Chromium/Blink  谷歌

移动端  iPhone iPad 等苹果 iOS 平台主要是 WebKitAndroid 4.4 之前的 Android 系统浏览器内核是 WebKitAndroid4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 BlinkWindows Phone 8 系统浏览器内核是 Trident

 

2.css3新增选择器:

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

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

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

 

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

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

行内块元素:1)不自动换行 2)宽高有效

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

 

4.CSS三大特性

1) 层叠

2) 继承(文本)

3) 优先(!important>行内样式>id>>标签)

 

 5.盒子模型:

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

margin指外边距

border指边框

widthheight在标准盒模型中指内容的宽高,IE盒模型指内容+border+padding的宽高

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

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

默认带有paddingmargin的标签:ol,ul,textarea

 

6.外边距合并问题

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

2)互为父子关系的块级元素,父元素没有内边距和边框。解决方案:1)父元素加边框或内边距2overflowhidden

 

7.清楚浮动

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

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

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

2)父元素添加overflowhidden;

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.displayvisibilityoverflow区别:

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

相关文章