总结Ⅱ-基础篇之CSS

九筒妈妈
267 阅读11分钟

CSS

1. 说一下两种盒模型

  • 要点1：先说两种盒模型分别怎么写，具体到代码。

标准盒模型：box-sizing:content-box 宽度只包含content

image.png

IE盒模型：box-sizing:border-box 宽度是content+padding+border

image.png

  • 要点2：哪种盒模型更好

border-box更好用，写起来更方便。比如要在一个容器里并排显示两个一样的盒子，如果使用标准盒模型，设置width=50%，但是两个盒子会挤在一起没有空隙，于是要设置padding，但是这样又导致两个盒子的宽度超过了容器的总宽度，就又要去调整width。这样就很不方便。采用border box就可以直接设置width为50%，此时调整padding就是在内部调整，不会影响整体的布局，非常方便。

  • 可以补充：阐述为什么要有新的盒模型 早期是IE盒模型，后来W3C制定的标准以后规定在标准解析模式下使用标准盒模型(content-box)。

1.1 背景颜色会填充元素的哪些范围

background-color设置的背景颜色会填充元素的content、padding、border区域。

1.2 box-sizing的语法和基本用处

box-sizing规定两个并排的带边框的框，语法为box-sizing：content-box/border-box/inherit

content-box：标准盒模型

border-box：IE盒模型

inherit：继承父元素的box-sizing

1.3 两个嵌套的div，position都是absolute，子div设置top属性，那么这个top是相对于父元素的哪个位置定位的

margin的外边缘

2. flex怎么用，常用属性有哪些

  • 要点1：概括 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

以下6个属性设置在容器上。

  • flex-direction：flex-direction属性决定主轴的方向（即项目的排列方向）

  • flex-wrap：默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

  • flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  • justify-content：justify-content属性定义了项目在主轴上的对齐方式。

  • align-items：align-items属性定义项目在交叉轴上如何对齐。

  • align-content：align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • 要点2：举例 比如这样一个需求应该怎么实现：

image.png

  1. 写容器：display:flex; 这样的话所有内容都会靠左

  2. space-between：justify-content:space-between; 结果如下所示

image.png

3.在中间的框架中加入：margin-left:auto; 才会让中间的模型也靠右。

image.png

3. transition和animation的区别

image.png

从上图中不难发现：

  • CSS的transition只有两个状态：开始状态 和 结束状态；但animation可能是多个状态，有帧的概念
  • CSS的transition需要借助别的方式来触发，比如CSS的状态选择器（如:hover）或 借助JavaScript来触发；animation可以自动触发

CSS实例请参考之前的文章：CSS动画

4. link标签和import标签的区别

link属于html标签，而@import是css提供的

页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。

link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。

link方式样式的权重高于@import的。

5. BFC是什么

  • 要点1：举例，不要尝试回答什么是BFC

    BFC是块级格式化上下文，用于清除浮动，防止margin重叠等，如果给一个div写一个overflow:hidden，它里边的浮动元素就会被他包裹起来。

  • 要点2：背 BFC 触发条件

  1. 浮动元素（元素的 float 不是 none）
  2. 绝对定位元素（元素的 position 为 absolute 或 fixed）
  3. 行内块元素
  4. overflow 值不为 visible 的块元素
  5. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

6. CSS 选择器及其优先级

选择器有：id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等

优先级

说法一：错误的，只适用于CSS2：按权重：

权重计算规则

第一优先级：!important会覆盖页面内任何位置的元素样式

1.内联样式，如style="color: green"，权值为1000

2.ID选择器，如#app，权值为0100

3.类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010

4.标签、伪元素选择器，如div::first-line，权值为0001

5.通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000 6.继承的样式没有权值

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。

:first-child 表示在一组兄弟元素中的第一个元素。

:not() 用来匹配不符合一组选择器的元素。:not(p) { color: blue; }

伪元素：如:before,:after,:first-line

说法2：正确的：

  • 越具体优先级越高
  • 同样优先级写在后面的覆盖写在前面的
  • !important 优先级最高，但是要少用

7. 清除浮动说一下

背出代码：

.clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

把clearfix类加到父容器上，里边的子元素就清除浮动了。

8. 说一下块元素和行元素

块元素：独占一行，并且自动填满父元素，可以设置margin和pading以及高度和宽度

行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效。

行内块元素：可以设置宽高。默认宽度和高度由内部文档流元素决定。

常见块级元素：div h1-h6 p ol ul li

常见行内元素；a span input textarea select strong

9. opacity=0，visibility=hidden, display:none的区别

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件

display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

子问题：怎么样让一个元素消失

使用opacity=0，visibility=hidden, display:none等

10. 双边距重叠问题

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠

折叠的结果为：

  1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

  2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

  3. 两个外边距一正一负时，折叠结果是两者的相加的和。

11. CSS定位/position属性及其比较

固定定位fixed：

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。

相对定位relative：

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位absolute：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位sticky：

元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

默认定位Static：

默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。

inherit:

规定应该从父元素继承position 属性的值。

12. HTML5和CSS3用的多吗？你了解它们的新属性吗？有在项目中用过吗？

html5：

1）标签增删

8个语义元素 header section footer aside nav main article figure

内容元素mark高亮 progress进度

新的表单控件calander date time email url search

新的input类型 color date datetime datetime-local email

移除过时标签big font frame frameset

2）canvas绘图，支持内联SVG。支持MathML

3）多媒体audio video source embed track

4）本地离线存储，把需要离线存储在本地的文件列在一个manifest配置文件

5）web存储。localStorage、SessionStorage

css3：

CSS3的新特性中，在布局方面新增了flex布局，在选择器方面新增了例如first-of-type,nth-child等选择器，在盒模型方面添加了box-sizing来改变盒模型。

CSS3边框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D转换如transform等；CSS3动画如animation等。

13. px em rem 的区别

px是像素。em是相对于当前对象内的文本字体尺寸，如果没设置，就使用浏览器的默认字体尺寸。

rem是CSS3新增的一个相对长度单位，表示root em ，相对于根元素字体尺寸。用rem的好处就是，通过它可以做到只修改根元素就能成比例地调整所有字体大小。又可以避免字体大小逐层复合的连锁反应。

14. css设置透明度的两种方法和区别

opacity:0.5 opacity作用于元素本身以及元素内的所有内容

background:rgba(100,100,100,0.5); rgba只作用于元素本身,子元素不会继承透明效果

取值都是0-1

15. CSS伪元素: 和 ::的区别

CSS3 规范中的要求使用双冒号 :: 表示伪元素，以此来区分伪元素和伪类，比如 ::before 和 ::after 等伪元素使用双冒号 ::，:hover 和 :active 等伪类使用单冒号 :。

在CSS3之前，伪元素和伪类都是一个冒号。CSS3规定，伪元素都用 ::，为了和伪类区分开。但是为了兼容过去的写法，在CSS3之前的伪元素用: 和 ::都可以。但是CSS3之后的伪元素只能用 ::

16. calc属性

Calc用户动态计算长度值，任何长度值都可以使用calc()函数计算，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

17. display：table和本身的table有什么区别

display:table和本身table是相对应的，区别在于，display：table的css声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，使我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。

之所以现在逐渐淘汰了table系表格元素，是因为用div+css编写出来的文件比用table边写出来的文件小，而且table必须在页面完全加载后才显示，div则是逐行显示，table的嵌套性太多，没有div简洁

18. z-index的定位方法

image.png

z-index属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之前，z-index可以为负，且z-index只能在定位元素上奏效，该属性设置一个定位元素沿z轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承z-index属性的值

19. line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height一般是指容器的整体高度

20. inline-block、inline和block的区别

  • block元素前后有换行，一般占满父元素的整个宽度
  • inline、inline-block前后无换行，允许元素水平一个接一个排列。

image.png

avatar
文章
阅读
粉丝