1.1 CSS的"hello world" 二、CSS选择器及几种引用方式 2.1 id选择器 2.2 class选择器 2.3 几种引用方式 2.3.1 外部引用 2.3.2 内部引用 2.3.3 内联引用...示例： 所有p元素遵循这个样式，并且这个使用了内联样式 2.3.4 优先级 内联引用>内部引用>外部引用 ---- 三、CSS position...static定位 ：即 浏览器的默认的，写不写没啥区别，top、right、left、bottom不起作用*/ position: static; border: 3px solid...#73AD21; top: 50px; /*演示：这句话不起作用，可删去*/ left: 10px; /*演示：这句话不起作用，可删去*/ } div.fixed_1...*/ /* 对于Safari浏览器 */ position: -webkit-sticky; position: sticky; /* 到顶部20px位置不动 */
很简单，包围在外面的即容器，内部的即为项目。...属性名 说明 row（默认值） 主轴为水平方向，起点在左端。 row-reverse 主轴为水平方向，起点在右端。 column 主轴为垂直方向，起点在上沿。...column-reverse 主轴为垂直方向，起点在下沿 在这里说一下row-reverse，它的效果并不是简单的右对齐，假设如下代码 <div class="box-child...看效果我们可以看出项目1的上边框和项目2的文字顶部也就是“2”的最顶部是对齐的 6.align-content属性介绍 该属性定义了多根轴线（多行）的对齐方式。...如果项目只有一根轴线，该属性不起作用。 属性名 说明 flex-start 交叉轴的起点对齐，即居顶对齐 center 交叉轴居中对齐。
但在编程语言中，!通常是「取反」的意思，比如： const isValid = true; !isValid // false 初次接触CSS的工程师很可能会觉得!...对于单个块级元素，也存在「margin坍塌」 —— 如果一个元素内部没有内容，或者它的内容被清除（clear）了，那么这个元素的上下margin会发生塌陷。...这意味着，即使你为元素的顶部和底部都设置了margin，但实际上他们会合并成一个（值等于两者中的最大者，而不是它们的总和）。 这种塌陷行为可能会导致一些让人懵逼的布局问题。...比如，你试图通过增加一个元素的margin-bottom来增加它下面的空间，但不起作用，可能就是因为增加的 margin塌陷掉了。 所以，CSS工作组认为这不是个好设计。...++符号，即： // 当前的兄弟选择器 div ~ p { color: green; } // 期望的兄弟选择器 div ++ p { color: green; } 不知道上述改动，你能接受么
需要注意的是: scrollTop属性只能设置在本身包含滚动条的元素上，否则不起作用。因为包含滚动条的容器，含有overflow:scroll或者overflow:auto属性。...比如有如下代码： .scroll-wrapper...设置在scroll-inner上，则不起作用。 vue3选中真实dom 选中真实dom有两种方式。...searchDom.getBoundingClientRect() const scrollContenDistanceInfo = scrollContent.getBoundingClientRect() if(顶部超出
Vue.component() 方法定义了组件，而这个 mytemp 组件可以用在所有 vue 实例中，这种组件被称为 全局组件 私有组件 在具体的某个vue实例中，也可以定义组件，但是组件仅会在具体的 vue 实例中起作用...-- 使用组件的方式：将组件名作为标签名 --> var app = new Vue({ el: '#app...-- 用小写不起作用 --> var app = new Vue(...实例 ，所以它们与 new Vue 实例对象接收相同的参数选项 data、computed、watch、methods , 但 el例外； 虽然组件和实例对象可以接收相同的参数选项，但在具体使用中，vue
1.块级元素（block）与内联元素（inline）的区别： 1.1块元素，独占一行，宽高起作用：如：div , p , ul , ol ,table , menu ,h1~h6,li等 1.2...内联元素，可与其他内联元素同一行，宽高不起作用：如：span , q , input , img ,i等 通过display：block;或者display:inline两者可以相互转化。...* a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体...> 错误 （内联嵌套块级） 块元素可以嵌套块元素（不是所有块级都可以嵌套块级），或者是内联元素 正确 ... 正确（内联与内联并列一级） 错误（块级和内联并列一级了）
注意 没有结束标签，把标签写为 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。...但在PHP中用于打印一个数组时使用 示例： <!...比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。 首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字 示例： <!...上图中解释： 第一个a标签，顶部这个锚的名字叫做top。 然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#top）。.../ceshi.html#top">回到顶部 效果： ? 上面李四表示，点击之后，跳转到ceshi.html页面的top锚点中去。
【1】使用默认链接锚点 添加一个a链接，设置a链接的href属性值为”#top”即可实现 我在顶部 我在顶部 返回顶部 【3】使用自定义链接锚点 在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点 我在顶部 我在顶部 <!
内容比较基础，无奈我是菜鸟 1、Vue中字符串换行不起作用 {{item.content}} content字符串很长，内部的换行符\n不起作用。...由于Vue将其插值渲染成div内部文本后，文本并不换行，换行符显示为一个空格。...解决： {{item.content}} 其中div不能换行，如果换行后 首行缩进的距离很大。...v-if="true"> //表达式为真，显示 //为假，显示 v-if , v-else 中间不能有其他元素,以下是不能正确显示的。... //表达式为真，显示 其他元素，此时if else结构被打乱 //为假，显示 4、计算属性
NO.1 通过定位来解决** 话不多说上代码 1.body样式 ...-50%); background-color: black; } 通过分析发现translate里的50%相当于向做移动50px,这说明移动的是小盒子长宽的一半，所以里面的50%对于小盒子起作用...translate对于行内样式不起作用！ translate的优点在于不会对其他元素产生影响，比如挤开，在有些情况下可以灵活运用。
定位的使用包含两个部分： 定位的方式 偏移值 left,right,top,bottom偏移值准确的理解是“距离什么位置有多大” 如 top:100px; 距离顶部为100像素 （向下走）。...静态定位 所有的标准流都是静态定位 position:static; 一般用于将某些已经定位的元素还原成标准流，用的很少 偏移值对于静态定位来说不起作用，我们以后说的元素定位不包括静态定位 相对定位 相对定位是相对自己的标准流的位置进行定位移动 position:relative; 特性： 1....可以直接写宽高 （不论块级还是行内） 1.4. margin:auto对于脱标元素不起作用 巧妙运用：让一个定位盒子水平垂直居中 left: 50%; top: 50%; margin-left...1.1.脱标的元素不占标准流的位置 1.2.不会继承父级的的宽度，内容有多个就撑多大 （不论块级还是行内） 1.3.可以直接写宽高 （不论块级还是行内） 1.4.margin:auto对于脱标元素不起作用
bottom对元素进行位置改变操作啦~ 1.1.0 实例代码运行效果图# 1.1.1 static定位方式# 静态定位，浏览器的默认的，写不写没啥区别，top、right、left、bottom不起作用...div.static { position: static; border: 3px solid #73AD21; top: 50px; /*演示：这句话不起作用，可删去*/ left: 10px...; /*演示：这句话不起作用，可删去*/ } 1.1.2 fixed定位方式# 固定定位，元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说，是固定的，无论你怎么滑动窗口，它都在那儿雷打不动...div.sticky { position: -webkit-sticky; // 兼容Safari position: sticky; top: 20px; /* 到顶部20px位置不动 */...如果项目只有一根轴线，该属性不起作用。 常取值分别代表的意思如下： flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。
2.浏览器兼容问题五：图片默认有间距 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。...解决方法：a 在子标签最后清浮动{ } b 父标签添加{overflow：hidden...但在ie6中!important具有一个bug:在同一组css属性中，!important不起作用。
写法 【1】锚点 使用锚点链接是一种简单的返回顶部的功能实现。...该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="...如果没有提供该参数，默认为true 使用该方法的原理与使用<em>锚</em>点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到<em>顶部</em>按钮，使目标元素重新回到原来位置，则达到预期效果...id="box" class="box"> 2】动画增强 为回到顶部增加动画效果，滚动条以一定的速度回滚到顶部...id="box" class="box"> var timer = null; box.onclick
i.loli.net/2021/07/18/Bz95UFDrn4VAm6Y.png)] 1.1.1 static定位方式 静态定位，浏览器的默认的，写不写没啥区别，top、right、left、bottom不起作用...div.static { position: static; border: 3px solid #73AD21; top: 50px; /*演示：这句话不起作用，可删去*/...left: 10px; /*演示：这句话不起作用，可删去*/ } 1.1.2 fixed定位方式 固定定位，元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说，是固定的，无论你怎么滑动窗口...div.sticky { position: -webkit-sticky; // 兼容Safari position: sticky; top: 20px; /* 到顶部20px...如果项目只有一根轴线，该属性不起作用。
*/ position-area: top; /* 默认在顶部对齐 */ position-try: bottom; /* 尝试从底部定位 */ width...，则应用 */ @supports (inset-area: top) { .target { inset-area: top; /* 将插入区域设置为顶部...*/ } } anchor target /* 定义一个锚点元素 */ .anchor { anchor-name: --my-anchor...，则应用 */ @supports (inset-area: top) { .target { inset-area: top; /* 将插入区域设置为顶部
flex-direction 该属性决定了主轴以什么方向排列 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。...column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。...align-items: baseline; image.png align-items: stretch; image.png align-content 该元素定义了多条轴的对齐方式，当只有一根轴时，不起作用...它的特点： 它其实也是两列布局，只是它在右端 分为 顶部 和 主体 两部分， 顶部会放置一些点击左侧菜单关联的菜单，主体放置点击菜单显示的内容 如何进行布局 它和两列布局基本相同，不同点就是它在右端显示不一样...右端分为主体和顶部， 顶部 固定高度 , 主体 通过 flex:1 来达到自适应 右端容器通过 flex-direction: column; 指定子元素 按交叉轴(竖轴) 排列布局。
在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。...1.第一种情况（z-index无论设置多高都不起作用情况）： 这种情况发生的条件有三个： 1、父标签 position属性为relative； 2、问题标签无position属性（不包括static）；...eg:z-index层级不起作用，浮动会让z-index失效，代码如下: 1 DIV style="POSITION: relative; Z-INDEX: 9999"> 2 DIV> 4 DIV> 5 DIV> 解决办法： 在第一个relative...> 5 DIV>
注意：clear属性只会对自身起作用，而不会影响其他元素。... 定位（position） static static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。...class="d1">111 返回顶部 z-index #i2 { z-index: 999;...-- 顶部导航栏 开始 --> 玉米商城 玉米商城 <a
如 top:100px; 距离顶部为100像素 （向下走） 1.静态定位 所有标准流都是静态定位 语法：position:static <...没找到就一直往上级找，直到html 2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容），可以定义宽高，不占据标准流的空间 3.margin:auto对于设置过绝对定位的元素不起作用... 效果图 ?...总结： 1.会脱离文档流，不占据标准流的空间 2.不继承父元素的宽高，需要给自身定义宽高 3.margin:auto对固定定位的元素不起作用 4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置...（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效） 使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告 案例： 京东最右侧的小列表 案例效果图 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
