![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css学习笔记
文章平均质量分 88
css理解
chujinmaolu
这个作者很懒,什么都没留下…
展开
-
CSS基础--absolute与overflow
overflow对absolute元素的剪裁规则用一句话表述就是:绝对定位元素不总是被父级overflow属性剪裁,尤其当overflow在绝对定位元素及其包含块之间的时候。即如果overflow不是定位元素,同时绝对定位元素和overflow容器之间也没有定位元素,则overflow无法对absolute元素进行剪裁。因此下面HTML中的图片不会被剪裁:<div style="overflow: hidden;"> <img src="1.jpg" style="position原创 2021-11-27 17:00:30 · 1759 阅读 · 1 评论 -
CSS基础--float的兄弟position:absolute二
1、具有相对特性的无依赖 absolute 绝对定位一个绝对定位元素,没有任何 left/top/right/bottom 属性设置,并且其祖先元素全部都是非定位元素,其位置在哪里?很多人都认为是在浏览器窗口左上方。实际上,还是当前位置即html代码布局的位置,不是在浏览器左上方。正是这种错误认知导致凡是使用absolute 绝对定位的地方,一定父容器 position:relative,同时 left/top 等属性定位,甚至必同时使用 z-index 属性设置层级。请牢记下面这句话:absolu原创 2021-11-23 19:01:27 · 405 阅读 · 0 评论 -
CSS基础--float的兄弟position:absolute一
当absolute和float同时存在的时候,float属性是无任何效果的。元素一旦position属性值为absolute或fixed,其display计算值就是block或者table。,absolute有一个平时不太被人注意的差异,那就是absolute的自适应性最大宽度往往不是由父元素决定的,本质上说,这个差异是由“包含块”的差异决定的。换句话说,absolute元素具有与众不同的“包含块”1、absolute的包含块(1)根元素(很多场景下可以看成是)被称为“初始包含块”,其尺寸等同于浏览器可原创 2021-11-17 18:02:16 · 259 阅读 · 0 评论 -
CSS基础--overflow二
1、依赖overflow的样式表现有一种效果就离不开overflow:hidden声明,即单行文字溢出点点点效果。效果的核心是textoverflow:ellipsis。效果实现必需的3个声明如下:.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }目前,对-webkit-私有前缀支持良好的浏览器还可以实现多行文字打点效果,但是却无须依赖overflow:hidden。比方说,最多显示2行内容,原创 2021-11-15 18:10:07 · 1697 阅读 · 0 评论 -
css基础--overflow一
1、overflow剪裁界线border boxoverflow:hidden,利用BFC的“结界”特性彻底解决浮动对外部或兄弟元素的影响,overflow:hidden声明不会影响元素原先的流体特性或宽度表现。overflow属性原本的作用指定了块容器元素的内容溢出时是否需要裁剪,也就是“结界”只是其衍生出来的特性,“剪裁”才是其本职工作。一个设置了overflow:hidden声明的元素,假设同时存在border属性和padding属性,类似于下面的CSS代码:.box { width: 2原创 2021-06-30 20:43:26 · 2440 阅读 · 0 评论 -
css基础--float 的天然克星 clear/BFC
1、什么是clear属性clear: none | left | right | bnone:默认值,左右浮动来就来。left:左侧抗浮动。right:右侧抗浮动。both:两侧抗浮动。假设容器宽度足够宽,有10个元素,设置了如下CSS代码:li { width: 20px; height: 20px; margin: 5px; float: left; } li:nth-of-type(3) { clear: both; }最后显示如下图所示原因在于,c原创 2021-06-30 17:38:20 · 96 阅读 · 0 评论 -
css基础--流的破坏与保护之float
1、浮动的本质就是为了实现文字环绕效果。而这种文字环绕,主要指的就是文字环绕图片显示的效果。1)包裹性;2)块状化并格式化上下文;3)破坏文档流;4)没有任何margin合并;所谓“包裹性”,由“包裹”和“自适应性”两部分组成。(1)包裹。假设浮动元素父元素宽度200px,浮动元素子元素是一个128px宽度的图片,则此时浮动元素宽度表现为“包裹”,就是里面图片的宽度128px,代码如下:.father { width: 200px; } .float { float: left; }原创 2021-06-28 20:27:43 · 145 阅读 · 0 评论 -
css基础---vertical-align三
1、vertical-align文本类属性值vertical-align:text-top:盒子的顶部和父级内容区域的顶部对齐。vertical-align:text-bottom:盒子的底部和父级内容区域的底部对齐。原创 2021-06-25 19:22:35 · 406 阅读 · 0 评论 -
css基础--vertical-align二
1、inline-block与baselinevertical-align属性的默认值baseline在文本之类的内联元素那里就是字符x的下边缘,对于替换元素则是替换元素的下边缘。但是,如果是inline-block元素,则规则要复杂了:一个inline-block元素,如果里面没有内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘;否则其基线就是元素里面最后一行内联元素的基线。例子:两个同尺寸的inline-block水平元素,唯一区别就是一个是空的,一个里面有字原创 2021-06-23 20:29:28 · 134 阅读 · 0 评论 -
css基础--vertical-align
1、vertical-align属性值分为以下4类:线类,如baseline(默认值)、top、middle、bottom;文本类,如text-top、text-bottom;上标下标类,如sub、super;数值百分比类,如20px、2em、20%等。数值百分比类根据计算值的不同,相对于基线往上或往下偏移,到底是往上还是往下取决于vertical- align的计算值是正值还是负值,如果是负值,往下偏移,如果是正值,往上偏移。vertical-align的默认值是baseline,即基线对齐,原创 2021-06-22 20:04:56 · 2471 阅读 · 1 评论 -
css基础--line-height二
1、坊间流传着这么一种说法:“要想让单行文字垂直居中,只要设置line-height大小和height高度一样就可以了“。.title { height: 24px; line-height: 24px; }误区之一:要让单行文字垂直居中,只需要line-height这一个属性就可以,与height一点儿关系都没有。也就是说,我们直接.title { line-height: 24px; }就可以了,坊间传闻的说法会误导大小一定要同时设置height属性才可以。误区二:行高原创 2021-06-18 19:01:54 · 648 阅读 · 0 评论 -
css基础--内联元素与流-line-height一
块级元素负责结构,内联元素接管内容1、x-height首先需要了解一下x-height的含义。通俗地讲,x-height指的就是小写字母x的高度,术语描述就是基线和等分线(mean line)(也称作中线,midline)之间的距离。ascender height: 上下线高度。cap height: 大写字母高度。median: 中线。descender height: 下行线高度。CSS中有些属性值的定义就和这个x-height有关,最典型的代表就是vertical- align:mid原创 2021-06-17 20:00:06 · 501 阅读 · 0 评论 -
css基础--border属性
1、border不支持百分比border-width还支持若干关键字,thin:薄薄的,等同于1px。medium(默认值):薄厚均匀,等同于3px。thick:厚厚的,等同于4px。border属性的默认宽度大小是medium,2、border-style:默认none;实现一个没有下边框的边框效果:div {border: 1px solid;border-bottom: none;}或者div {border: 1px solid;border-bottom: 0;}原创 2021-06-17 14:13:04 · 8068 阅读 · 0 评论 -
css基础--margin二
1、块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距,这样的现象称为“margin合并”。从此定义上,我们可以捕获两点重要的信息。(1)块级元素,但不包括浮动和绝对定位元素,尽管浮动和绝对定位可以让元素块状化。(2)只发生在垂直方向,需要注意的是,这种说法在不考虑writing-mode的情况下才是正确的,严格来讲,应该是只发生在和当前文档流方向的相垂直的方向上。由于默认文档流是水平流,因此发生margin合并的就是垂直方向。2、margin合并原创 2021-06-11 16:41:13 · 608 阅读 · 0 评论 -
css基础--margin
1、1)元素尺寸:对应jQuery中的().width()和().width()和().width()和().height()方法,包括padding和border,也就是元素的border box的尺寸。在原生的DOM API中写作offsetWidth和offsetHeight,所以,有时候也成为“元素偏移尺寸”。2)元素内部尺寸:对应jQuery中的().innerWidth()和().innerWidth()和().innerWidth()和().innerHeight()方法,表示元素的内部区原创 2021-05-29 18:58:20 · 224 阅读 · 0 评论 -
css基础--padding一
1、a { padding: 50px; background-color: #cd0000;可以明显看到,尺寸虽有效,但是对上下元素的原本布局却没有任何影响,仅仅是垂直方向发生了层叠.层叠其分为两类:一类是纯视觉层叠,不影响外部尺寸;另一类则会影响外部尺寸。box-shadow以及outline属于前者,而这里的inline元素的padding层叠属于后者。区分的方式很简单,如果父容器overflow:auto,层叠区域超出父容器的时候,没有滚动条出现,则是纯视觉的;如果出现滚动条,则会影响尺寸、影原创 2021-05-29 15:51:10 · 199 阅读 · 0 评论 -
css基础--盒尺寸一
1、我们把content属性生成的对象称为“匿名替换元素(1)我们使用content生成的文本是无法选中、无法复制的,好像设置了user- select:none声明一般,但是普通元素的文本却可以被轻松选中。同时,content生成的文本无法被屏幕阅读设备读取,也无法被搜索引擎抓取,因此,千万不要自以为是地把重要的文本信息使用content属性生成,因为这对可访问性和SEO都很不友好,content属性只能用来生成一些无关紧要的内容,如装饰性图形或者序号之类;同样,也不要担心原本重要的文字信息会被cont原创 2021-05-24 21:02:34 · 75 阅读 · 0 评论 -
css基础--流、元素与基本尺寸二
css基础笔记1、min-width/max-width和min-height/max-height权重超越Iimportant;超越最大.container { min-width: 1400px; max-width: 1200px; } 最小宽度居然比最大宽度设置得还大,遵循“超越最大”规则(注意不是“后来居上”规则),min-width活下来,max-width被忽略,于是,.container元素表现为至少1400像素宽。2、固有尺寸,html尺寸,css尺寸,替换元素内容原创 2021-05-20 21:28:33 · 177 阅读 · 0 评论 -
学习笔记 --css基础-流、元素与基本尺寸一
学习笔记原创 2021-05-16 10:38:07 · 209 阅读 · 0 评论