2018年10月14日
文档流
摘要： 1、什么是文档流？在窗口自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。 2、脱离文档流CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的 阅读全文
posted @ 2018-10-14 19:11 皮卡丘皮卡丘 阅读(132) 评论(0) 推荐(0) 编辑
display与visibility
摘要： <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> a { background-color: #FFFF00; /*为其设计一个宽和高*/ width: 500px; height: 500px 阅读全文
posted @ 2018-10-14 15:14 皮卡丘皮卡丘 阅读(99) 评论(0) 推荐(0) 编辑
垂直外边距的重叠
摘要： <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>垂直外边距的重叠</title> <style> .box1{ width:100px; height: 100px; background: red; /*为上边元素设置下边距 阅读全文
posted @ 2018-10-14 12:17 皮卡丘皮卡丘 阅读(237) 评论(0) 推荐(0) 编辑
样式的继承：
摘要： <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>样式的继承</title> <style> body { font-size: 30px; } p{ color:red ; } </style> </head> <body> 阅读全文
posted @ 2018-10-14 11:03 皮卡丘皮卡丘 阅读(122) 评论(0) 推荐(0) 编辑
2018年10月13日
盒模型——外边距
摘要： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>postion</title> <style> .box1{ width:200px; height:200px; background: greenyellow; /*设置边框*/ 阅读全文
posted @ 2018-10-13 11:53 皮卡丘皮卡丘 阅读(303) 评论(0) 推荐(0) 编辑
盒模型——内边距
摘要： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>postion</title> <style> .box1{ /* *使用width来设置盒子内容的宽度 * height来设置盒子内容的高度 * width和height */ w 阅读全文
posted @ 2018-10-13 10:47 皮卡丘皮卡丘 阅读(198) 评论(0) 推荐(0) 编辑
盒模型——边框
摘要： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>postion</title> <style> .box1{ /* *使用width来设置盒子内容的宽度 * height来设置盒子内容的高度 */ width:200px; hei 阅读全文
posted @ 2018-10-13 10:13 皮卡丘皮卡丘 阅读(391) 评论(0) 推荐(0) 编辑
2018年10月11日
文本样式
摘要： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>postion</title> <style> .p1{ /* *text-transform可以用来设置文本的大小写 * 可选值： * none 默认值，该怎么显示就怎么显示，不做 阅读全文
posted @ 2018-10-11 22:25 皮卡丘皮卡丘 阅读(380) 评论(0) 推荐(0) 编辑
line-height（行高）
摘要： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>postion</title> <style> /* 在css并没有为我们提供一个直接行间距的方式 我们只能通过设置行高来间接设置行间距,行高越大行间距越大 我们使用line-hei 阅读全文
posted @ 2018-10-11 12:09 皮卡丘皮卡丘 阅读(207) 评论(0) 推荐(0) 编辑
层级——z-index
摘要： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>postion</title> <style> .box1{ width: 200px; height: 200px; background: red; position:relat 阅读全文
posted @ 2018-10-11 10:06 皮卡丘皮卡丘 阅读(204) 评论(0) 推荐(0) 编辑
下一页