【夯实基础--CSS】
文章平均质量分 80
【夯实基础--CSS】
°PJ想做前端攻城狮
始终相信不能更进一步不是因为困难,而是畏惧困难的自己。所以想做前端攻城狮的PJ正在将键盘敲烂的路上,一直敲
展开
-
☀️详解Flex布局,从理论到案例实践(二)
前言上一篇说到了容器属性,本文就接着来讲项目属性。上一篇传送门如何理解容器属性和项目属性?容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul,项目属性给li。ul这个容器里面放了很多li项目。我是这么来理解的。好了,言归正传,xdm准备好了么?项目属性order取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。flex-grow取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。假..原创 2021-08-07 14:55:56 · 433 阅读 · 27 评论 -
☀️详解Flex布局,从理论到案例实践(一)
前言最开始接触flex布局,就是在接触居中布局时,看见 justify-content:center与align-items:center。完全看不懂。于是就去学flex。我想除了我之外的大部分人,也都是在被flex垂直水平居中方式所惊艳后才对其有所了解,以至于在日常开发中对于flex的使用,也确实更偏向于元素对齐方式的使用。这里我就想做一个系列来好好的讲一讲flex布局。Flex布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。..原创 2021-08-05 17:45:37 · 404 阅读 · 35 评论 -
☀️BFC是什么?如何触发?有什么应用场景?
面试官:说一说BFC吧我:??那是啥…????BFC是什么BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。触发条件一个HTML元素要创建BFC,原创 2021-08-01 14:25:32 · 560 阅读 · 28 评论 -
【夯实基础--CSS】=> px、em、rem和rpx的区别
在css中单位长度用的最多的是px、em、rem,这三个的区别是:px是固定的像素,一旦设置了就无法因为适应页面大小而改变。em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。em是相对于其父元素来设置字体大小的,一般都是以<body>的“font-size”为基准。这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。总之原创 2021-05-15 20:05:10 · 434 阅读 · 5 评论 -
【夯实基础--CSS】=> 高级技巧(雪碧图/滑动门/CSS三角形/字体图标(iconfont)等)
CSS高级技巧CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。cursor : default 小白 | pointer 小手 | move 移动 | text 文本鼠标放我身上查看效果哦:<ul> <li style="cursor:d原创 2021-05-15 19:37:23 · 513 阅读 · 0 评论 -
【夯实基础--CSS】=> 元素的显示和隐藏(display / overflow/ visibility)
元素的显示与隐藏目的: 让一个元素在页面中消失或者显示出来场景: 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!1.1 display 显示(重点)display设置或检索对象是否显示或如何显示。display: none 隐藏对象特点:隐藏之后,不再保留位置。display: block 除了转换为块级元素之外,同时还有显示元素的意思。实际开发场景:配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛1.2 visib原创 2021-05-15 18:54:15 · 510 阅读 · 0 评论 -
【夯实基础--CSS】=> 背景(background)
CSS背景(background)「1. 背景颜色」background-color: 颜色值; 默认的值是 transparent 透明的「2. 背景图片(image)」语法:background-image : none | url (url) ;例如:background-image: url(images/1.png);「3. 背景平铺(repeat)」background-repeat : repeat | no-repeat | repeat-x | repeat-y原创 2021-05-15 18:26:33 · 328 阅读 · 0 评论 -
【夯实基础--CSS】=> 标签显示模式(display:inline || blcok || inline-block)
标签显示模式(display)标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型,它们也称为块元素和行内元素。标签显示模式转换 display块转行内:display:inline;行内转块:display:block;块、行内元素转换为行内块:display: inline-block;「1. 块级元素(block-level)」常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、&原创 2021-05-15 18:16:42 · 309 阅读 · 0 评论 -
【夯实基础--CSS】=> 字体样式(font)、外观属性(行高)
CSS字体样式font字体「1. font-size」font-size属性用于设置字号(字体大小)谷歌浏览器默认的文字大小为16px不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小。p { font-size:20px; }单位相对长度单位、绝对长度单位「2. font-family」font-family属性用于设置哪一种字体。p { font-family:"微软雅黑";}指定多个字体,如果原创 2021-05-15 18:03:55 · 1035 阅读 · 0 评论 -
【夯实基础--CSS】=> 基础选择器
文章目录CSS基础选择器CSS选择器作用CSS基础选择器「1. 标签选择器」「2. 类选择器」「3. id选择器」「4. 通配符选择器」「5. 基础选择器总结」「6. 团队约定-选择器」CSS基础选择器CSS选择器作用找到指定的HTML页面元素,选择标签。CSS基础选择器「1. 标签选择器」标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。作用:可以把某一类标签全部选择出来。优点:快速为网页中同类型的标签统一样式缺点:不能设原创 2021-05-15 17:27:51 · 477 阅读 · 0 评论 -
【夯实基础--CSS】=>复合选择器
CSS复合选择器复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的「1. 后代选择器」又称为包含选择器用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间用 「空格」 分隔,先写父亲爷爷,再写儿子孙子。子孙后代都可以这么选择。或者说,它能选择任何包含在内 的标签。父级 子级{属性:属性值;属性:属性值;}.class h3 {color:red;font-size:16px;}当标签发生嵌套时,内层标签就成为外层标签的后代。子孙后代都可以原创 2021-05-15 17:21:22 · 331 阅读 · 0 评论 -
【夯实基础--CSS】=> 定位(position)
定位(position)「1. 定位详解」将盒子 「定」 在某一个 「位」 置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。所以,我们脑海应该有三种布局机制的上下顺序????????标准流在最底层 (海底)浮动 的盒子 在 中间层 (海面)定位的盒子 在 最上层 (天空)定位是用来布局的,它有两部分组成: 定位 = 定位模式 + 边偏移在 CSS 中,通过 top、bottom、left 和 right 属性定义元素的 「边偏移」:(方位名词)边偏移属性示例描述原创 2021-05-15 01:13:57 · 257 阅读 · 6 评论 -
【夯实基础--CSS】=>浮动(float)
浮动「1. CSS布局的三种机制」网页布局的核心——就是用CSS来摆放盒子。CSS 提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:A. 普通流(标准流)块级元素会独占一行,从上向下顺序排列;常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;常用元素:span、a、i、em等B. 浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行原创 2021-05-14 22:52:36 · 551 阅读 · 6 评论 -
【夯实基础--CSS】=> 盒子模型
前言其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。这三部分,无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。盒子模型网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置。最后把网页元素比如文字图片等等,放入盒子里面。1. 盒子模型(Box Model)盒子模型就是原创 2021-05-14 10:41:48 · 450 阅读 · 0 评论 -
【夯实基础--CSS】 => CSS三大特性
CSS 三大特性层叠 继承 优先级是我们学习CSS 必须掌握的三个特性。一、层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。样式冲突,遵循的原则是就近原则。 那个样式离着结构近,原创 2021-05-14 00:46:30 · 233 阅读 · 0 评论