首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【CSS】使用绝对定位 浮动解决外边距塌陷问题 ( 父容器 子元素设置内边距 边框 | 子元素设置浮动 | 子元素设置绝对定位 )

    / 边框 ---- 这里使用传统方法 : 父容器 / 子元素 设置 内边距 / 边框 ; 下面是 父容器设置 1 像素的 内边距 ; .father { width: 400px;...height: 400px; background-color: pink; /* 父容器 / 子元素设置内边距 / 边框 */ padding: 1px; } 完整代码如下..."> 展示效果 : 三、使用浮动解决外边距塌陷 - 子元素设置浮动 ---- 子元素设置浮动 ,.../ 子元素设置内边距 / 边框 */ /*padding: 1px;*/ } .son { /* 子元素设置浮动 解决外边距塌陷问题 */ float: left;.../ 子元素设置内边距 / 边框 */ /*padding: 1px;*/ } .son { /* 子元素设置绝对定位 解决外边距塌陷问题 */ /* 注意 : 子元素设置相对定位

    1.3K20

    三种 Loading 制作方案

    作者:JS_Even_JS 来源:https://segmentfault.com/a/1190000038692080 一、简介 Loading几乎是每个应用都会用到的一个组件。...二、通过border-radius绘制圆环 我们通常让一个元素变成圆形是先将一个元素设置长和宽相等的正方形,然后给这个元素设置一个border-radius值50%。... .loading-css { width: 50px; /*先将loading区域变成正方形*/ height: 50px...,并将颜色设置浅白色*/ border-top: 3px solid red; /*将上边框颜色设置红色高亮,以便旋转的时候能够看到旋转的效果*/ border-radius: 50%...因为该圆环的周长23.1420=125.6,约等于126,stroke-dasharray设置了实线(可见部分)长95,约等于圆的3/4,所以只能绘制到圆环的最高点位置,接下来是126的虚线,但是圆环周长只有

    3.2K10

    【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )

    , 可以查询到 盒子边框 相关的文档 , 文档中可以查询到边框的详细细节 : 2、边框设置语法 边框设置语法 : 设置边框宽度 : border-width 属性值 像素值 ; border-width...dashed : 设置 虚线边框 ; dotted : 设置 点线边框 ; border-style: solid; 设置边框颜色 : border-color: red; 代码示例 : <!.../* 边框样式-实线 */ /*border-style: solid;*/ /* 边框样式-虚线 */ /*border-style: dashed;*/ /* 边框样式-点线...> 效果展示 : 下图是 边框样式-点线 ; 边框样式-虚线 : 边框样式-实线 : 3、边框设置综合写法 盒子边框设置综合写法 : 在 border.../* 边框样式-实线 */ /*border-style: solid;*/ /* 边框样式-虚线 */ /*border-style: dashed;*/ /* 边框样式

    3.1K20

    手写实战应用:Vue拖拽插件的应用与选择

    大家好,我是程序视点的小二哥 因为项目上有一个在规定区域内自由拖拽的小需求,自己纯js写又有点小麻烦,就花了点时间寻找到这个小组件。...:parentH="2000"  > 修改组件的默认样式拖拽的组件在点击拖拽时,会有一个默认的虚线边框 图片可以在style里设置取消默认虚线// 取消默认外边框虚线 .vdr.active:before...:none; } 拖拽的层级vue-drag-resize的层级默认是第一个元素最小,然后依次递增 图片项目有个要求:当拖动元素时,始终保持拖动的元素在最上层,此时就需要监听拖动元素,把当前元素设置最高级使用...@clicked事件监听,当点击拖动元素时,可以传如此元素的索引,把此元素的层级设置最高,其他的设置最低        <VueDragResize...为了适配不同的电子白板,以往我们都是规定以rem单位,但是,插件传入的数据都是以px单位的,根本无法适配不同的屏幕所以,这个时候手写一个拖动元素,才是最为安全的。

    39030

    基于Vue的拖拽插件的实战应用,但最后我还是选择了手写

    大家好,我是前端实验室的大师兄 因为项目上有一个在规定区域内自由拖拽的小需求,自己纯js写又有点小麻烦,就花了点时间寻找到这个小组件。...="2000" > 修改组件的默认样式 拖拽的组件在点击拖拽时,会有一个默认的虚线边框 可以在style里设置取消默认虚线 // 取消默认外边框虚线 .vdr.active:before { display...:none; } 拖拽的层级 vue-drag-resize的层级默认是第一个元素最小,然后依次递增 项目有个要求:当拖动元素时,始终保持拖动的元素在最上层,此时就需要监听拖动元素,把当前元素设置最高级...使用@clicked事件监听,当点击拖动元素时,可以传如此元素的索引,把此元素的层级设置最高,其他的设置最低 <VueDragResize...为了适配不同的电子白板,以往我们都是规定以rem单位,但是,插件传入的数据都是以px单位的,根本无法适配不同的屏幕 所以,这个时候手写一个拖动元素,才是最为安全的 我已将手动拖拽的主要源码上传到github

    1.6K60

    CSS技术

    例:在所有 div 标签上修改字体颜色蓝色,字体大小 30 个像素。边框 1 像素黄色实线。并且修改所有 span 标签的字体颜色黄色,字体大小 20 个像素。边框 5 像素蓝色虚线。...在这里我们针对div标签边框设置的是 标签的边框1像素的黄色实线 标签的字体设置的是蓝色 标签的字体的大小30个像素 对span标签设置的是 标签的边框5像素的蓝色虚线 标签的字体黄色...标签进行设置 两个都是div标签 但是我们对两个div设置了id,两个id是不一样的 就类似于给起了个名字 名字是不相同的 对idid001的我们设置: 标签的边框1像素黄色实线 标签的字体蓝色...标签的字体大小30像素 对idid002的我们设置: 标签的边框5像素蓝色虚线 标签的字体红色 标签的字体大小20像素 class 选择器(类选择器) class 类型选择器的格式是: ....这个组合共同使用我们定义的css样式: 标签的字体蓝色 标签的字体大小20个像素 标签的边框一个像素的红色实线 然后我们在下面的标签中使用 第一个标签设置id=id01 第二个标签设置class

    58210

    原生JS快速实现拖放(drag and drop)效果

    容器的的classdroppable,用于接收被拖拽的元素,可被拖拽的元素classdraggable,同时设置draggable属性true,表示该元素可以被拖拽。2....默认情况下,只有图片、链接还有被选中的文字能被拖拽,其他元素需要设置draggabletrue才能被拖拽。...元素被拖动的过程中增加边框等效果;2. 当元素被拖动到容器上方时,容器也应增加样式表明容器可以接收一个被拖拽的元素。...元素被拖动到容器上方时容器的状态,增加灰色虚线border。...当draggable元素被拖动时,原来容器中的draggable元素并不会消失,需要我们手动将其隐藏(class设置invisible),如果同步操作会立马触发dragend事件导致拖动效果消失,所以在

    3.5K51

    CSS 技术

    例:在所有 div 标签上修改字体颜色蓝色,字体大小 30 个像素。边框 1 像素黄色实线。并且修改所有 span 标签的字体颜色黄色,字体大小 20 个像素。边框 5 像素蓝色虚线。...标签 2 效果: 在这里我们针对div标签边框设置的是 标签的边框1像素的黄色实线 标签的字体设置的是蓝色 标签的字体的大小30个像素 对span...标签设置的是 标签的边框5像素的蓝色虚线 标签的字体黄色 标签的字体大小20个像素 id 选择器 id 选择器的格式是: #id 属性值{ 属性:值; } id 选择器,可以让我们通过 id...两个都是div标签 但是我们对两个div设置了id,两个id是不一样的 就类似于给起了个名字 名字是不相同的 对idid001的我们设置: 标签的边框1像素黄色实线 标签的字体蓝色 标签的字体大小...css样式: 标签的字体蓝色 标签的字体大小20个像素 标签的边框一个像素的红色实线 然后我们在下面的标签中使用 第一个标签设置id=id01 第二个标签设置class=class01 剩余标签不设置

    64220

    CSS实现多重边框的5种方式

    优缺点: 只能实现双重边框 边框样式灵活,可以实现虚线等样式的边框 描边在盒模型之外,会与外部元素发生重叠 利用额外的div 利用额外的DIV嵌套的方式实现多重边框。...优缺点: 兼容性好 可以实现多重边框虚线边框等样式 需要额外的DIV元素,增加了代码复杂性 利用伪元素 利用伪元素(:before)的方式实现双重边框。...优缺点: 为了用阴影模拟边框,本例中使用了两个阴影效果,设置偏移值和模糊值0,并适当地设置阴影的尺寸,从而实现了双重边框的效果。...因为一个阴影重叠在另一个阴影之上,第二个阴影的尺寸要设置成第一个阴影尺寸的两倍。关键部分是将模糊值设成0,从而产生像边框一样的纯色阴影,看起来和边框一样。...和描边(outline)属性一样,box-shadow属性可能会和周边元素发生重叠,因此要适当地设置元素的外边距。box-shadow兼容性一般。 喜欢小编的点击关注哦,专注web技术分享!

    1.4K40
    领券