margin | 易学教程

HTML & CSS 之小白再续前缘

阅读更多关于 HTML & CSS 之小白再续前缘

CSS 盒子模型（点击查看官方解释）实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 content 内容区域 padding 内边距 border 边框 margin 外边距并且 margin , border , padding 分别有上下左右4个值如上图所示，可以很容易的得出盒子的大小，也就是对应标签真正大小。所谓的宽高不是 width 和 height ,而是盒子的宽度和高度。高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距 margin , border , padding 三个属性在设值的时候均可以对上下左右进行单独设置： margin-top: 100px; margin-bottom: 100px; margin-left: 50px; margin-right: 50px; 也可以一次性使用简写的方法设置： /* 上右下左*/ margin: 100px 100px 50px 50px; /* 上下左右*/ margin: 100px 50px; /* 上左右下*/ margin: 100px 20px 50px; 这里需要注意的是，多次设置时要先写大后写小： /* 错误写法 */ margin-left:

多特蒙德主题本地个人任务清单小demo，你值得尝试！

阅读更多关于多特蒙德主题本地个人任务清单小demo，你值得尝试！

一，demo背景： 1，可以熟悉原生js 2，平时不知道自己学完js要做些什么东西的小伙伴 3，自己写的，可以当做自己的作品 4，为广大想练习练习原生js的贡献一个素材二，实现功能： 1，新建/删除任务功能 2，设置/取消星标任务功能 3，设置/取消任务完成功能 4，过期任务自动删除功能（本例期限设置为了2天） 5，任务超时后禁止操作功能三，逻辑实现：把新建的一个任务就抽象成一个对象，该对象里面有自己的创建时间，内容，结束事件，是否为星标任务等等。然后这个对象字符串化存放到 localStorage 里，每次在要数据时，都从 localStorage 里面取出数据。最后就是用各种的数据进行 If..else 判断，渲染Dom。（过程中用到了很多字符串，数组方法，可以增加你对这些方法的熟练度）四，demo效果展示：完成了的任务：星标任务：五，代码展示： html： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LocalNotepad</title> <link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.css"> <link rel="stylesheet" type="text/css

Javascript 模拟鼠标框选操作

阅读更多关于 Javascript 模拟鼠标框选操作

按住鼠标键不动，拖动鼠标，会看到效果 <html> <head></head> <style> body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;margin-right:10px;margin-bottom:10px;} .seled{border:1px solid red;background-color:#D6DFF7;} </style> <script type="text/javascript"> (function() { document.onmousedown = function() { var selList = []; var fileNodes = document.getElementsByTagName("div"); for ( var i = 0; i < fileNodes.length; i++) { if (fileNodes[i].className.indexOf("fileDiv") != -1) { fileNodes[i].className = "fileDiv"; selList.push

一月杂记

阅读更多关于一月杂记

Less // 全局引用 @flex: { display: flex; align-items: center; justify-content: space-between; }; @margin: { width: @width; margin: 0 auto; }; // 加快编程速度 .ClassName{ @flex(); } 即: .ClassName{ display: flex; align-items: center; justify-content: space-between; } Vue数组监听来源： CSDN 作者：深海霸主丶痞老板链接： https://blog.csdn.net/qq_38062409/article/details/104055996

css3实战汇总（附源码）

阅读更多关于 css3实战汇总（附源码）

css这块知识难点不是很多，更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结，另一方面也是希望能教大家一些实用的技巧和高效开发css的方式，以提高在工作中的效率。我们将学到 box-shadow的高级应用制作自适应的椭圆纯css3实现饼图进度动画用border来实现一个对话框样式 css3 filter的简单应用 css3伪元素实现自定义复选框在线制作css3动画的利器正文 1.box-shadow的高级应用利用css3的新特性可以帮助我们实现各种意想不到的特效，接下来的几个案例我们来使用css3的box-shdow来实现，马上开始吧！实现水波动画知识点：box-shadow 想想我们如果不用css3，是怎么实现水波扩散的动画呢？想必一定是写一大堆的js才能实现如下的效果： css3实现核心代码 <style> .wave { margin-left: auto; margin-right: auto; width: 100px; height: 100px; border-radius: 100px; border: 2px solid #fff; text-align: center; line-height: 100px; color: #fff; background: #06c url

vue中v-bind使用三目运算符绑定class

阅读更多关于 vue中v-bind使用三目运算符绑定class

<template> <div>  <div :class="projectStatus === 2?outlineDelay:outline" @click="clickProject(userProjectId)">  <div v-if="projectStatus === 2" class="delay">{{delay}}</div>  <div><img class="picture item" :src="pictureName" /></div>  <div class="projectName">{{ projectName | ellipsis }}</div>  <div class="userName"> {{ gradeName }} </div> </div> </div> </template> data () { return { delay: '延期', // 延期状态显示的字段 outline: 'outline', // 非延期状态的外边框样式 outlineDelay: 'outlineDelay' // 延期状态的外边框样式 } }, <style scoped> /* 外边框样式 */ .outline {

二级菜单嵌套三级

阅读更多关于二级菜单嵌套三级

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  <html xmlns=" http://www.w3.org/1999/xhtml%22%3E%3Chead%3E%3Cmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>农禾之家_农禾之家官网</title> <link href="./农禾之家_农禾之家官网_files/mystyles.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> <!-- var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close

CSS盒子模型中外边距（margin）折叠详解

阅读更多关于 CSS盒子模型中外边距（margin）折叠详解

最近写项目过程中遇到一个CSS盒子模型中外边距（margin）折叠的情况，搞得我焦头烂额，之后再网上查阅了大量的资料，现做一个整理和总结，方便以后忘记的时候查阅，同时也供广大网友参考。如有错误或者总结方面不全的地方，欢饮广大网友指出。外边距折叠的概念：所谓外边距折叠就是相邻的两个或多个元素（含有子元素的情况）的外边距会在垂直方向上合并成一个一个外边距。 CSS盒子模型中外边距（margin）折叠的常见情形有如下2种：情况1、无子元素的相邻兄弟元素触发margin折叠的条件：两个元素之间没有被其他非空元素隔开时触发外边距折叠。情形说明： 1）如果两个元素的margin均为正值，则两个元素之间的margin=max(margin1,margin2)；附图说明： 2）如两个元素的margin负值，则两者之间的margin=min(margin1,magin2)，如图2 所示; 附图说明： 3）如果两个元素中有margin为正值，有一个为负值，则两者之间的margin=margin1+margin2，如图三中所示margin=-50px+25px=-25px; 情况2、子元素与父元素发生外边距折叠触发条件：父元素无外边框(border)、无内边距(padding)，且父元素与子元素之间无非空元素或文本信息时（子元素上边与父元素上边之间无非空元素文本信息

CSS入门指南-4：页面布局

阅读更多关于 CSS入门指南-4：页面布局

这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display 是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。 inline img 是一个标准的行内元素。你可以把两个 <img> 标签写在两行，但这并不影响图片再浏览器中的显示效果，它们会并列出现在一行上。而且标签直接的空白（标记中的两个<img>标签虽然分别位于两行，但这并不影响图片在浏览器中显示时的效果。图片是行内元素，所以它们显示的时候就会并列出现在一行上。而且，标签之间的空白（包括制表、回车和空格）都会被浏览器忽略。 a 元素是最常用的行内元素，它可以被用作链接。 none 另一个常用的 display 值是 none。一些特殊元素的默认 display 值是它，例如 script 。display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

自定义input[type=\"radio\"]的样式

阅读更多关于自定义input[type=\"radio\"]的样式

对于表单，input[type="radio"] 的样式总是不那么友好，在不同的浏览器中表现不一。 2017年11月28日更新对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后，也可以起到触发开关的作用。思路： 1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式； 2. 然后把真正的单选按钮隐藏起来； 3. 最后把生成内容美化一下。解决方法： 1. 一段简单的结构代码： <div class="female"> <input type="radio" id="female" name="sex" /> <label for="female">女</label> </div> <div class="male"> <input type="radio" id="male" name="sex" /> <label for="male">男<

订阅 margin