margin | 易学教程

css写作建议和性能优化小结

阅读更多关于 css写作建议和性能优化小结

1.前言还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开css，但是对于css，很多开发者的想法就是，css只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。但是我觉得css可不只是把页面的布局完成就是完事的，还需要考虑很多细节有优化，更不会像大家想得那么简单，在学习当中，如果发现什么技巧或者优化的点，我也会学以致用！那么今天，就分享下我总结的css写作建议和性能优化的一些问题！希望能帮让大家对神奇的css有一个新认识，当然，如果大家觉得还有什么其它的建议。欢迎指点！ 2.css渲染规则首选，关于css渲染的规则，大家可能都知道，是从右到左的渲染！如下栗子 .nav h3 a{font-size: 14px;} 渲染过程大概是：首先找到所有的 a ，沿着 a 的父元素查找 h3 ，然后再沿着 h3 ，查找 .nav 。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素 html 都没有匹配，则不再遍历这条路径，从下一个 a 开始重复这个查找匹配（只要页面上有多个最右节点为 a ）。参考： CSS选择器从右向左的匹配规则 3.嵌套层级不要超过3级一般情况下，元素的嵌套层级不能超过3级，过度的嵌套会导致代码变得臃肿，沉余，复杂。导致css文件体积变大

w3c搬运CSS念念碎

阅读更多关于 w3c搬运CSS念念碎

w3c搬运CSS念念碎基本使用当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。如果值为若干单词，则要给值加引号 p { font-family: "sans serif"; } 是否包含空格不会影响 CSS 在浏览器的工作效果,不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。选择器你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } body { font-family: Verdana, sans-serif; } 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。 id选择器：#id名在现代布局中，id

Django测试平台开发（二）开发博客

阅读更多关于 Django测试平台开发（二）开发博客

Django 测试平台开发（二）开发博客 1、加载博客HTML页面 1、在templates目录下新建index.html文件 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>首页_杨青个人博客 - 一个站在web前端设计之路的女技术员个人博客网站</title> 6 <meta name="keywords" content="个人博客,杨青个人博客,个人博客模板,杨青" /> 7 <meta name="description" content="杨青个人博客，是一个站在web前端设计之路的女程序员个人网站，提供个人博客模板免费资源下载的个人原创网站。" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <link href="/static/css/base.css" rel="stylesheet"> 10 <link href="/static/css/index.css" rel="stylesheet"> 11 <link href="/static/css/m.css" rel="stylesheet"> 12 <script src="/static/js/jquery

Margin auto goes to negative values

阅读更多关于 Margin auto goes to negative values

问题 I have problem with margin: auto - vertical centering #something { width: 97%; height: 300px; border: 1px solid red; position: absolute; top: 0; bottom: 0; margin: auto; } This work in every modern browser - when the page (viewport) is higher then 300px, its centered vertically, but, when the page(viewport) is lower then 300px stopped it works everywhere except in firefox... In firefox run it good (maybe it is bad functionalitiy, but its logical functionality) in other browsers the top of

Margin auto goes to negative values

阅读更多关于 Margin auto goes to negative values

CSS之margin属性完美详解

阅读更多关于 CSS之margin属性完美详解

代码来源: /*-------------CSS代码复制开始-------------*/ #xok.cc {} /* 此代码由未知校内代码站(xok.cc) 收集/整理/调试 */ 　　margin在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。一、margin的基本特性　　margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用来设置box的margin area。属性margin可以用来同时设置box的四边外边距，而其他的margin属性只能设置其自各的外边距。　　margin属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。　　或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：

理解margin

阅读更多关于理解margin

margin可以改变容器的尺寸 //元素尺寸分为可视尺寸，占据尺寸　　　　 margin与可视尺寸　　　　　　1.适用于没有设定width/height的普通block水平元素　　　　　　2.只适用于水平方向的尺寸　　　　应用：一侧定宽的自适应布局，两端对齐布局等　　　　例如：左边有一张图片固定宽度，右面有文字，无论怎么改变文字的宽度，图片都不会动。　　　　　　　margin-left:70px 　　　　 margin与占据尺寸　　　　　　1.block/inline-block水平元素均适用　　　　　　2.与有没有设定width/height值无关　　　　　　3.适用于水平和垂直方向　　　　应用：滚动容器上下留白：margin:50px 0; 　　　　　　　多栏或2栏的等高布局等 margin与百分比单位　　　　普通元素百分比和绝对定位元素百分比　　　　　　1.普通元素百分比margin都是相对于容器的宽度计算的　　　　　　2.position:absolute绝对定位元素百分比margin是相对于第一个定位祖先元素　　　　　　　（relative/absolute/fixed）的宽度计算的　　　　应用：宽高2:1自适应矩形 margin重叠　　　　 margin重叠发生在：block水平元素　　　　　　　　　　　　 : 只发生在垂直方向

理解CSS外边距margin

阅读更多关于理解CSS外边距margin

前面的话 margin是盒模型几个属性中一个非常特殊的属性。简单举几个例子：只有margin不显示当前元素背景，只有margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性。之前的博文中已经分别详细地介绍了 margin的基础知识和负margin的详细用法。本文将详细介绍外边距margin的几个重点部分，包括重叠、auto和无效情况重叠【前提】 margin重叠又叫margin合并，发生这种情况有两个前提 1、只发生在block元素上(不包括float、absolute、inline-block元素) 2、只发生在垂直方向上(不考虑writing-mode) 【分类】 margin重叠共包括以下3种情况 1、相邻的兄弟元素 <style> p{ line-height: 2em; margin:1em 0; background-color: lightblue; display:inline-block; width: 100%; } </style> <p>兄弟一</p> <p>兄弟二</p> 2、父级元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递 <style> .box{ background-color: pink; height:30px; } .inner{

css学习之-margin篇

阅读更多关于 css学习之-margin篇

margin的作用：一：改变可视区域的尺寸　　注意点：1.适用于没有设定width/height的普通block元素　　　　　　2.只适用于水平尺寸，不会改变行高　　应用：实现一侧定宽的自适应布局 <!DOCTYPE html> <html> <head> <title>一侧定宽的自适应布局</title> <meta charset="utf-8"> <style type="text/css"> .auto{ border: 1px solid blue; } .auto img{ float: left; width: 80px; height: 80px; border: 1px solid blue; margin: 20px; } .auto p{ margin-left: 120px; } </style> </head> <body> <div class="auto"> <img src="1.jpeg"> <p>本间芽衣子是动画《我们仍未知道那天所看见的花的名字》及其衍生作品的女主角。拥有白皙的皮肤，白色的直长发，性格天然，有点“少根筋”，身材娇小的少女。五年前因意外滑下山崖，由于溪河十分湍急溺水而死。五年后出现在宿海仁太面前,并且以类似幽灵的型态存在。一开始只有仁太能看见，能碰到任何东西，也能吃饭，能打电话却无法出声

css盒子模型

阅读更多关于 css盒子模型

padding:用于控制内容与边框之间的距离; margin: 用于控制元素与元素之间的距离; padding、margin 表示上右下左都应用 padding-top、margin-top 上 padding-right、margin-right 右 padding-bottom、margin-bottom 下 padding-left、margin-left 左一个参数，应用于四边。两个参数，第一个用于上、下，第二个用于左、右。三个参数，第一个用于上，第二个用于左、右，第三个用于下。来源： https://www.cnblogs.com/wsj2000/p/10104428.html

订阅 margin