padding | 易学教程

1、detail页面 /items/detail/:id

阅读更多关于 1、detail页面 /items/detail/:id

<template> <div class="item_detail"> <van-swipe :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="(item,index) in goods.pictureList" v-bind:key="index"><img :src="item.url"></van-swipe-item> </van-swipe> <div class="buy-area"> <h2 class="title">  {{goods.title}} </h2> <p class="des">  {{goods.desc}} </p> <div class="point"> {{goods.minScorePrice}} 积分 </div> </div> <div class="detail-title"> <span> 商品详情 </span> </div> <div class="content" v-html="goods.detail"> </div> <van-goods-action>

可继承和不可继承的属性

阅读更多关于可继承和不可继承的属性

css中默认会继承的属性：一是文本相关的属性，具体有：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing、二是列表相关的属性，具体如下：list-style-image、list-style-position、list-style-type、list-style. 还有一个属性比较重要的是 color 属性。 ·········································································································· 一、无继承性的属性 1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向 3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin

css margin知识全集

阅读更多关于 css margin知识全集

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。 Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 Margin的特性 margin始终是透明的。 margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin

本两周学习总结

阅读更多关于本两周学习总结

判断质数 const isPrime = num => { let bount = Math.floor(Math.sqrt(num)) for (let i = 2; i <= bount; i++) { if (num % i === 0) { return false } } return num >= 2 } getBoundingClientRect 获取页面元素的位置和判断元素是否在可视区域 getBoundingClienetRect 用于获取页面中某个元素的上,下,左,右,分别相对浏览器的位置该函数返回一个object 对象, 改对象有6个属性 top,left,right,bottom,widht,height width,height 是元素自身的宽高 const { innerHeight, innerWidth } = window; 视口的宽度,高度 isObject const isObject = obj => obj === Object(obj); EXAMPLES isObject([1, 2, 3, 4]); // true isObject([]); // true console.log({}===Object({})) //false 其实应该这样理解 Intl.NumberFormat 格式化数据类 const formatter =

CSS盒子模型（框模型）

阅读更多关于 CSS盒子模型（框模型）

一、如何理解盒子模型盒子模型（框模型）是css部分非常重要的一部分知识，CSS在处理网页的时候，认为每个元素都处在一个不可见的盒子中。盒子模型的构想，把所有的元素都想象成盒子，那么对网页进行布局的时候就可以理解为对盒子进行排列。至于要将相应的盒子摆放到网页相应的位置中即可完成页面布局。 CSS 盒子模型 ( Box Model ) 规定了元素框处理元素内容、内边距、边框和外边距的方式盒子模型包括 width宽度，height高度，border边框，padding内边距，margin外边距，content内容这几个部分。二、 CSS 盒子模型概述位置关系盒子模型最里面的部分是内容区域（content）；直接包裹着内容的是内边距（padding）；内边距的边缘是边框（border）；边框之外是外边框（margin），外边框默认值默认值是透明的，因此不会遮挡其后内容。三、盒子模型的组成一个盒子的实际高度、宽度：content + padding + border + margin 盒子模型中可以设置的属性有： 1、width / height : 设置的是内容区的高度和宽度（只是内容区的大小，而不是整个盒子的大小。） 2、 border边框: 详细内容点击链接转到有关border属性的博客 3、 padding内边距：

CSS深入了解之padding

阅读更多关于 CSS深入了解之padding

一、padding影响元素尺寸对于block水平元素 padding值大到一定境界，一定会影响尺寸； width非auto，padding值会影响尺寸（padding值越大，元素看起来越小）； width：auto或box-sizing：border-box；同时padding值没有特别的大，不影响尺寸对于inline水平元素水平padding会影响尺寸，垂直padding不影响尺寸，但是会影响背景颜色（占据空间变大）使用这一特性，可以实现高度可控的分割线 /*使用inline padding实现注册 | 退出登录 */  注册<span></span>登录  span{ padding:16px 6px 1px; margin-left:12px; border-left:2px solid; font-size:0; } 二、padding的特性 1、padding不支持任何形式的负值 2、padding百分比相对于宽度计算 /* block元素实现移动端屏幕题图占一半 */ <div class="container"> <div class="example"> <h2>padding..</h2> <h3>margin

JavaScript7-2 动态删除表格行

阅读更多关于 JavaScript7-2 动态删除表格行

实例：动态删除表格的行实例分析： 1）用for循环在每一行最后最个节点添加(oTable.rows[i].insert(5))一个节点delete。 2）每个delete的节点.onclick = myDelete。 3）myDelete的函数中，this.parentNode 来找到父节点然后用removeChild(子节点)删除节点。 <html> <head> <title>Insert title here</title> <style type ="text/css"> body{ background-color:#ebf5ff; margin:0px;padding:4px; text-align:center; border-collapse:collapse; } .datalist{ border:1px solid #0058a3; color:#0046a6; background-color:#d2e8ff; font-family:Arial; } .datalist caption{ font:bold 1.4em; font-size:18px; padding-bottom:5px; } .datalist th{ font-weight:bold; border:1px solid#0058a3; text-align:center;

css之深入理解padding

阅读更多关于 css之深入理解padding

一，对于block元素 padding是会影响元素的尺寸的。 DOM文档： <div class="box"></div> css清单： .box{ width:200px; height:200px; background-color: #ffed53; padding:20px; } 实际效果：元素大小240*240 ，因为有padding:20px. 结论：padding会对block元素的尺寸产生影响。二，对于block水平元素，但是width:auto或box-sizing为border-box的时候 DOM文档： <div class="box">文字的位置在哪里呢？</div> css清单： .box{ width:200px; height:200px; background-color: #ffed53; box-sizing:border-box; padding:0 10px; } 实际效果：box大小还是200*200,但是文字内容还是有了左padding----10px 当padding大小超过宽高时， css样式： .box{ width:200px; height:200px; background-color: #ffed53; box-sizing:border-box; padding:0 200px; } 实际效果：400px*200px

CSS盒模型

阅读更多关于 CSS盒模型

1、什么是CSS盒模型？CSS盒子模型包括元素、内边距、边框、外边距，如下图：　　　　 2、元素分类：元素可以分为块状元素、内联元素、内联块状元素。　　　　常用块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 　　　　常用内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 　　　　常用内联块状元素：<img>、<input> 　　　　（1）块状元素（也叫块级元素）特点每个块级元素都从新的一行开始，并且其后的元素也另起一行。元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。　　　　注：可以使用 display: block ，将元素转为块状元素，使之具备块状元素的特点。　　　　　　　　（2）内联元素（也叫行内元素）特点和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。　　　　注：可以使用 display: inline ，将元素转为内联元素，使之具备内联元素的特点。　　　　（3）内联块状元素特点

CSS盒模型

阅读更多关于 CSS盒模型

目录元素分类元素分类--块级元素元素分类--内联元素元素分类--内联块状元素盒模型--边框（一）盒模型--边框（二）盒模型--宽度和高度盒模型--填充盒模型--边界元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素) 和内联块状元素。常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 元素分类--块级元素什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将内联元素a 转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度

订阅 padding