CSS 常见问题

THINKA
288 阅读4分钟

CSS基础

CSS 盒模型

  • 盒子由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成
  • box-sizing: content-box(默认)----指的是标准模型（本身内容宽高度+边框和内边距）
  • box-sizing: border-sizing-----指的是IE模型（本身内容的宽高度）

CSS 盒模型

获取盒子宽高的几种方式及区别

dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的

dom.currentStyle.width/height

获取渲染后的宽高。但是仅IE支持

window.getComputedStyle(dom).width/height

与2原理相似，但是兼容性，通用性更好一些

dom.getBoundingClientRect().width/height

计算元素绝对位置，获取到四个元素left,top,width,height

获取浏览器高度和宽度的兼容性写法：

var  w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
var  h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

Flex布局

想详细了解Flex布局知识点的小伙伴，请查看 Flex布局详解

常见单位

1. px：绝对单位，页面按精确像素展示
2. em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值
3. rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
4. vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%
5. vh：viewpoint height，视窗高度，1vh等于视窗高度的1%
6. vmin：vw和vh中较小的那个
7. vmax：vw和vh中较大的那个
8. %:百分比

移动端视口配置

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   initial-scale：初始的缩放比例
   minimum-scale：允许用户缩放到的最小比例
   maximum-scale：允许用户缩放到的最大比例
   user-scalable：用户是否可以手动缩放

link和@import有什么区别

1. link属于html标签，除了引入css样式以外还可以定义RSS等其他事物，@import是css提供的，只能引入css
2. lilnk在页面加载的时候会同时加载，@import引用的css要等页面加载结束后再加载
3. link是html标签，没有兼容性，@import只有ie5以上才能识别

CSS浮动问题

Float的设计初衷仅仅是：文字环绕效果。

2020-03-04_213707.png

如何解决浮动让父元素高度塌陷的bug？浮动使高度塌陷不是bug，是标准。浮动的作用原本仅仅是为了实现文字环绕效果。

2020-03-04_215231.png

清除浮动带来的影响的两大基本方法

  • 脚底插入clear：both
  • 父元素BFC或haslayout

clear 通常应用形式

2020-03-04_220428.png

BFC或haslayout 通常声明

2020-03-04_220631.png

权衡后的策略

.clearfix:after{content: "";display: block;height: 0;overflow: hidden;clear: both;}
.clearfix{zoom:1}

更好的方法，没有兼容性问题

.clearfix:after{content: "";display: table;clear: both;}
.clearfix{zoom:1}

CSS布局

什么是布局？简单来说就是HTML页面的整体结构或骨架。，类始于传统报纸或杂志中的排版。布局不是某个技术内容，而是一种设计思想。

水平居中布局

水平居中布局实现方式

  • inline-block + text-align 属性配合使用
  • table + margin 属性配合使用
  • absolute + transform 属性配合使用
<div class="parent">
    <div class="child">慕课网</div>
</div>

第一种方案

text-align属性：是为文本内容设置对齐方式
.parent{text-align: center;}
.child{display: inline-block;}

优点：浏览器兼容性比较好；缺点：属性具有继承性，导致子集元素的文本也是居中显示的

第二种方案

.child{display: table;margin: 0 auto;}

优点：只需对子集元素进行设置，就能实现效果；缺点：如果子集元素脱离文档流，margin会失效

第三种方案

.parent{position: relative;}
.child{position: absolute;left: 50%;transform: translateX(-50%);}

优点：父级元素是否脱离文档流，不影响居中效果；缺点：transform是CSS3新增属性，浏览器支持情况不太好

垂直居中布局

垂直居中布局实现方式

  • table-cell + vertical-align 属性配合使用
  • absolute + transform 属性配合使用

第一种方案

vertical-align属性：用于设置文本内容的垂直方向对齐方式

.parent{display: table-cell;vertical-align: middle;}

优点：浏览器兼容性好；缺点：vertical-align属性具有继承性。

第二种方案

.parent{position: relative;}
.child{position: absolute;top: 50%;transform: translateY(-50%);}

优点：父级元素是否脱离文档流，不影响居中效果；缺点：transform是CSS3新增属性，浏览器支持情况不太好

水平垂直居中布局

水平垂直居中布局实现方式

  • table + margin 实现水平方向居中，table-cell + vertical-align 实现垂直方向居中
  • absolute + transform 实现水平垂直方向居中

第一种方案

.parent{display: table-cell;vertical-align: middle;}
.child{display: table;margin: 0 auto;}

第二种方案

.parent{position: relative;}
.child{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
avatar
文章
阅读
粉丝