随笔分类 - CSS
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device
阅读全文
摘要：flex-grow、flex-shrink、flex-basis三个属性的作用： 在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。 (注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex)) 小编这里先教一下大家如何快速记
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 .box1{ 9 width: 800px; 10 height: 500px; 11 border: 4px r
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 html{ 9 perspective: 800px; 10 } 11 12 @keyframes round{
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>表</title> 6 <style> 7 8 9 /* 设置关键帧 */ 10 @keyframes clock{ 11 from{ 12 transform
阅读全文
摘要：1. 在现实生活中，我们经常需要使用表格来表示一些格式化数据： 课程表、人名单、成绩单.... 同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格2.<table border="1" width='50%' align="center"> <!-- 在table中使用tr表示表格
阅读全文
摘要：1.background-image 设置背景图片 - 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素，将会一个部分背景无法完全显示 - 如果背景图片和元素一样大，则会直接正常显示 2.
阅读全文
摘要：1.代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 div{ 13 /* wi
阅读全文
摘要：1.transform 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>变形</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11
阅读全文
摘要：1.transition 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box1{ 8 position: absolute; 9 width: 200px; 1
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>变形</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 margin-top:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 像这种，利用雪碧图制作的动画效果叫做精灵动画 */ .box1{ height: 271px; width: 132px; backgrou
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <style> 8 9 body{ 10 position: relative; 11 heigh
阅读全文
摘要：作用 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载， 雪碧图的使用步骤： 1.先确定要使用的图标 2.测量图标的大小 3.根据测量结果创建一个元素 4.将雪碧图设置为元素的背景图片 5.设置一个偏移量以显示正确的图片 雪碧图的特点： 一次性将多个图片加载进页面，降低请求的次数，加快
阅读全文
摘要：1. 基线、底线、顶线 行高指的是文本行的基线间的距离。 基线并不是汉字的下端沿，而是英文字母"x"的下端沿 2. 行距、行高 3. 内容区 底线和顶线包裹的区域，实际中不一定看得到，但却是存在。 4. 行内框 行内框只是一个概念，它无法显示出来，但是它又确实存在 它的高度就是行高 在没有其他因素（
阅读全文
摘要：1.如果父元素class="j", 套着子元素class="k",且向左浮动了，子元素class="k"也套着同名后代元素，如果在css写class类选择器胡乱写，会造成结构问题， 2.比如css写 .j li{ float: left;}, 手机电话卡，向左浮动了，那么此时带来一个问题，.j .m
阅读全文
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 .box1{ 9 width: 0px; 10 height: 0px; 11 border: 15px red
阅读全文
摘要：网页的窗口的结构： 最外层 浏览器窗口（视口） 初始包含块 HTML根元素 body ………… 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 /* 9 网页的窗
阅读全文
摘要：/* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/reset/ License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h
阅读全文
浙公网安备 33010602011771号