本帖最后由 llm182 于 2020-3-1 23:34 编辑
目前还是基础班的一名小白，也没有什么特别好用的技术分享给大家的，但是下面这些都是在写页面中常用到的知识点，还有一些我觉得有点难掌握的理论都分享给大家：
一、元素显示模式总结：元素显示模式还可以互相转换
1.块级元素：一行只能放一个块级元素，可以设置宽度高度。例如：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
2.行内元素：一行可以放多个行内元素，不可以设置宽度高度。例如：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
3.行内块元素：一行可以放多个行内块元素，可以设置宽度高度。例如：<img />、<input />、<td>
二、CSS的背景属性
背景样式合写：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
例如： background: transparent url(图片地址) no-repeat fixed top
三、浮动：float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
1.语法：选择器 { float: 属性值；}
2.属性值：none 元素不浮动（默认）
left 元素向左浮动
right 元素向右浮动
四、定位：定位=定位模式+边偏移（子绝父相）
1.语法：选择器 {
position: 属性值；
}
2.属性值： relative 相对定位（占有位置）、相对于自身位置移动
absolute 绝对定位（不占位置）、带有定位的父级移动
fixed 固定定位（不占位置）、伴随浏览器的可视区移动
五、CSS属性书写顺序
1.布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 2.自身属性：width / height / margin / padding / border / background
3.文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4.其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
举例： .jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); border-radius: 10px; } 六、字体图标的引用 1.icomoon字库 http://icomoon.io 2.阿里iconfont字库 http://www.iconfont.cn/ 最后给大家分享一个太极图小例子： <style> body { background-color: #ccc; } div { position: relative; width: 150px; height: 300px; background-color: #fff; border-left: 150px solid #000; margin: 100px auto; border-radius: 50%; } div::before { position: absolute; height: 30px; width: 30px; border: 60px solid #000; background-color: #fff; content: ''; left: -75px; border-radius: 50%; } div::after { position: absolute; height: 30px; width: 30px; background-color: #000; border: 60px solid #fff; content: ''; left: -75px; bottom: 0px; border-radius: 50%; } </style> </head> <body> <div></div> </body> 其实这么多代码都是靠一点一点的小知识积累而成的，所以一定要打好基础！
| 
收藏
淘帖
踩
