![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 60
W1ping
这个作者很懒,什么都没留下…
展开
-
CSS 盒模型
盒模型无论行盒还是块盒都由下面几个部分组成,从内到外是 :内容 contentwidth, height 设置的是盒子内容的宽高内容部分通常叫做整个盒子的 内容盒 content-box填充(内边距) padding盒子边框到盒子内容的距离填充区 + 内容区 = 填充盒 padding-box边框 border边框 = 边框样式 + 边框宽度 + 边框颜色边框 + 填充区 + 内容区 = 边框盒 border-box外边距 margin边框到其他盒子的距离行盒模型盒子沿着内原创 2021-04-24 15:47:33 · 59 阅读 · 0 评论 -
CSS 权重计算
属性值 / 权重的计算过程这节课属于前端必会内容,但其实不难,也很容易理解。开始前我们扩展一下课外知识点CSS 属性渲染流程渲染每个元素的前提条件 : 该元素的所有 CSS 属性必须有值注意是所有 CSS 属性,就算我们没有自己定义也会使用默认值,或者使用继承值,我们看下面的例子我们可以看到虽然这里虽然只有我们定义的几个内容,但是当我们点控制台 Show all 时可以看到而这些灰色的无法修改的就是 CSS 所有大大小小 两三百个的属性值,全部都有值,一个元素从所有属性都没有值,到所有属性原创 2021-04-24 15:33:12 · 294 阅读 · 0 评论 -
CSS继承属性总结
无继承性的属性/有继承性的属性一、无继承性的属性: display, 文本属性,盒子模型属性,背景属性,定位属性,生成内容属性,轮廓样式属性,页面样式属性,声音样式属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin原创 2021-04-24 15:32:14 · 82 阅读 · 0 评论 -
深度理解 BFC,解决高度塌陷问题
相信大家在各类前端学习教程或者视频中都会看到这样一段代码.clearfix::after { content :''; display: block; clear: both;}我们也知道教程会说给要清除高度塌陷的元素加上这个属性就能解决问题,但是教程却没说为什么这样写,本文章将深入带你理解高度塌陷产生的原因和怎么解决,并解释这段代码的由来。前置知识:BFChttps://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_fo原创 2021-04-23 15:37:48 · 2445 阅读 · 0 评论 -
CSS布局模型
CSS布局模型块级元素(block-level)无论其元素内容的多少或者把它的宽度设置多小,都会默认独占其父元素一整行的内容区域,块级元素的默认宽度为父元素的整个宽度行内元素(inline-level, 也叫内联元素)行内元素不会独占一行,可以和其他行内元素同处一行,大小默认为其元素内容的大小区别当元素是块级元素时,我们可以自由的改变其宽高,或为它们设置margin值和padding值。不过当元素是行内元素时,我们为它们设定的宽高和竖直方向上的边距值都会失效。行内块元素(inline-b原创 2021-04-19 17:50:32 · 83 阅读 · 0 评论 -
px、em、rem、vh、pt 分别是什么
px 代表物理屏幕上能显示出的最小的一个点,是一个相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的。em 是相对于父级的字体大小。rem是相对于HTML根元素的字体大小。vh 和 vw 相对于视口的高度和宽度,1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。pt是一个绝对长度单位,指的是72分之一英寸。常用于印刷当中,在AI、PS等设计软件当中字体大小所用的单位就是pt,它在广告印刷业当中十分受欢迎,也非常的好用。但现在在网页当中,pt几乎不出现了。..原创 2021-04-19 17:48:18 · 1548 阅读 · 0 评论