广州建站业务公司,物流运输网,免费网络营销平台,wordpress主题如何用介绍一下标准css盒子模型与低版本IE的盒子模型#xff1f; 标准盒子模型#xff1a;宽度内容的宽度#xff08;content#xff09; border padding margin 低版本IE盒子模型#xff1a;宽度内容宽度#xff08;contentborderpadding#xff09; margin box-sizing 属性…介绍一下标准css盒子模型与低版本IE的盒子模型 标准盒子模型宽度内容的宽度content border padding margin 低版本IE盒子模型宽度内容宽度contentborderpadding margin box-sizing 属性可以被用来调整这些表现: content-box 是默认值。如果你设置一个元素的宽为100px那么这个元素的内容区会有100px 宽并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box 告诉浏览器你想要设置的边框和内边距的值是包含在width内的。也就是说如果你将一个元素的width设为100px那么这100px会包含它的border和padding内容区的实际宽度是width减去(border padding)的值。大多数情况下这使得我们更容易地设定一个元素的宽高。
border-box不包含margin
切换下box-sizing动手实践下 https://codepen.io/bruce_taotao/pen/ExoGMZP BFC是什么
BFC - Block Formatting Context块级格式化上下文。
每一个BFC区域只包含其子元素不包括其孙子元素。
每一个BFC区域都是独立隔离的互不影响的。也就是说创建2个垂直方向的BFC-margin就不会重叠解决margin的塌陷问题
触发BFC条件
根元素html浮动元素元素的 float 不是 none绝对定位元素元素的 position 为 absolute 或 fixed行内块元素元素的 display 为 inline-block表格单元格元素的 display 为 table-cellHTML表格单元格默认为该值表格标题元素的 display 为 table-captionHTML表格标题默认为该值匿名表格单元格元素元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group分别是HTML table、row、tbody、thead、tfoot 的默认属性或 inline-tableoverflow 计算值(Computed)不为 visible 的块元素display 值为 flow-root 的元素contain 值为 layout、content 或 paint 的元素弹性元素display 为 flex 或 inline-flex 元素的直接子元素网格元素display 为 grid 或 inline-grid 元素的直接子元素多列容器元素的 column-count 或 column-width (en-US) 不为 auto包括 column-count 为 1column-span 为 all 的元素始终会创建一个新的BFC即使该元素没有包裹在一个多列容器中标准变更Chrome bug。
1.2margin的塌陷问题 同个BFC垂直方向的 margin会重叠 (取两者的大值) 当父子关系的盒子给子元素添加margin-top有可能会把父元素一起带跑。 当浮动产生影响的时候可以利用BFC来清除浮动的影响 https://codepen.io/bruce_taotao/full/NWXedre BFC可以阻止标准流元素被浮动元素覆盖
浏览器是怎样解析CSS选择器的 CSS选择器的解析是从右向左解析的。 若从左向右的匹配发现不符合规则例如 子元素设置position:absolute;需要知道上级元素那个为position:relative;需要进行回溯会损失很多性能。若从右向左匹配先找到所有的最右节点对于每一个节点向上寻找其父节点直到找到根元素或满足条件的匹配规则则结束这个分支的遍历。两种匹配规则的性能差别很大是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点叶子节点而从左向右的匹配规则的性能都浪费在了失败的查找上面。 而在 CSS 解析完毕后需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree最终用来进行绘图。在建立 Render Tree 时WebKit 中的「Attachment」过程浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果Style Rules来确定生成怎样的 Render Tree。 3 什么是响应式设计响应式设计的基本原理是什么如何兼容低版本的IE
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端而不是为每一个终端做一个特定的版本。 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。 页面头部必须有meta声明的viewport meta name’viewport’ content”widthdevice-width, initial-scale1. maximum-scale1,user-scalableno”
手写-单行文本省略,多行文本省略 css实现.
注意: 用webkit-line-clamp , display: -webkit-box;和-webkit-box-orient: vertical/horizontal 是必须的.
.single-line-text{width:200px;over-flow:hidden;white-space:nowrap;text-overflow:ellipsis
}
.mtl-line-text{width:200px;over-flow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2; display: -webkit-box;-webkit-box-orient:: vertical;
}适配pc,ipad,app 端不同布局
rem/em/vh/vw/vm 的区别
em和rem的主要区别是浏览器根据谁来转化成px。 rem 这个单位代表根元素通常为html 元素的 font-size 大小。当用在根元素的 font-size 上面时 它代表了它的初始值。 当使用rem的时候他们转化为像素的大小取决于页根元素的字体大小即html元素的字体大小。
例如根元素的字体大小为16px10rem将等于160px即10*16160。 em 相对长度单位这个单位表示元素的 font-size 的计算值。如果用在font-size 属性本身它则表示元素继承的 font-size 值。
当使用em的时候em转为像素的大小取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小影响除非显式重写与一个具体单位。
例如父级元素字体大小为13px,10em将等同于130px,即13x10 130px vh 视口的初始包含块的高度的 1%。 vw 视口的初始包含块的宽度的 1%。 原文链接 https://blog.csdn.net/weixin_39808181/article/details/114102702, https://juejin.cn/post/6945618076087894052, https://developer.mozilla.org/zh-CN/docs/Web/CSS/length
参考
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://www.itcast.cn/news/20201016/16152387135.shtml
https://segmentfault.com/a/1190000013325778
