box-sizing的border-box属性使得我们更容易地设定1个元素的宽高吗？

来源：蜘蛛抓取(WebSpider) 时间：2022-07-12 05:09 标签： cssbox
  1. /* 盒子的padding和border的像素会叠加到盒子的宽度和高度上，现在盒子的高度和宽度均为250px */
  2. /* 因此我们在布局时需要精确计算好像素，不使其不注意时撑破父级元素。 */
  3. 此时盒子的高度和宽度均为200px



实例演示常用的元素居中方式

  1. /* 块元素的水平居中 */

写在前面的，整理了自己认为需要理解的内容。

什么是响应式设计，响应式设计的基本原理是什么

  • 响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
  • 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有 meta 声明的 viewport。
  • CSS选择器是从右向左解析。
    若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
    若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找父节点直到找到根元素或者满足条件的匹配规则，则结束这个分支的遍历。
    两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
  • （1）利用 CSS Sprites 能很好地减少网页的 http 请求，从而大大的提高页面的性能；
  • （1）图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂；
    （2）开发较麻烦，测量繁琐；
    （3）维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css。 
  •  /* 将其转化为行内属性。*/

  • 从总体中逐渐排除局部。首先，巧妙的使用 “9” 这一标记，将 IE 浏览器从所有情况中分离出来。接着，再次使用 “+” 将 IE8 和 IE7、IE6 分离开来，这样 IE8已经独立识别。

  • 设置较小高度标签（一般小于10px），在 IE6，IE7 中高度超出自己设置高度。 

     /* 1. 给超出高度的标签设置*/

  • IE 下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性

  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

  • 背景：background-size【背景图片的尺寸】，background-origin【设置背景图片的原点】，background-clip【设置背景图片的裁剪区域】，以“，”分隔可以设置多背景，用于自适应布局
  • 实现媒体查询 @media，多栏布局

CSS优化、提高性能的方法有哪些

  • 移除空的 CSS 规则
  • 抽象提取公共样式，减少代码量
  • 不在选择符中使用 ID 标识符
  • 尽量减少页面重排、重绘：正确使用 display 的属性
  • 不滥用浮动、web字体

说一下 CSS 预处理器，Less 带来的好处？

  • 为 CSS 增加了编程特性的拓展语言，可以使用变量、简单逻辑判断、函数等基本编程技巧。CSS 预处理器编译输出依旧是标准的 CSS 样式。
  • （1）CSS 语法不够强大，因为无法嵌套导致有很多重复的选择器；
    （2）没有变量和合理的样式机制，导致逻辑上相关的属性值只能以字面量的形式重复输出，难以维护。
  • （1）容易维护：减少了大量的重复选择器，避免了一些样式的低级错误；
    （2）提高复用性：使用变量维护某个属性值，修改方便；
    （3）减少代码：常用代码使用代码块；
    （4）生成更加复杂的样式：提供了颜色函数（lighten，darken 等），mixins，loops 等方法，使 CSS 更像编程语言，能够让开发者生成更复杂的 CSS 样式。
  • Less、Sass 都是动态的样式语言，是 CSS 预处理器， CSS 上的一种抽象层。

CSS 伪类和伪元素？

  • （1）用于当元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的，功能类似于 class。但它是基于 DOM 树之外的信息，所以叫伪类。例如：:hover active
    （2）用单冒号(:)来表示
  • （1）DOM 树没有定义的虚拟元素，通常用来创建不存在于文档中的元素。比如：::after ::before
    （2）起初，是用单冒号(:)表示；后来被规范成双冒号(::)表示

CSS选择器有哪些？哪些属性可以继承？

CSS优先级算法如何计算？

  • 可以给选择器假设权重值：
    id选择器权重假设为 100

(1) important 声明的样式优先级最高，其次是行内样式；
(2) 如果优先级相同，则选择最后出现的样式。
(3) 继承得到的样式的优先级最低。

元素竖向的百分比设定是相对于容器的高度吗？

  • 当按百分比设定一个元素宽度时，它是相对于父容器的宽度计算的；
  • 解决方法：在重合元素外包裹一层容器，并触发该容器生成一个BFC /* 通过改变此 div 的属性使两个盒子分属于两个不同的 BFC，以此来阻止margin 重叠 */

清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

浮动的元素是脱离文档标准流的，如果不清除浮动，就会造成父元素高度塌陷，影响页面布局。

（1）为父元素设置高度；

（3）在浮动元素下方添加一个非浮动元素

（4）为父元素添加伪元素(推荐)

  • display 属性：规定元素应该生成的框的类型；
    position 属性：规定元素的定位类型；
    float 属性：是一种布局方式，定义元素在哪个方向浮动。
  • 效果：类似于优先级机制：
    注意：float 或者 absolute 定位的元素，只能是块元素或表格。

如何让一个不定宽高的盒子水平垂直居中

如何实现一个最大的正方形？

  • 首先，需要把元素的宽度、高度设为0。然后设置边框样式。

  • 上述的代码可以产生的效果如下：



    如果想要三角形，则只需要将其余边变成透明即可；

一行水平居中，多行水平居左？

我曾经写过的一篇文章：

两栏布局，左边固定，右边自适应，左右不重叠？

首先定义布局的 html 代码如下：

  • 按照正常文档流进行排列；
  • 对象不可层叠，不脱离文档流，参考自身静态位置进行定位。
  • 脱离文档流。选取最近一个具有定位设置的父级标签进行绝对定位。如果父级对象都没有设置定位，则参考 body 坐标原点进行定位。
  • 脱离文档流，相对于浏览器窗口进行定位。
  • 主要用在对 scroll 事件的监听上，可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。 */

行内元素和块级元素的区别？

  • （1）各占一行，垂直方向排列；
    （2）可以包含其他块级或者行内元素；
    （3）高度、行高以及外边距和内边距都可控制；
    （4）默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关。

  • （1）水平方向排列，不会自动换行；
    （2）不可以包含块级元素，但是可以包含其他行内元素或者文本；
    （4）宽度就是它的文字和图片的宽度，不可改变。

  • 所有题目答案整理自网络，如有错误，接受指正，拒绝批评！ 关于html5 HTML5的十大新特性 语义化标签使得页面...

  • 1.Label的作用是什么?是怎么用的 答案: label标签来定义表单控制间的关系当用户选择该标签时，浏览器会自...

  • 第八章 教学评价 第一节 从考试文化走向评价文化 一、教学评价的早期发展 （一）传统考试阶段 ★《学记》——我国最...

  • 今天青石的票圈出镜率最高的，莫过于张艺谋的新片终于定档了。 一张满溢着水墨风的海报一次次的出现在票圈里，也就是老谋...

  • 你是想要一瞬间的短暂快乐呢，还是想朝着理想的自己前进呢？你的选择将会改变你。 ——松浦弥太郎《今天也要用心过生活》

BFC 是块级格式上下文，IFC 是行内格式上下文：

  • 内部的 Box 会水平放置

问：BFC会与float元素相互覆盖吗？为什么？举例说明

不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是 BFC，也没有设置 float，会形成对上面的元素进行包裹内容的情况，如果设置了下面元素为 overflow：hidden；属性那么就能够实现经典的两列布局，左边内容固定宽度，右边因为是 BFC 所以会进行自适应。

box-sizing 属性可以被用来调整这些表现:

  • content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

  • 内部的 Box 会在垂直方向上一个接一个的放置。
  • 垂直方向上的距离由 margin 决定
  • bfc 的区域不会与 float 的元素区域重叠。
  • 计算 bfc 的高度时，浮动元素也参与计算
  • bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

（2）问：了解盒模型吗？

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 CSS盒模型：标准模型 + IE模型

问：说一下你知道的position属性，都有啥特点？

static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。  relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。  absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。  fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 sticky：具体是类似

问：两个div上下排列，都设margin，有什么现象？

问：为什么会有这种现象？你能解释一下吗

是由块级格式上下文决定的，BFC，元素在 BFC 中会进行上下排列，然后垂直距离由 margin 决定，并且会发生重叠，具体表现为同正取最大的，同负取绝对值最大的，一正一负，相加

BFC 是页面中一个独立的隔离容器，内部的子元素不会影响到外部的元素。

问：清除浮动有哪些方法？

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

  • 给浮动元素父级设置高度
  • 父级同时浮动（需要给父级同级元素添加浮动）
  • 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
2、vue的服务器端渲染
3、从零写一个npm安装包
4、vue-cli中常用到的加载器

**结语：**需要前端学习资料或者想要学习前端的小伙伴学习，CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题总结，都可以免费获取！

我要回帖

更多关于 cssbox 的文章

 

随机推荐