margin | 易学教程

盒子模型基础属性

阅读更多关于盒子模型基础属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子模型</title>  <style> #box10{ width: 100px; height: 200px; background-color: blueviolet; /*border:dashed 10px red ;*/ border:solid 10px red ; /*border:dashed 10px red ;*/ /*border:dotted 10px red ;*/ /*盒子模型内容*/ /*overflow: hidden;!* 内容被剪切，其余内容不可见*!*/ /*overflow: visible;!*内容不被裁剪，会呈现在元素框以外*!*/ /*overflow: scroll;!*内容被剪切，流动条显示其余内容*!*/ /*overflow: auto;!* 如果内容被剪裁则浏览器以流动条显示其他内容*!*/ /*overflow-x:scroll;*/ /*overflow-y:scroll;*/ /*text-overflow: clip;!*修改文本*!*/ /*text-overflow:

JavaScript,Dom,jQuery

阅读更多关于 JavaScript,Dom,jQuery

JavaScript JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript 语言的规则编写相应代码，浏览器可以解释出相应的处理。注：在编写代码时要养成一行代码以 “ ; ”（分号）结尾。因为在代码上线的时候，一般会对代码进行压缩，这时所有的JavaScript代码将被压缩为一行这时就需要以分号来识别一行代码的结束。 1，存在方式文件方式 <script tyoe="text/javascript" src="JS文件"></script> 代码块 <script type="text/javascript"> JS代码 </script> 2，JavaScript 代码存在位置 HTML 的 head 中 HTML 的body代码块底部（推荐，因为HTML是从上到下解析的，放到上面如果代码出现问题无法解析，网站内容就无法正常的显示影响用户体验度） 3，变量全局变量局部变量 JavaScript中变量声明非常容易出错，局部变量必须以 var 开头，如果不加表示默认声明的是全局变量 name = "seven" # 全局变量 var name = "seven" # 局部变量 4，注释 // # 单行注释 /* */ # 多行注释 5，数据类型数字（Number） var age = 18; var age

CSS盒模型

阅读更多关于 CSS盒模型

css盒模型：是网页布局的基石盒模型，从里到外包括： ①、内容区————鸡蛋 ②、内填充(补白)——泡沫 ③、盒子边框(可选)——快递盒子 ④、外边距——————盒子外部的距离 1、padding： padding的用法： ①、padding是长在内容和盒子之间的，在盒子内部 ②、padding是为了调整子元素在父元素里面位置关系 ③、padding的特点：padding值会把盒子撑大 ④、如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值 ⑤、给单一方向设置padding值： padding-left/right/top/bottom:; ⑥、padding 设置方法： padding为1个值四周 padding为2个值上下左右 padding为3个值上左右下 padding为4个值上右下左 ⑦、padding不能设置负值 ⑧、padding不会对背景图造成影响 ⑨、如果一个盒子没有设置固定的宽和高，添加padding是不用减的 2、margin： margin的用法： ①、margin长在元素之外的 ②、margin控制的是同级元素之间的位置关系 ③、margin不会对盒子本身的宽高造成影响 ④、给单一方向添加margin值： margin-left/right/bottom/top:; ⑤、margin的设置方法： margin

css 兼容性 IE和Firefox

阅读更多关于 css 兼容性 IE和Firefox

CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。　　常见兼容问题：　　1.DOCTYPE 影响 CSS 处理　　2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行　　3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中　　4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 　　5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式　　6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行　　7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以　　8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left

[PYQT]QSS使用，附自己的模板（算是扒OSX UI）

阅读更多关于 [PYQT]QSS使用，附自己的模板（算是扒OSX UI）

题记最近在做Python GUI开发，一直觉得自己的界面LOW爆了，所以想找一些好的资源，但真心没有太好的，最终只找到一个QSS编辑器，一个API，一个OSX的Sketch资源文件。就有了这个QSS文件，本人没有UI经验，调整了一套，算是对自己一个交待吧。一个QSS编辑器： https://github.com/hustlei/QssStylesheetEditor QssStylesheetEditor 支持预览，控件很全。一个API： https://doc.qt.io/qt-5/stylesheet-examples.html 官方例子。能用的都有了。源文件的位置在码云： https://gitee.com/aocshallo/mac-qss.git 1 QWidget{ 2 color: #222; 3 background-color: #C8F5F5F5; 4 } 5 6 QFrame, QLabel, QToolTip { 7 border: 1px solid #8D8D91; 8 border-radius: 5px; 9 padding: 1px; 10 background:#FFFFFF; 11 } 12 QLabel { 13 border: 0px solid #8D8D91; 14 padding: 2px; 15 background

机器学习第5章支持向量机

阅读更多关于机器学习第5章支持向量机

参考：作者的 Jupyter Notebook Chapter 5 – Support Vector Machines 支持向量机（简称SVM）是一个功能强大并且全面的机器学习模型，它能够执行线性或非线性分类、回归，甚至是异常值检测任务。它是机器学习领域最受欢迎的模型之一，任何对机器学习感兴趣的人都应该在工具箱中配备一个。SVM特别适用于中小型复杂数据集的分类。保存图片 from __future__ import division, print_function, unicode_literals import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt import os np.random.seed(42) mpl.rc('axes', labelsize=14) mpl.rc('xtick', labelsize=12) mpl.rc('ytick', labelsize=12) # Where to save the figures PROJECT_ROOT_DIR = "images" CHAPTER_ID = "traininglinearmodels" def save_fig(fig_id, tight_layout=True): path = os.path.join

python开发之DOM

阅读更多关于 python开发之DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。一.查找元素 1、直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 2、间接查找 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling //

响应式网站

阅读更多关于响应式网站

我们的眼睛在看东西时会自然地遵循一定的模式。通常从左上开始，然后从左到右，再从上到下。很多网页都是基于网格设计的，这说明网页是按列来布局的。响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。为什么是12列呢，因为12可以被2、3、4、6整除，能2、3、4、6等分。创建网格视图 CSS.css * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}* { border: 1px solid red !important;}.row{ width:100%; display: flex; flex-wrap: wrap; text-align: center;}.col-1{ width:8.3%;}.col-2{ width:16.6%;}.col-3{ width:25%; padding: 0.5%;}.col-4{ width:33.33%;}.col-5{ width:41.66%;}.col-6{ width:50%;}.col-7{ width:58.33%;}.col-8{ width:66.66%;}.col-9{ width:75%; padding

2014年最新前端开发面试题

阅读更多关于 2014年最新前端开发面试题

PS：在其基础上完善了一些答案，增加一些问题欢迎fork wj：）目录前言 HTML 部分 CSS 部分 JavaScript 部分其他问题优质网站推荐前言本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！面试有几点需注意：(来源程劭非老师 github:@wintercn) 面试题目：根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。题目类型：技术视野、项目细节、理论知识题，算法题，开放性题，案例题。进行追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。前端开发面试知识点大纲： HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript：数据类型、面向对象

可继承和不可继承的属性

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

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

订阅 margin