border | 易学教程

盒子模型基础属性

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

<!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

大战border的0.5px

阅读更多关于大战border的0.5px

前言这个问题之前就遇到过了，参考了很多资料，因为怕改动太多，后面采取了通过js判断dpr,修改viewport的scale值。本以为解决了，没想到最近UI提出了安卓手机上线很粗的问题。我认真回去看了代码，发现确实没注意到。之前的代码是这样的： ; (function(f, i) { var b = i.documentElement; var e = f.navigator.appVersion; var g = e.match(/android/gi); var c = e.match(/iphone/gi); var k = f.devicePixelRatio; var j = 1, d = 1; if (c) { if (k >= 3) { j = 3 } else { if (k >= 2) { j = 2 } else { j = 1 } } } else { j = 1 } d = 1 / j; var h = i.querySelector('meta[name="viewport"]'); if (!h) { h = i.createElement("meta"); h.setAttribute("name", "viewport"); if (b.firstElementChild) { b.firstElementChild.appendChild

[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

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

CSS布局 display，position， float

阅读更多关于 CSS布局 display，position， float

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在 hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度

Html position（static | absolute | fixed | relative）定位

阅读更多关于 Html position（static | absolute | fixed | relative）定位

语法： position : static | absolute | fixed | relative 参数： static : 无特殊定位，对象遵循HTML定位默认规则 absolute : 绝对定位。将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性进行绝对定位。而其层叠通过 z-index 属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占 relative : 相对定位。对象不能想绝对定位一样层叠，但可依据 left ， right ， top ， bottom 等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。 positon 名称 (1) 是否将对象脱离文档流 (2) 偏移参照对象偏移属性 (3) 原先位置是否会被其他元素占用 (4) 是否能通过z-index层叠 absolute 绝对定位是相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点） left ， right ， top ， bottom 是是 relative

可继承和不可继承的属性

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

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布局——display，position，float属性

阅读更多关于 CSS布局——display，position，float属性

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度

订阅 border