CSS学习笔记
文章平均质量分 72
前端学习CSS
因为奋斗超太帅啦
人臭苍蝇来。
展开
-
WEB前端学习笔记(三)——CSS基础
CSS:层叠样式表。原创 2023-09-08 19:31:17 · 39 阅读 · 0 评论 -
WEB前端学习笔记(四)——CSS基础
作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素结果:在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式注意点:后代包括:儿子、孙子、重孙子……后代选择器中,选择器与选择器之前通过 空格 隔开作用:根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素结果:在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式注意点:子代只包括:儿子子代选择器中,选择器与选择器之前通过 > 隔开。原创 2023-09-09 10:30:07 · 78 阅读 · 0 评论 -
WEB前端学习笔记(五)——CSS布局
连写形式属性名:border属性值:单个取值的连写,取值之间以空格隔开如:border : 10px solid red;单方向设置场景:只给盒子的某个方向单独设置边框属性名:border - 方位名词属性值:连写的取值1.4。原创 2023-09-09 17:23:26 · 188 阅读 · 0 评论 -
WEB前端学习笔记(六)——CSS布局(定位+装饰)
①标准流块级元素独占一行 → 垂直布局行内元素/行内块元素一行显示多个 → 水平布局② 浮动可以让原本垂直布局的块级元素变成水平布局③定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况①可以解决盒子与盒子之间的层叠问题定位之后的元素层级最高,可以层叠在其他盒子上面②可以让盒子始终固定在屏幕中的某个位置。原创 2023-09-15 09:50:03 · 122 阅读 · 0 评论 -
WEB前端学习笔记(七)——CSS样式(补充与拓展)
分别取负值设置给盒子的background-position:x y。原创 2023-09-15 15:19:12 · 38 阅读 · 0 评论 -
WEB前端学习笔记(八)——字体图标与平面装换
字体图标字体图标展示的是图标,。处理简单的、颜色单一的图片。原创 2023-09-19 19:39:24 · 50 阅读 · 0 评论 -
WEB前端学习笔记(九)——空间装换+动画
Z轴是视线方向,移动效果应该是距离的远或近, 电脑屏幕是平面,默认无法观察远近效果。空间转换时,为元素添加近大远小、近实远虚的视觉效果。transform: rotateZ(值);transform: rotateX(值);transform: scaleX(倍数);transform: scaleY(倍数);transform: scaleZ(倍数);思考:生活中,同一个物体,观察距离不同,视觉上有什么区别?思考:默认情况下,为什么无法观察到Z轴位移效果?目标:使用scale实现空间缩放效果。原创 2023-09-23 13:18:27 · 34 阅读 · 0 评论 -
WEB前端学习笔记(十)——移动WEB(flex布局)
移动端和PC端网页不同点PC屏幕大,网页固定版心手机屏幕小, 网页宽度多数为100%原创 2023-09-24 19:45:03 · 98 阅读 · 0 评论 -
WEB前端学习笔记(十一)——移动WEB(移动适配rem+vw/vh)
px单位或百分比布局无法实现,px单位是绝对单位。手机屏幕大小不同,分辨率不同, 如何设置不同的HTML标签字号?思考:在px单位转换到rem单位过程中,哪项工作是最麻烦的?1rem = 1HTML字号大小。当某个条件成立, 执行对应的CSS样式。解决方案:可以通过Less实现。差异化的 CSS 样式。/* 注释内容 */CSS不支持计算写法。2.2 less运算。原创 2023-09-26 21:36:25 · 75 阅读 · 0 评论 -
WEB前端学习笔记(十二)——移动WEB(响应式布局+bootstrap)
能够根据设备宽度的变化,设置差异化样式开发常用写法媒体特性常用写法max-widthmin-width。原创 2023-09-28 11:44:46 · 237 阅读 · 0 评论 -
子盒子在父盒子水平垂直居中的方法
1.设置父盒子上边框,避免外边距塌陷问题。设置水平方向margin为auto,让子盒子在父盒子上水平居中;垂直方向margin移动父盒子高度的一半减去1像素。子盒子垂直方向移动自身高度的一半。2.使用flex布局实现。原创 2023-10-23 09:15:28 · 32 阅读 · 0 评论