外边距和内边距 margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 padding: 用于控制内容与边框之间的距离； Border(边框) 围绕在内边距和内容外的边框。 Conten
我们知道，当一个div的高度是40px的时候，设置其line-height为40px，就能实现文字的垂直居中，这是为什么呢？ 行高，也就line-height的组成部分有三部分组成，文字大小，上间隙，下间隙。 如果元素的高是40px，文字大小为20px，那么他的上间隙和下间隙加起来就是40-20=20px. 平均一下就是，上间隙和下间隙
文章目录 做的什么开发过程遇到的问题，如何解决未解决的问题总结 做的什么 本网站简单的介绍了哈尔的移动城堡这部动漫，分为网站首页、剧情简介、角色介绍、作者介绍、影片介绍、联系我们6个页面。 页面展示 无法上传图片，一直失败，但能选择csdn提供的图片，没能解决。 index页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
css快捷方式 css的属性是非常多的，比如，padding-top、padding-bottom、background-color、background-repeat等。 但是除了这种笨拙的输入以外还有一种比较便捷的方式。 盒子模型的一些简写方式 例一 内边距简写 下面是非常正常的代码输入格式。 padding-top:0px;/*padding内边距*/
组件实例三大属性 refs React.createRef() <script type="text/babel"> //创建组件 class Demo extends React.Component{ /* React.createRef调用后可以返回一个容器， 该容器可以存储被ref所标识的节点，
li{ width: 18.7%; margin-right: 1.33%; padding: 20px 20px 20px; border-radius: 15px; margin-bottom: 20px; position: relative; transition: all 0.3s; background-color:#fff; @media screen and (max-width:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>自定义input[type='file']样式</title> </head> <body> <input type="file"/> <style type=
如图效果,两边是四个直角三角形定位拼接出来的 html: <div class="award"> <div class="triangle"> <span class="triangle1"></span> <span class="triangle2"></span
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ border: solid;
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background: skyblue; color: #FFFFFF; display: flex; justify-content: center;
margin和padding在许多地方往往效果都是一模一样，而且你也不能说这个一定得用margin那个一定要用padding，因为实际的效果都一样，你说margin用起来好他说padding用起来会更好，但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的： 何时应当使用margin： 需要在border外侧
在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下还有这样的考虑到各种可能出现的场景，抽象出以下几种案例，一起来看看实现吧一、最佳实现方式首先，碰到这类布局的最佳实现肯定是mask遮
创建两块带有overflow: hidden属性的div，拼凑成一个正方形 合理利用border的上右（或下左）边框和transform的旋转属性，基于两个div实现一个环形边框 两个环形边框各旋转180°，可以将环形边框全部隐藏 基于你的需求，动态旋转一个或两个div，可以实现进度条的效果 代码如下 <html> <bo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title&
在开发vue项目时，element-plus按钮的focus样式不是我想要的，然后就想覆盖它的样式，但是发现元素hover效果失效，我的写法是这样的： .close-pop-btn{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; width: 20px; height: 20px; line-heigh
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st
原文：https://www.jq22.com/webqd6733 <div class="container"> <div class="box"> <img src="http://www.jq22.com/img/cs/500x500-1.png" alt=""> <h2>你好啊！1</h2> <p
html构建主题页面 <body> <div class="head"> <ul> <li><input type="checkbox" class="all"> 全选</li> <li class="good">商品</li> <
边框与圆角 border的三要素 border: 1px solid red; border-width（线型） dotted-点状线 dashed-虚线 solid-实线 border-style（线宽度） 如：1px border-color（线颜色） 如：red 四个方向的边框 border-top: border-right: border-bottom: border-left: 也可以使用： border-top: 1px solid
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 在任何项目都中会出现需要加载的数据的场景，大多数都会给一个loading的交互提示，这期我们就做一个超级好看炫酷的加载动画。大家可以封装一下，进行复用。 <!DOCTYPE html> <html lang="en">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib
设置html{font-size：20px} 里面包含的标签设置 rem 1rem就等于 html 的font-size = 20px 所以实现动态的比例缩放 可以根据window.onresize 来监听可见视图的变化 来 改变html document.documentElement.fontSize = document.documentElement.clientwidth / (所需变化元素宽
/* padding也是上右下左四个方向 */ /* 覆盖写法 */ /* padding: 5px; padding-left: 1px; */ /* 一次性给出四个方向的设定 */ padding: 5px 5px 5px 1px; 练习： <head> <style type="text/css"> a {
1.列举你知道的css选择器 一.基础选择器 标签（元素）选择器 p{} 类（class）选择器 .active{} id（身份证号）选择器 #peiqi{} 二.高级选择器 后代选择器 div a{} 子代选择器 .wrap>a{} 组合选择器 h3,span{} 交集选择器 h2.active{} 伪类选择器 没有被访问过a的状态 a:link{ color:oran
