css
文章平均质量分 77
Saucey_6
这个作者很懒,什么都没留下…
展开
-
上下布局高度自适应屏幕
标题要求上下布局: 高度撑满整个屏幕html<div class="layout"> <div class="header">111111</div> <div class="content"></div></div>方法一: 使用position:absolute定位脱离文档流的办法进行处理。 <style type="text/css"> * { m原创 2020-09-23 14:48:52 · 789 阅读 · 0 评论 -
两端对齐的三种方式
两端对齐的三种方式flex实现 .body { /*flex 使用*/ display: flex; justify-content: space-between; }内联元素方式实现 .body4{ /* 内联元素*/ text-align: justify; } .body4:after{原创 2020-06-12 15:56:08 · 2028 阅读 · 0 评论 -
关于定位
文档流相当于一种规则: 1.从左至右,从上到下的布局。 2.符合html中标签本身含义的布局。比如独占一行等等。脱离文档流定位方式中应用(float,position:absolute,fixed) 顾名思义,是指这个元素不受文档流规则的约束。它不遵从此时文档流的正常布局,比如从上向下从左往右等等。不受文档流的布局约束后,这个标签在原文档流中所占的空间也被清楚掉...原创 2018-03-15 20:49:35 · 473 阅读 · 1 评论 -
BFC-块格式化上下文
最近见群里面试题,不停的会提到BFC,所以就查了一下。What块格式化上下文(Block Formatting Context,BFC)是web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。 def:它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域...原创 2018-03-09 16:23:35 · 212 阅读 · 0 评论 -
让DOM从页面中消失的几种方法
一般最先想到的就是这两种: 1.display:none;(将整个元素隐藏,并且不会占据任何的空间) 2.visibility:hidden;(元素的内容不可见,但是元素仍然保持原来的位置和大小)3.设定它的位置,让其消失不见: position:absolute或fixed,用z-index遮盖。4 overflow:hidden将要隐藏的元素移除...原创 2018-05-03 13:22:50 · 3254 阅读 · 1 评论 -
页面的重绘和回流(重排)以及优化
一.html页面呈现流程 浏览器把获取到的html代码解析成一个dom树,其中的每个tag都是dom树中的一个节点,根节点就是我们常用的document对象。dom树里包含了所有html标签,包括display:none隐藏东西,还有用js动态添加的元素等等。 浏览器将所有css样式解析成样式结构体,在解析的过程中去掉浏览器不能识别的样式。 dom树和样式结构...原创 2018-03-19 19:57:29 · 1350 阅读 · 0 评论 -
盒子模型,行元素,块级元素总结
盒子模型: 1.盒子模型时CSS的基石之一,它关系着页面中元素的排布。页面上每个元素被看做一个矩形框,这个框由元素的内部,内外边距,边框组成。 2.两个上下方向相邻的元素框垂直相遇时,外边距会合并,合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。(只有普通文档流中块框的垂直外边距才会发生外边距合并。行框,浮动框或绝对定位之间的外边距不会合并。)行元素: ...原创 2018-03-15 17:38:41 · 754 阅读 · 0 评论 -
text-overflow失效
使用场景:用…替换多余的文字css方法 text-overflow: ellipsis; overflow:hidden; white-space: nowrap;但是在表格中它是不生效的!!!如果在css方法中添加display:block和固定的宽度就ok! display: block; ...原创 2018-10-08 16:10:13 · 2003 阅读 · 0 评论