随笔分类 - CSS
摘要：body { background-image: linear-gradient(to right, #fbc2eb, #a6c1ee); }
阅读全文
摘要：div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; l
阅读全文
摘要：字体下载：https://www.fontke.com/ @font-face{ font-family: '字体名称随便起'; src: url('../font/字体名称.eot'); src:url('../font/字体名称.woff') format('woff'), url('../fo
阅读全文
摘要：button button:hover{ border-radius: 5px; color: #fff; background: lightslategray; } button:focus{ border-radius: 2px; color: #fff; background: lightsl
阅读全文
摘要：1.图片渐变效果 background linear-gradient(top,rgba(0,0,0,.8),rgba(0,0,0,.8))
阅读全文
摘要：flex 是 flex-grow、flex-shrink、flex-basis的缩写 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #main { width:
阅读全文
摘要：css伪类 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。 /* 所有用户指针悬停的按钮 */ button:hover { color: blue; } css伪类用于向某些选择器添加特殊的效果。:link, :vi
阅读全文
摘要：position（transform css3 有些浏览器不兼容） <article id="one"> <section id="section"></section> </article> <style> #one { position: relative; //此处不设置的话 会一直往上找 找
阅读全文
摘要：三行代码 overflow: hidden; white-space: nowrap; text-overflow:ellipsis; 当不起作用的时候 在父元素加一行代码 min-width： 0
阅读全文
摘要：height:auto，是指根据块内内容自动调节高度。height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。 浏览器是如何计算高度和宽度的？ 宽度 Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会
阅读全文
摘要：《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如
阅读全文
摘要：要求。上部固定高度50px，下部分自适应剩下整个屏幕 html, body { height: 100%; margin: 0px; padding: 0px; } #main { background-color: #999; height: 100%; } #nav { background-c
阅读全文
摘要：书写顺序 （1）定位属性：position display float left top right bottom overflow clear z-index （2）自身属性：width height padding border margin background （3）文字样式：font-fa
阅读全文
摘要：* 通配符使用星号*表示，意思是“所有的” 比如：* { color : red; } 这里就把所有元素的字体设置为红色 缺点： 不过，由于*会匹配所有的元素，这样会影响网页渲染的时间 解决： reset.css 重设css样式
阅读全文
摘要：子元素选择器 h1 > strong {color:red;} //这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响： <h1>This is <strong>very</strong> <strong>very</strong> im
阅读全文
摘要：transform-origin: center left 60px;可以实现3d转换
阅读全文
摘要：<input type=hidden> 那么该标签就不会显示 但是我们可以用这个标签储存数据 这是一个利用标签元素隐藏
阅读全文
摘要：style标签内的class样式前面 选中的class为选择器，即css选择 css使用方法 内联（不推荐，修改起来麻烦，代码会很长） 外联link（最推荐 分工合作比较好） style标签 样式优先级（属性值后面加上 !important） ！important > 内联 > style和link
阅读全文
摘要：1.任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 2.行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
阅读全文
