首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 list-style: none;                 ...这里就可以用margin -1px(取决你边框的宽度)来解决。...加入这行代码的样式,如下图  下面我们就来分析这就话,对于边框的top,和left向上和向左移动一个而对于right和bottom它们会把紧跟其后的元素拉过来。...其实每个li都向上和向左在原来的基础移动了1px,对于bottom边框把下方紧随其后的top边框拉过来之后,top边框也要向上移动1px,刚好重合。...还有其他的解决方法,就是重合的边框你可以设置:border-top(bottom或left或right):none;这样的话也可以取消边框

3K00

CSS技术

例:在所有 div 标签上修改字体颜色蓝色,字体大小 30 个像素。边框 1 像素黄色实线。并且修改所有 span 标签的字体颜色黄色,字体大小 20 个像素。边框 5 像素蓝色虚线。...> 效果: 在这里我们针对div标签边框设置的是 标签的边框1像素的黄色实线 标签的字体设置的是蓝色 标签的字体的大小30个像素 对span标签设置的是 标签的边框5像素的蓝色虚线 标签的字体黄色...: 标签的边框1像素黄色实线 标签的字体蓝色 标签的字体大小30像素 对idid002的我们设置: 标签的边框5像素蓝色虚线 标签的字体红色 标签的字体大小20像素 class 选择器(...修改 class 属性值 class02 的 div 标签,字体颜色灰色,字体大小 26 个像素。边框 1 像素红色实线。...边框 1 像素黄色实线

54010

CSS 技术

例:在所有 div 标签上修改字体颜色蓝色,字体大小 30 个像素。边框 1 像素黄色实线。并且修改所有 span 标签的字体颜色黄色,字体大小 20 个像素。边框 5 像素蓝色虚线。...> 效果: 在这里我们针对div标签边框设置的是 标签的边框1像素的黄色实线 标签的字体设置的是蓝色 标签的字体的大小30个像素 对span标签设置的是 标签的边框5像素的蓝色虚线 标签的字体黄色...: 标签的边框1像素黄色实线 标签的字体蓝色 标签的字体大小30像素 对idid002的我们设置: 标签的边框5像素蓝色点线 标签的字体红色 标签的字体大小20像素 class 选择器(类选择器...修改 class 属性值 class02 的 div 标签,字体颜色灰色,字体大小 26 个像素。边框 1 像素红色实线。...边框 1 像素黄色实线

59420

HTML基础02-HTML标签(

02-HTML标签() 01-HTML语法规范 1.1基本语法概述 HTML标签是由尖括号包围的关键词,例如。...3.2lang 语言种类 用来定义当前文档显示的语言: en定义语言英文,表示该页面是一个英文网页 zh-CN定义语言中文,表示该页面是一个中文网页 实际,对于文档显示来说,定义en的文档也可以显示中文...,同样定义zh-CN的文档也可以显示英文。... 我是一个段落标签 pparagraph的缩写,意为段落 标签语义:可以把HTML文档分割若干段落 特点: 文本在一个段落中会根据浏览器窗口的大小自动换行 段落和段落之间保有空隙...特点: 标签用来布局,但是一行只能放一个,可以理解一个大盒子 标签用来布局,一行可以放多个span,可以理解小盒子 4.5图片标签和路径(重点) 注

82420

元素添加边框,你有多少种好办法?

作者:莫卓颖 背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从而造成布局跳动。...方案一 实现思路:元素中预先设置边框边框的颜色与元素所在父元素背景色一致,边框大小与hover时候的边框大小一致,鼠标hover过元素的时候只需要设置边框颜色便可。...:relative,然后添加额外隐藏的边框元素,鼠标hover过元素的时候显示提前隐藏的边框元素 兼容问题:无 实现代码: HTML结构 ...,即设置盒模型 容器width = border + padding + 内width 兼容问题: 实现代码: HTML结构 ...border-box; border: 2px solid yellow; } 方案四 实现思路:当hover过元素的时候,利用h5的新属性box-shadow元素添加实体的阴影作为边框

92400

元素添加边框,你有多少种好办法?

本文作者:IMWeb 莫卓颖 原文出处:IMWeb社区 未经同意,禁止转载 背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从而造成布局跳动...方案一 实现思路:元素中预先设置边框边框的颜色与元素所在父元素背景色一致,边框大小与hover时候的边框大小一致,鼠标hover过元素的时候只需要设置边框颜色便可。...兼容问题:无 实现代码: html结构 CSS .parent{...:relative,然后添加额外隐藏的边框元素,鼠标hover过元素的时候显示提前隐藏的边框元素 兼容问题:无 实现代码: HTML结构 ...border-box; border: 2px solid yellow; } 方案四 实现思路:当hover过元素的时候,利用h5的新属性box-shadow元素添加实体的阴影作为边框

64520

元素添加边框,你有多少种好办法?

背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从而造成布局跳动。...方案一 实现思路:元素中预先设置边框边框的颜色与元素所在父元素背景色一致,边框大小与hover时候的边框大小一致,鼠标hover过元素的时候只需要设置边框颜色便可。...兼容问题:无 实现代码: html结构 CSS .parent{ width...:relative,然后添加额外隐藏的边框元素,鼠标hover过元素的时候显示提前隐藏的边框元素 兼容问题:无 实现代码: HTML结构 ...border-box; border: 2px solid yellow; } 方案四 实现思路:当hover过元素的时候,利用h5的新属性box-shadow元素添加实体的阴影作为边框

89070

盒子模型

在大多浏览器中呈现为实线 4 dashed 虚线。...在大多浏览器中呈现为实线 5 solid 实线 6 double 双线 7 groove 3D凹槽边框 8 ridge 3D垄状边框 9 inset 3Dinset边框 10 outset 3Doutset...边框 11 inherit 从父元素继承边框样式 四个不同方向来表示( 下 左 右) border-[left | right | top | bottom]-width border-[left...margin值auto,实现水平方向居中效果(由浏览器计算外边距) 外边距属性 垂直方向,两个相邻元素都设置外边距,外边距会发生合并 合并后外边距高度 = 两个发生合并的外边距的最大值 HTML元素分类...,元素前后没有换行符** block 元素将显示块级元素,元素前后带有换行符** inline-block 行内块元素,元素显示inline,具有block相应特性** none 此元素不会被显示*

87130

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

盒子边框 相关的文档 , 文档中可以查询到边框的详细细节 : 2、边框设置语法 边框设置语法 : 设置边框宽度 : border-width 属性值 像素值 ; border-width...: 10px; 设置边框样式 : border-style 属性值 设置边框样式 , 可设置的值由如下选择 : none : 默认选项 , 忽略边框宽度 ; solid : 设置 实线边框 ;.../* 边框样式-实线 */ /*border-style: solid;*/ /* 边框样式-虚线 */ /*border-style: dashed;*/ /* 边框样式-点线...> 效果展示 : 下图是 边框样式-点线 ; 边框样式-虚线 : 边框样式-实线 : 3、边框设置综合写法 盒子边框设置综合写法 : 在 border 属性 后设置 边框宽度 边框样式.../* 边框样式-实线 */ /*border-style: solid;*/ /* 边框样式-虚线 */ /*border-style: dashed;*/ /* 边框样式

3K20
领券