菜鸟前端 CSS3
文章平均质量分 59
菜园前端
快乐的做一个前端小菜鸟
展开
-
想要学好前端必须理解的布局方式——响应式布局
在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸以及展示方式可能会改变。通常使用 @media 多媒体查询来实现响应式布局。以下简单模拟一个响应式布局,在不同设备/分辨率下实现不同的展示效果。一套代码兼容 web 端、平板、以及手机端网页。工作量大,UI 需要设计多个平台的版本。当分辨率较大时可采用一行多个元素的形式。当分辨率过小时采用一行一个元素的形式。页面能够兼容不同分辨率的屏幕。原创 2023-03-30 17:34:29 · 80 阅读 · 0 评论 -
想要学好前端必须理解的布局方式------自适应布局
因为开发的时候需要考虑多种分辨率下的情况,会额外增加一些工作量。其次是当分辨率过于小时,可能会发生内容的拥挤。在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸可能会改变,但是原有的展示方式不会改变。当分辨率改为 150px * 320px 时,也能够正常的展示效果。最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。以下简单模拟一个自适应元素,在不同设备/分辨率下展示的效果。像这种元素多并且容器的尺寸也过于小时,就会导致内容拥挤。元素的宽度是自适应的,根据父级容器宽度决定。原创 2023-03-24 19:00:21 · 105 阅读 · 0 评论 -
想要学好前端必须理解的布局方式------静态布局
静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图 1:1 还原出来即可,无需考虑任何兼容性问题,所以工作量大大减少。因为是固定的尺寸,所以在分辨率太低时会展示出滚动条,并且使得部分元素不在屏幕范围内,可读性比较差。当分辨率过小就会发生问题了,例如盒子超出了该容器范围,在复杂的布局情况下还会导致布局错乱。最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。原创 2023-03-24 18:58:59 · 96 阅读 · 0 评论 -
想学会flex布局,我推荐你看这篇文章!!!
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖容器的 align-items 属性,默认值为 auto,表示继承父级元素的 align-items 属性,如果没有父级元素,则等同 stretch。分别给三个项目设置 flex-grow: 1 flex-grow: 2 flex-grow: 1 ,假设一个项目的 flex-grow 属性为 2,其他都为 1,则前者占据的剩余空间将会比其他项目多一倍。如果所有项目的 flex-grow 属性都为 1,则它们会等比分配剩余空间。原创 2023-03-16 15:05:56 · 59 阅读 · 0 评论 -
绝对、相对、固定定位三者区别,你都知道哪些?
刚才已经介绍了绝对定位可以通过 left 和 top 来控制距离文档左上角的距离,也就是说 left 和 top 是相对于 "文档" 进行定位的。尽管出现了滚动条也是丝毫不影响。现在把 box1 放进 box2 里面,并且给 box2 设置相对定位 position: relative 那么 box1 的 left 和 top 就会相对于 box2 的左上角原点。可以发现尽管 box1 在 box2 里面,并且 box2 也设置了相对定位,box1 依然直接无视了,直接相对于 "可视区左上角" 进行定位。原创 2023-03-13 12:18:10 · 163 阅读 · 0 评论 -
CSS中的权重划分
以下案例存在类选择器和 id 选择器,两个选择器同时都选中了 “小明” 这个 div 并且都设置了字体颜色。最终结果是显示了红色的 "小明",因为 .box1 .box2 是两层,而 .box1 是一层。选择器权重划分代表有多个选择器同时选中同一个元素时,应该以谁的为准,这里就会涉及到权重的问题。最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。最终结果是显示了红色的 "小明",id 选择器优先级相对较高。不同层级指后代、子代选择器的优先级问题,层级越深优先级越高。原创 2023-03-08 20:44:50 · 83 阅读 · 0 评论 -
CSS中的选择器
我们可以想象一个元素,其实就是一个人,那我该如何找到这个人呢?例如可以通过 id 选择器的方式,就像是通过身份证号码找到 TA。也可以通过标签选择器找到 TA,就像是通过喊 TA 的名字的方式。最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。小伙伴们不需要再花时间去写笔记,或者是去网上找笔记了。支持移动端和 PC 端阅读,深色和浅色模式。面试高频提问和你想要的笔记都帮你写好了。css选择器代表如何选中某个元素。原创 2023-03-06 19:22:21 · 79 阅读 · 0 评论 -
CSS3中的基础样式
最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。小伙伴们不需要再花时间去写笔记,或者是去网上找笔记了。z-index 设置 -2 以下则在页面中不会显示。支持移动端和 PC 端阅读,深色和浅色模式。面试高频提问和你想要的笔记都帮你写好了。内边距(写法与 margin 相同)原创 2023-03-01 20:58:47 · 71 阅读 · 0 评论 -
CSS3介绍
旧版的 IE 浏览器与其它浏览器解析盒子模型会出现差异,例如 IE 会把 border 边框 和 padding 内边距计算在盒子的 width / height 宽度里面,而其它浏览器则是相反,不包含 border 边框和 padding 内边距的。但是在实际开发中,前者是相对更加灵活的,但是 W3C 规范中规定了它们不能被包含在其中,为了解决这个问题,在新的 css3 标准中新增了 box-sizing 属性,用于切换两种盒子模型。最全面的前端笔记来啦,包含了入门到入行的笔记,还支持实时效果预览。原创 2023-02-27 20:30:38 · 336 阅读 · 0 评论 -
CSS介绍
CSS 指层叠样式表 (Cascading Style Sheets),理解为 CSS 样式就可以了。比如我们在页面中添加了一个 div ,我想给这个 div 设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过 CSS 样式来实现。现实生活举例,body 里面的所有标签就像是不同的一个人,每个人的特征都不同。这个衣服你可以给任何一个人穿,也就是可以给任何一个标签使用。一个人可以穿多件衣服,也可以多个人穿同一件衣服。CSS 中定义颜色使用十六进制( hex )表示法为红,绿,蓝的颜色值结合。原创 2023-02-26 21:23:10 · 149 阅读 · 0 评论