CSS基础
文章平均质量分 55
CSS基础属性
春风十里不如你I
这个作者很懒,什么都没留下…
展开
-
【CSS】行内非替换元素的注意事项
内边距padding:上下会被撑起来,但是不会占用空间,左右会撑起来,也会占用空间。border:上下会被撑起来,但是不占用空间,左右占据空间。margin:上下没有效果,左右可以撑起来。什么是行内非替换元素呢?原创 2024-03-26 09:27:02 · 213 阅读 · 1 评论 -
【CSS】元素的水平居中方案
行内级元素(包含inline-block) 水平居中:在父元素中设置text-align:center;块级元素 margin:0 auto;原创 2024-03-26 09:30:59 · 101 阅读 · 1 评论 -
【CSS】盒子模型中margin-bottom的传递
总结:当父盒子的height为auto时,子盒子设置margin-top和margin-bottom时,会传递给父盒子。当我们给子元素,container一个margin-top时,父元素也会跟着移动。对于块级盒子中的子元素的margin对父盒子的影响。假如我们增加的是盒子的底部margin距离?当我们改变一点CSS。原创 2024-03-25 18:52:14 · 222 阅读 · 1 评论 -
【CSS】盒子模型
盒子模型中的属性。原创 2024-03-25 18:08:31 · 126 阅读 · 1 评论 -
【CSS】margin的传递与折叠
垂直方向上两个相邻的margin(margin-top和margin-bottom)有可能合并为一个margin,这种现象叫做折叠(collapse)如果块级元素的底部线和父元素的底部线重合,并且父元素的高度为auto,那么这个块级元素的margin-bottom值会传递给父元素。如果块级元素的顶部线和父元素的顶部线重叠,则这个块级元素的margin-top值会传递给父元素。显然,子元素的marin-top值传递给了父元素。子元素的margin-bottom传递给了父元素。两个块级元素之间的折叠。原创 2024-03-26 09:10:16 · 447 阅读 · 1 评论 -
【CSS难点总结】元素的隐藏方法
方法:display:none元素不显示出来,并且也不占据位置,不占据任何空间(相当于不存在)方法二:visibility:hidden设置为hidden,虽然元素不可见,但是会占据元素应该占据的空间默认为visible方法三:rgba设置颜色,将a的值设置为0rgba的a设置的是alpha的值,可以设置透明度,不影响子元素方法四:opacity设置透明度,设置为0设置整个元素的透明度,会影响所有的子元素Overflowvisible:溢出部分可见hidde原创 2024-03-29 08:31:03 · 168 阅读 · 0 评论 -
【CSS】设置图片背景以及和img的关系
background中bg-size是可以省略的,如果不省略需要紧跟在background-position后面,并添加/local:表示属性值随着背景相对固定,如果一个元素拥有滚动机制,北京的 内容会随着元素的内容滚动。scroll:此关键属性值表示北京相对于元素本身固定,而不是随着它的内容滚动。注意:如果设置了背景图片,而没有设置宽高的情况下,图片显示不出来。fixed:表示北京相对视口固定,北京不会随着元素的滚动而滚动。设置的第一张图片将显示在最上面,其他图片将会层叠在下面。原创 2024-03-26 14:06:47 · 376 阅读 · 0 评论 -
【CSS布局】京东多列布局
核心思想:块级元素的宽度默认为auto = 父盒子的宽度 - 块级元素的margin(left 和 right的值)原创 2024-03-31 16:38:27 · 122 阅读 · 0 评论 -
【CSS】元素的水平居中方案
行内级元素(包含inline-block) 水平居中:在父元素中设置text-align:center;块级元素 margin:0 auto;原创 2024-03-26 13:38:45 · 83 阅读 · 0 评论 -
【CSS布局之】京东浮动布局,利用宽度的auto来解决兼容性问题
总盒子宽度为1190,如果要浮动排布5个盒子,间距为10px,宽度为230px。原创 2024-03-31 16:26:15 · 205 阅读 · 0 评论 -
【CSS】浮动笔记及案例
浮动练习:京东浮动布局,利用宽度的auto来解决兼容性问题。浮动练习2:京东多列布局。原创 2024-03-31 16:59:36 · 458 阅读 · 0 评论 -
【CSS】CSS元素的垂直居中案例
缺点</</原创 2024-04-14 23:30:54 · 299 阅读 · 0 评论 -
【HTML】H5新增元素记录
MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input。data-*是全局属性,可以在所有元素中定义,并且javascript中操作DOM通过dataset轻松获取到。HTML元素用于在HTML中嵌入媒体播放器,支持文档中的视频播放。HTML元素用于在文档中嵌入音频内容,和video的用法类似。遇到浏览器不支持MP4格式时,会自动切换到webm的格式。用途:通常用于HTML和javascritp的数据传递。原创 2024-04-20 21:00:24 · 625 阅读 · 0 评论 -
【CSS】深入理解:BFC究竟是什么?
常见的形成BFC的场景根元素(html,:root)浮动元素(float属性部位none)绝对定位元素(absolute或fixed)行内快元素(display为inline-block)表格单元格(元素的display为table-cell(默认))表格标题(display为table-caption)原创 2024-04-20 21:55:23 · 897 阅读 · 0 评论 -
【CSS布局】float考拉布局加边框的布局
核心思想:给item设置边框,有重合的边框可以利用margin负值来重叠隐藏,但需要给item宽度补偿,由于整个布局的宽度为1100px 1100px/5 = 220px,但由于布局中中间有6条边框,所以无论如何都会超出一个像素,可以将其中的一个盒子像素减少1px来解决这个问题。考拉布局加边框的布局。原创 2024-03-31 16:51:42 · 161 阅读 · 0 评论 -
【CSS】CSS水平居中方案
设置父元素的text-align:center。原创 2024-04-14 23:30:23 · 309 阅读 · 0 评论 -
【CSS】Flex布局中遇到的问题汇总
到底该怎么做呢,我们应该想这样一个问题,父元素设置为flex时,所有的子元素都将不再遵循行内元素或者块级元素的限制,默认的宽度(主轴的方向为x轴时)为0,高度最大为充满单行交叉轴的高度,所以为了解决盒子排布不规范,我们可以这样做。如图,显然,space-between并不能达到我们预期的效果,一般来说我们预期的效果应该是最后一行盒子从左到右依次排列,并空出一个位置。在最后一行中添加多余的元素,设置其宽度和其他盒子一样,高度为auto,这样子盒子因为有宽度会占据位置,因为没有高度不会撑开盒子,代码贴上。原创 2024-04-13 18:25:23 · 272 阅读 · 0 评论 -
【CSS】SVG图片属性及修改颜色
最近的开发中遇到了SVG不能修改颜色的问题,以前是直接用,没有研究过,现在搞个笔记记录下。原创 2024-04-13 08:35:03 · 3333 阅读 · 0 评论 -
【CSS】11.CSS补充属性white-space和text-overflow
white-space用于设置空白处理和换行规则。原创 2024-04-20 21:12:00 · 436 阅读 · 0 评论 -
【CSS基础】10.过度动画transition和动画animation
CSS trnasition提供了一种在更改CSS属性时控制动画速度的方法。可以让CSS的属性变化称为一个秩序一段时间的过程,而不是默认的立即生效比如在基础9中我们学到的trnaslate可以让一个元素移动,但瞬间就完成了我们可以利用trnasition让这个完成的过程有一定的动画效果属性可以控制的内容哪些属性需要进度过度动画何时开始,可以延时触发,比如2s后再进行动画持续多久(duration)动画的持续时间定义动画(匀速、先快后慢、先慢后快)timinganimation的定义。原创 2024-04-13 21:16:23 · 1059 阅读 · 0 评论 -
【CSS基础】9.形变transform
CSS transform属性允许对某个一个元素进行形变,包括旋转、位移、缩放、倾斜等并非所有的盒子都可以形变(通常来说行内级盒子不能进行形变)transform-origin:形变的原点在缩放scale和rotate的过程中,需要参照原点来进行形变transform-origin是一个CSS属性,并不是trnasfrom的一个函数一个值为x轴的原点默认为center二个值为x轴和y轴的原点,默认center。原创 2024-04-13 19:38:19 · 442 阅读 · 0 评论 -
【CSS】伪元素
伪元素常见的伪元素::first-line::first-letter::before::after为了区分伪类和伪元素,建议伪元素都使用2个冒号::first-line可以针对首行文本设置属性::first-letter可以针首字母设置属性::before 在一个元素前插件元素::after 在一个元素后插入元素原创 2024-03-29 08:29:12 · 356 阅读 · 0 评论 -
【CSS】高级元素:列表、表格、表单
常见的boolean属性有disabled、checked、readonly、multiple、autofocus、selected,只需要写上名称就代表这个属性。*其他取值查看文档:*https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input。select和option的使用。input和label的关系。textarea的使用。原创 2024-03-29 08:27:46 · 829 阅读 · 0 评论 -
【CSS】CSS定位元素
但这样有一个缺点,海报图对于一个网站上很重要的,应该用img标签实现。当一个定位元素的层级设置为负整数时,层级没有标准流的层级高。 元素按照标准流布局,所有元素的默认定位是static。方法1:利用background-position来进行。设置绝对定位元素的垂直水平居中。方法2:利用相对定位。原创 2024-03-31 15:49:11 · 1233 阅读 · 0 评论 -
【CSS布局】Flex 布局
举例:当设置wrap时,第五个盒子设置的高度为auto,也就是交叉轴的方向(如果交叉轴方向为从左到右,实现效果需设置宽度为auto) 在标准流中,我们通过元素的前后顺序来给元素进行排序,在flex布局中,每个元素都有order属性,默认为0。flex flow是flex-direction和flex-wrap的简写,可以任意位置,并且都可以省略。单独对某个item设置,可以覆盖container中的align-items的设置。设置主轴的方向,主轴设置了,交叉轴也就设置成功了。 属性值更大的排在后面。原创 2024-04-07 23:21:31 · 1055 阅读 · 0 评论 -
【CSS】结构伪类选择器
* 选择最后一个 *//* 选择最后3个元素 */原创 2024-03-31 14:45:45 · 266 阅读 · 0 评论 -
【CSS疑难点汇总】1.bor-box失效情况总结以及高宽设置为auto的情况
box-sizing是改变盒子宽高的计算方式,一般使用bor-box,消除padding和border对整个盒子的影响,但在没有明确给出宽高的情况下,box-sizing是没有效果的。如上图,我们并没有给box设置box-sizing:border-box,但box的高度被撑开了,宽度依旧和父元素相同,并没有被撑开,因为box继承了父亲的宽度,wdith为auto。现在明白宽度的继承和设置100%的区别了吧,设置了100%相当于明确给了子元素的宽度的数值。如上图,很明显,当box的宽度和高度为auto时。原创 2024-04-09 08:40:27 · 518 阅读 · 0 评论