绝对定位

css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。 第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 < body > < div id="outer"> < div id="group"> < div class="page" id="page1">.</ div > < div class="page" id="page2">..</ div > < div class="page" id="page3">...</ div > < div class="page" id="page4">....</ div > < div class="page" id="page5">.....</ div > < div class="page" id="page6">......</ div > </ div > </ div > </ body > 　　在body中定义一个叫做outer的div，它是最外层的div，用来提供一个3D场景，可以认为它是一个3D图形的展示平台，只有定义了这样一个div，才能够展示3D图形，此外定义一个class为group的div，用来盛放色子的六个平面，将它们组合在一起。最后再定义6个平行的div

基础讲解可参见 http://www.w3school.com.cn/css/css_margin_collapsing.asp 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 简单地说，外边距合并指的是，当两个 垂直外边距 相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的 高度中的较大者 。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图： 当一个元素 包含 在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的 上和/或下外边距 也会发生合并。请看下图： 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下， 上外边距与下外边距就碰到了一起 ，它们会发生合并： 外边距合并时递归的 ，如果这个外边距遇到另一个元素的外边距，它还会发生合并： 这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。 外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并

第七章　　基本视觉格式化 正常流（没有浮动和定位元素）、非替换元素（包含在文档中）、替换元素（用作其它内容的占位符，如img）、块级元素（会和其它元素形成换行，如div）、行内元素（span之类的元素）和根元素（位于文档树顶端的元素，在HTML文档中就是元素html） 水平格式化 <p style="width:200px;">wideness?</p>　　/*200px指的是内容区的宽度*/ 水平格式化七大属性：margin-left、border-left、padding-left、width、padding-right、border-right和margin-right，其中有3个属性可以设置为auto：元素内容的宽度width及左右外边距 如果设置width、margin-left或margin-right的某个值为auto，而余下两个属性指定为特定值，那么设置为auto的属性会自动确定所需长度，从而使元素框等于父元素的width 如果这3个属性都设置为特定值（值不合理，且过分受限），此时会把margin-right强制取为auto 某个外边距和width设置为auto，设置为auto的外边距会减为0 3个值都设置为auto，两个外边距都自动为0，width完全填充其包含块 外边距可以设置为负数（按反方向偏移） 如果width、内边距和外边距设置为百分数值

inline 或者 inline-* 的元素竖直居中 可以借助 padding, line-height, vertical-align 等属性。有如下两种具体情景： 单行竖直居中，如单行文本或者链接 这种情况，通过给元素上下添加相同大小的 padding 值即可实现竖直居中。 <div class="container"> <p>单行文本竖直居中，添加相同的 padding-top & padding-bottom 值</p> </div> body { margin: 0; } .container { background-color: #fe435e; padding: 10px; } p { margin: 0; color: #fff; /* 相同的上下 padding 值使单行文字居中 */ padding-top: 100px; padding-bottom: 100px; } 专门建立的学习Q-q-u-n：⑦⑧④-⑦⑧③-零①② ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 如果不想使用 padding 不方便使用 padding 时，可以通过给元素设置 line-height，使其等于父容器的高度，从而实现竖直居中。注意，此时记得要考虑父容器的 padding 和

一、神奇的两个inline-block 很初级的问题，无聊决定写一个故事。 故事的主人公很简单，两个inline-block元素。代码如下，为了看起来简单明了，写得很简陋。效果图如右。发现有两个问题。 1：两个元素水平有空隙，简单的初始化margin：0好像并没有起想象中的作用，为什么呢 2：两个元素垂直也没有对齐，等高的的行内块元素不应该阿: 二、消除两个inline-block元素水平间距 最终效果 讲解demo <div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div> 1.去空格 元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以： <div class="space"> <a href="##"> 惆怅</a><a href="##"> 淡定</a><a href="##"> 热血</a> </div> 或者是： <div class="space"> <a href="##">惆怅</a ><a href="##">淡定</a ><a href="##">热血</a> </div> 或者是借助HTML注释： <div class="space"> <a href

CSS属性 属性1 宽和高 width 属性可以为元素设置宽度 height 属性可以为元素设置高度 PS：只有块级标签才可以设置宽度，内联标签的宽度由内容决定。 属性2 字体属性 文字字体： font-family 可以存放多种字体，如果浏览器不支持第一种字体会自动尝试下一种，浏览器会使用它能识别的第一种字体。如果到最后都没有浏览器支持的字体，那么就会使用浏览器的默认字体显示。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial" } 字体大小： font-size ，可以设置为数字px形式和 inherit ，设置为 inherit 表示继承父元素的字体大小值。 字重： font-weight 用来设置字体的字重（粗细）。 值 描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值 字体颜色： color 用于设置字体的颜色，颜色可以通过三种形式指定： 十六进制：如：#FF000 (前两位表示Red，中间两位表示Green，最后两位表示Blue) 一个RGB值： 如： RGB(255,0,0) (第一个数字表示Red，第二个数字表示Green，第三个数字表示Blue

CSS宽高比为百分比时 元素宽高以百分比设置时的大小相对谁来确定 《–（点击跳转） 转自 http : / / www . divcss5 . com / rumen / r403 . shtml 绝对定位与相对定位 CSS position绝对定位absolute relative 《–（点击跳转） absolute与fixed fixed:固定定位 absolute:绝对定位 区别很简单： 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动 常用场合： 1.fixed常用于网站边缘的公司联系方式和快速回到顶部 2.absolute常用于页面 absolute 比如咱们在刷QQ空间的时候，每个好友的说说就是absolute的。你往下滑过了他的动态，你想看到就得往上滑回去。 fixed fixed的呢，就比如（这里是手机QQ举例啊）默认是右下角的一个 小聊天泡 窗口 就是那个你点开它会显示你的消息 ，会随着你的屏幕滑动始终保持在屏幕的右下角。 尽管你已经刷过了好几条说说了 。 来源： CSDN 作者： 小莫神和他的的 链接： https://blog.csdn.net/qq_40710190/article/details/103760533

CSS的简单语法: ​ 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中 <style> 选择器{ 　　　　属性名称:属性的值; 属性名称2: 属性的值2; 　　　　} </style> CSS选择器: 帮助我们找到我们要修饰的标签或者元素 元素选择: 元素的名称{ 　　　　属性名称:属性的值; 　　　　属性名称:属性的值; 　　　　　　 } ID选择器: 以#号开头 ID在整个页面中必须是唯一的s ID的名称{ 　 　属性名称:属性的值; 　　 属性名称:属性的值; 　　　　　　} 类选择器: 以 . 开头 .类的名称{ 　　　　属性名称:属性的值; 　　　　属性名称:属性的值; 　　　　　　} CSS的引入方式: ​ 外部样式: 通过link标签引入一个外部的css文件 ​ 内部样式: 直接在style标签内编写CSS代码 ​ 行内样式: 直接在标签中添加一个style属性, 编写CSS样式 CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间 float属性: left right clear属性: 清除浮动 both : 两边都不允许浮动 left: 左边不允许浮动 right : 右边不允许浮动 流式布局 CSS的优先级 按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器 就近原则:

伪类 1. anchor伪类：专用于控制链接的显示效果 a:link（没有接触过的链接）,用于定义了链接的常规状态。 a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。 伪类选择器 : 伪类指的是标签的不同状态: 　　　　　　 a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ background-color: rebeccapurple; width: 100px; height: 100px; } .bottom{ background-color: green

　　选择器不多说，个人觉得选择器权重才是选择器的重点，只要知道浏览器在排查一长串选择器的时候，是从后往前排查的。 　　eg：div>ul li a em {....} 浏览器看到这一长串，为了节省效率，会从后往前排查，就是从em到div。 　　关于我怎么不截图：截的图粘贴不过来，886。 一、关于选择器权重 　　 有时候你发现自己的样式没有在你的元素上表现出来，除了检查有没有写错选择器，还可以看看是不是优先级的问题。 　　 1）关于优先级 　　　 !important > 行间样式 >id选择器 > class选择器 | 属性选择器 > 标签选择器 > 通配符选择器 　　 2）权重　 　　　　优先级是根据内部权重进行总结的。 　　　　 选择器权重 ！important 正无穷 行间样式 1000 id 100 class选择器|属性选择器|伪类选择器 10 标签选择器|伪元素选择器 1 通配符选择器 0 　　　　　　注意：这些权重的值都不是十进制而是 256进制 。 　　　　　　eg：.wrapper .top .nav ul li #id { } 权重值是：10+10+10+1+1+100 = 131 　　　　　　　　如果选出同一个元素的选择器串权重值一样，后面 覆盖 前面的。 　　　　　　　　如果.wrapper .top .nav ul li #id