随笔分类 - CSS
我这一生有两次学习CSS，我今天重新温习的时候发现，CSS是真的简单啊，听我娓娓道来。
摘要：过渡（transition） 可以让过渡效果变慢，比如旋转，位移等等，需要在使用的标签上设置这个属性，如果是需要这个标签的某个属性变化的时候，就给属性设置参数，然后再加整个过程的时候。 属性名：transition
阅读全文
摘要：文字阴影（text-shadow） 给文字添加阴影 属性名：text-shadow 盒子阴影（box-shadow） 给盒子添加阴影 属性名：box-shadow 属性值：
阅读全文
摘要：在桌面端(这里不涉及移动端)，浏览器的可视区域也被称为“视口“，而它的宽度与高度也有相应的单位来表示，分别为”vw”与”vh”。 vw：表示视口的宽度，1vw表示视口宽度的 1%; vh：表示视口的高度，1vh表示视口高度的 1%;
阅读全文
摘要：什么时候精灵图呢？ 通常在渲染页面的时候，需要服务器向我们发送数据，但有的时候一个页面需要多张图时，服务器就会处于连续发图的工作状态，但如果我们把需要的图都放在一张图上，这样可以大大的减少服务的工作负担，打个比喻。服务器发一张图是，工作流程是：找到图片——读取图片——发送图片，如果是发送5个图片时，
阅读全文
摘要：元素透明（opacity） 元素透明会让元素整体透明，包括里面的内容，文字或者子元素等。 属性名：opacity 属性值：0~1（透明到不透明） 表格边框合并（border-collapse） ！这里有个问题就是我使用CSS里面的border添加边框的时候，因为border属性是不能继承的，所以需要
阅读全文
摘要：垂直居中对齐问题（vertical-align） 我们在实际使用的时候，会遇到一些问题，比如两个元素在居中时总是对不齐，这是因为在元素里面，每个元素都有自己的基线。 什么叫做基线，通常是他们居中的线，而元素之间基线不同就会导致我们在居中对齐的时候失败，样子就会很丑。 通常这个问题，我们只要设置一下即
阅读全文
摘要：不同布局方式的层级关系：普通<浮动<定位 定位布局后的层级关系：相对定位、绝对定位、固定定位等级相同，谁最后写谁显示在最上面，但可以通过z-inden属性进更改，属性值：0-10，越大显示等级越大。 在CSS中定位是压在标签上面的！所以才会有层级关系，注意区分标签的嵌套关系！
阅读全文
摘要：咱就是说！牛逼啊这个定位，再也不能担心垂直居中的问题了。 绝对定位：position：absolute 偏移量（水平居中）：left：50%；margin-left：-（自己宽度的一半） 偏移量（垂直居中）：top：50%；margin-top：-（自己高度的一半） 但有的时候，像素大小不是合理，这
阅读全文
摘要：定位的作用？ 1.可以解决盒子与盒子的之间的层叠问题 定位之后的元素层级更高，可以层叠在其他盒子上面 2.可以让盒子始终固定在页面某个位置（比如导航栏在页面滚动时不动） 怎么使用定位? 属性名+属性值 属性名：position 属性值：静态定位（static）、相对定位（relative）、绝对定位
阅读全文
摘要：因为在上一节中介绍了，浮动的标签是需要嵌套一个普通的父div标签中的，那么问题就是出现在这里。 如果父元素没有设置高度，他就会随着子元素高度而变化，但是由于子元素已经浮动脱离标准的文档流，父元素在某种方面来说是没有子元素来把她撑开的。这时父元素就会因为本身没有设置高度，子元素又不能撑开而变成没有高度
阅读全文
摘要：浮动，就是浮起来动起来。 之前我有在论坛上问过别人这样一个问题，怎么让两个块元素层叠在一起，结果他们说嵌套起来不就可以了吗？答案是确实是可以。 但是我想要的并不是那个，我问的是浮动。 同一级的块元素（这里指div），同一级div只能使用浮动的方式来实现。而嵌套的话不需要浮动，也可以让他们层叠。 方法
阅读全文
摘要：凡是都有规矩，俗话说无规矩不成方圆！所以在浏览器中也有规则，那就是浏览器在渲染页面时所采用的规则，第一自上而下，自左向右。 很简单，但这就是标准流的终极奥义！ 举例：块元素就是不能设置高度，独占一行；行元素不能设置高宽，但他能一行多个行内元素，这就是规矩！ 一个萝卜一个坑，每个标签、元素在标准流上都
阅读全文
摘要：我就搞不懂为什么CSS会有这么多的选择器，第一次学习的有id选择器、class选择器、标签选择器、通配符选择器，第二次的选择器是复合选择器：后代选择器、子代选择器、并集选择器、交集选择器，上面两次学习都是通过HTML标签。 这次是通过HTML中的结构，常用语查找某父级选择器中的子元素。 除了伪类选择
阅读全文
摘要：在实际使用中，我们在给盒子设置水平距离的时候是没有问题的，但是在设置垂直距离时会出现，距离嵌套的问题。 这里分别设置上下的margin，但是在页面效果展示的时候，只会展示最大值的那个也就是margin-top：20px，但是margin-botton：10px并不会失效，只不过包含在了20px里面了
阅读全文
摘要：CSS中盒子 在html中每一个标签基本都能看作是一个盒子，而这个盒子和我们生活中的使用的纸箱子差不多，纸箱子里面就是内容区域，有的箱子里面装的东西比较重要，那么他就会往里面添加海绵什么的，那这个就是内边距（padding），每个纸箱子都有厚度，这个就是盒子的边框（border），当两个纸箱子放在一
阅读全文
摘要：CSS的特性，这不就是说这个玩意有什么不一样的地方吗？ 好吧，她确实有！ 第一个就是他的继承性，儿子跟着她老子姓，这个大家都能理解吧，但是儿子整个名字又不能都和她老子的一样。 所以在ＣＳＳ她的特性就是，凡是有关字的东西，比如字的大小（font-size） 颜色（color） 样式（font-styl
阅读全文
摘要：在HTML中一共右三种元素显示方式，每个显示模式都有自己的CSS样式，分别是块元素、行元素、行内块元素 块元素 独占一行，宽度默认是父元素的宽度，高度是随着内容不断变化。 代表标签：div、p、h系列、ul 行元素 不独占一行，高宽默认随着内容变化 代表标签：a、span 行内快元素 不独占一行，可
阅读全文
摘要：我觉得这个和字体差不多，我们可以自己想一下，背景里面有什么？ 第一就是背景是照片还是颜色，所以背景里面肯定有color和img，还有如果是颜色那么肯定是整个背景，而图片万一大小不是和背景一样大呢？这就是要设置照片在背景中的位置，还有呈现方式，这就是另外两个属性repeat和position． 背景颜
阅读全文
摘要：在CSS中除了一些比较基本的选择器，比如class（类名）选择器、标签选择器、id选择器、通配符选择器之外还有一些根据CSS的嵌套关系产生的选择器。 这类选择器是根据CSS标签的嵌套关系使用。有后代选择器、子代选择器、并集选择器、交集选择器、伪类（这个类似于鼠标经过绑定效果） 后代选择器 根据CSS
阅读全文
摘要：重新更新！！！ 在CSS中由于我还没复习到定位，暂且就用三个居中。 第一个是垂直居中，这个我觉得是最重要的一个方法。主要有以下几个问题。 这个居中到底是给谁居中？ 答：垂直居中不是给标签使用的，而是标签里面的内容，垂直居中是在父元素中使用属性：line-height:父元素的高度，在下面中，我给父元
阅读全文
