![](https://img-blog.csdnimg.cn/direct/f982e37a18fd4e7482a6b476adfd021a.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS详细
文章平均质量分 88
根据WebGIS开发所需的前端知识,系统并深入地学习CSS。
满分观察网友z
过单行线马路看两边
展开
-
CSS关于居中的问题
由于字体设计原因,靠上述办法实现的居中,并不是绝对的垂直居中,但如果一行中都是文字,不会太影响观感。我们可以用百分比来表示,子元素相对父元素移动 50%的距离后,再根据子元素的外边距进行调整。值是写死的,如果 son 的宽度发生改变,子元素也无法水平居中。是写死的,如果父元素的宽度发生改变,子元素就无法水平居中了。子绝父相,子元素设置以下属性,也能进行水平垂直居中。子元素 y 轴移动的距离是父子元素高度差的一半,子元素 x 轴移动的距离是父子元素宽度差的一半。子元素相对父元素移动 50%的距离后,使用。原创 2024-07-10 15:31:18 · 699 阅读 · 0 评论 -
CSS时钟案例
* 向左上移动自身的50% *//* 沿底部旋转 *//* 沿底部旋转 *//* 沿底部旋转 *//* 中间黑点 *//* 添加动画 *//* 定义动画 */原创 2024-03-24 08:07:41 · 1027 阅读 · 0 评论 -
个人简历项目准备
完整列表请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media。完整列表请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media。离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。相对长度,相对于根元素 html 里面的字体尺寸,不会继承父级的尺寸大小。相对长度,默认相对于浏览器的默认字体尺寸,会继承父级元素的字体大小。从上往下,从左往右,从外向里。原创 2024-03-23 11:47:57 · 876 阅读 · 0 评论 -
grid布局
网格间距(Column Gap)指的是两个网格单元之间的网格横向间距或网格纵向间距。网格是一组相交的水平线和垂直线,它定义了网格的列和行。网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。网格元素的垂直线方向称为列(Column)。网格元素的水平线方向称为行(Row)。通常我们用 gap 表示元素的间隙。/* fr代表可用空间的1等分 */列与列,行与行之间的交接处。/* 开启grid布局 *//* 设置行和列的间隙 */原创 2024-03-23 11:44:58 · 825 阅读 · 0 评论 -
flex布局
文章目录1. 概念2. 和浮动的区别3. 伸缩容器和伸缩项目3.1. 伸缩容器3.2. 伸缩项目4. 主轴与侧轴5. 主轴属性6. 纵轴属性6.1. align-self 示例7. flex 实现水平垂直居中7.1. 方法一7.2. 方法二8. 伸缩性8.1. flex-basis8.2. flex-shrink8.3. flex-grow(伸)8.4. flex 复合属性9. 布局技巧10. gap 属性11. 小米模块实现11.1. 演示效果11.2. 分析思路11.3. 代码实现11.4. 补充11.原创 2024-03-22 15:22:31 · 1195 阅读 · 0 评论 -
CSS其他属性
注意:这里给图片宽度 100px,是因为图片过大,适当地缩小图片,没有影响的,因为父元素没有设置宽高,内容是由子元素撑开的。用于指定同一行元素之间,或表格单元格内文字的垂直对齐方式。图片和文字在一行显示的时候,图片底部和文字的底部并没有对齐。如果父元素只有图片,没有文字的话,可以给父元素设置。,除了 baseline 外,其他值都可以解决。如果单单解决空白问题,而不是文字对齐底端,如果父元素只有一张图片,可以给图片加。之后,文字居中了但是图片没有居中。,把子元素放置在父元素的中部。,文字就能对齐底端了。原创 2024-03-21 12:37:23 · 1085 阅读 · 0 评论 -
CSS字体图标
也有样式,如下,如果使用元素选择器修改字体图标的字体大小,会修改不了,因为样式类选择器优先级比元素选择器优先级高。本质就是一个字体,可以灵活修改它的样式,降低服务器请求的次数,同时相比图片更加清晰。在修改字体图标的时候,不要用元素选择器进行修改,建议用对应的。属于在线字体库,不需要下载字体包,直接在线引入。下载的文件也有使用方法,可以按照教程来。引入字体包中的 css 样式。将下载好的字体包拖到项目中。挑选类名来展示图标。原创 2024-03-21 12:36:25 · 526 阅读 · 0 评论 -
CSS定位
也是一种布局方式,可以让子元素自由摆放在页面中的任意位置(叠加效果)。/* 对cover,通过伪元素模拟生成,子绝父相来实现 *//* 使用transform向上移动自身100% */相对于浏览器进行的定位,让盒子固定在屏幕的某一个位置。定位(定位的优先级是最高的,可以叠加在其他元素之上),不会脱离文档流,这样对页面的布局的影响是最小的。子元素设置绝对定位,父元素设置相对定位。可以让子元素相对于父元素进行自由移动。相对于最近有定位的祖先元素进行移动。/* 对c2进行相对定位 *//* 可写可不写 */原创 2024-03-20 08:18:31 · 1217 阅读 · 0 评论 -
CSS盒子模型
!!(content)、(padding)、(border)、(margin))四个属性。原创 2024-03-19 12:02:27 · 1059 阅读 · 0 评论 -
CSS浮动
文章目录文档流浮动简介浮动元素特点浮动属性浮动小练习练习 1练习 2练习 3练习 4导航条案例改进改进前浮动改进后浮动练习个人简历页面布局方式一方式二清除浮动影响解决方式文档流也叫标准流,行内元素可以水平排布,块级元素一般垂直排布。浮动简介在最初,浮动是用来实现文字环绕图片效果的,也就是图文混排,现在浮动是主流的页面布局方式之一。浮动元素特点脱离文档流(浏览器的标准流),在文档流中不占位置,相当于飘起来。不管浮动前是什么元素,浮动后的默认宽与高都是被内容撑开(尽可能小),而且可以设置宽高。原创 2024-03-18 09:30:34 · 1156 阅读 · 0 评论 -
CSS其他属性
注意:这里给图片宽度 100px,是因为图片过大,适当地缩小图片,没有影响的,因为父元素没有设置宽高,内容是由子元素撑开的。用于指定同一行元素之间,或表格单元格内文字的垂直对齐方式。图片和文字在一行显示的时候,图片底部和文字的底部并没有对齐。如果父元素只有图片,没有文字的话,可以给父元素设置。,除了 baseline 外,其他值都可以解决。如果单单解决空白问题,而不是文字对齐底端,如果父元素只有一张图片,可以给图片加。之后,文字居中了但是图片没有居中。,把子元素放置在父元素的中部。,文字就能对齐底端了。原创 2024-03-16 08:12:44 · 910 阅读 · 0 评论 -
emment语法
本质使用的就是元素选择器,例如div p a标签等等。原创 2024-03-16 08:05:41 · 488 阅读 · 0 评论 -
CSS扩展选择器
选中多个选择器对应的元素。一般用来设置表格的边框。语法:选择器1, 选择器2, 选择器3, … 选择器n {}原创 2024-03-16 08:03:46 · 1150 阅读 · 0 评论 -
CSS基本选择器
基本选择器特点通配选择器选择所有的元素元素选择器选中同种标签的元素类选择器根据元素的类进行选择id选择器根据元素的id进行选择。原创 2024-03-14 11:56:28 · 584 阅读 · 0 评论 -
CSS概念及入门
CSS 的全称为:层叠样式表 ( Cascading Style Sheets )。CSS 也是一种标记语言,用于给 HTML 结构设置样式,例如:文字大小、颜色、元素宽高等等。主流的布局方式:div+css。原创 2024-03-14 11:55:56 · 718 阅读 · 0 评论