html+css
喝啤酒的猫
这个作者很懒,什么都没留下…
展开
-
回流、重绘
定义回流必将引起重绘,重绘不一定会引起回流。当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color、background-color、visibility等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。引起回流重绘调整窗口大小改变字体增加或者移除样式表内容变化,比如用户在input框中输入文字激活 CSS 伪类,比如 :hover (IE 中原创 2020-06-27 17:32:55 · 107 阅读 · 0 评论 -
文本溢出
单行文本溢出white-space:nowrap;over-flow : hidden ;display : block ; text-overflow : ellipsis多行文本溢出display : -webkit-box ; -webkit-box-orient : vertical ;-webkit-line-clamp : 2 ;overflow : hidden ;text - overflow : ellipsis...原创 2020-06-12 23:28:48 · 100 阅读 · 0 评论 -
理解clientWidth,offsetWidth,clientLeft,offsetLeft,clientX,offsetX,pageX,screenX
clientWidth:表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。(clientWidth = width + padding)offsetWidth:表示元素的内部宽度,以像素计。该属性包括内边距、垂直滚动条(如果有)、边框,但不包括外边距。(offsetWidth = width + padding + border + scroll...原创 2020-02-13 22:10:02 · 1200 阅读 · 0 评论 -
HTML(五)解决img底部空白
前言img一直以来有一个很大的问题就是底部空白间隙,一直以为是img默认样式造成的,后来查了相关的资料,才弄清楚为什么会产生这样的结果。首先仔细看下图中的边框与img的间隙。img间隙用过ps文字工具的同学头知道,在使用文本工具中会出现如下的现象,字母或者汉字会超出那条基线。PS文字工具而在CSS中也有那条线,而且inline默认的垂直对齐方式vertica...原创 2020-02-09 13:34:22 · 1098 阅读 · 1 评论 -
HTML(四)解决行内元素/行内块元素中间空隙
会出现间隙的原因,其实是行内标签元素、行内块元素之间的换行带来的影响,这个距离是字体大小的1/3倍。只要解决了换行的问题,也就解决了间隙的问题。方案一:源码中直接就写成一行<div class = "box"> <span>你好</span><span>你好</span><span>你好</span>...原创 2020-02-09 12:16:02 · 1912 阅读 · 0 评论 -
HTML(三)关于CSS-BFC深入理解
BFC是什么鬼?BFC概括:可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念,是一块区域,一个环境。先稳住别懵逼,接着往下走。关于BFC的定义:BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与(在下面有解释), 它规定了内部的Block-level Box如何布局,并且与...原创 2020-02-07 22:56:00 · 268 阅读 · 0 评论 -
HTML/CSS/JS零碎知识点
1、position为absolute的元素会相对于距离最近的position为relative/fixed/absolute的上级元素进行定位,如果上级元素都没有position属性,那么则相对于初始包含块定位。...原创 2020-02-07 22:53:45 · 89 阅读 · 0 评论 -
HTML(二)transform属性
transform属性一、translate属性与其他属性组合导致的特殊问题scale与translate组合rotate与translate组合skew与translate组合二、其他属性transform-origin 变换基点transform-stylebackface-visibilityperspectivetransform 有四个属性:位移:translate(x,y)、t...原创 2020-02-06 21:47:25 · 5113 阅读 · 0 评论 -
HTML(一)垂直外边距重合与浮动造成的塌陷——解决方案
垂直外边距重合与浮动造成的塌陷——解决方案垂直外边距重合一、第一种情况:二、第二种情况:浮动导致高度塌陷一、兄弟元素二、父子元素解决方法综合解决方案垂直外边距重合一、第一种情况:垂直排列的两个元素,上面元素的下外边距与下面元素的上外边距同时设置时, 会取联两者较大的值而不是取两者之和。此种情况无需特别解决。二、第二种情况:父子元素垂直外边距相邻时,给子元素设置外边距,会同时导致父元素也...原创 2019-11-07 00:20:59 · 368 阅读 · 0 评论