一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

美化网页选择

<style>

• 字体美化<span></span>
• font-family：字体
• font-size：字体大小
• font-weight：字体 粗细-
• color：字体颜色 <\style>

文本样式

• 颜色：单词 RGB 0F RGBA A:01透明度
• 文本对齐方式text-align=center
• 首行缩进 text-indent：
• 行高 line-height：单行文字上下居中
• 装饰 text-decoration
• 文本图片水平对齐 vertical-align=middle

文本阴影

text-shadow：阴影颜色，水平偏移，阴影半径

超链接伪类

• 正常情况下，a，a：hover
• 鼠标悬浮的状态（只需要记住：hover）标签：hover{}

列表

• ul li{}
• list-sytle：none(去点)/cirle(空心圆)/decimal(数字)/square(正方形)
• ul{}

背景

• 背景颜色
• 背景图片：使用div{background-image:url();}
• 默认全部平铺
• 水平平铺 background-repeat:repeat-x
• 垂直平铺 background-repeat:repeat-y
• 不平铺 background-repeat:no-repeat

渐变

盒子模型

什么是盒子模型

• margin :外边距
• padding: 内边距
• border:粗细 样式 颜色

外边距

• 外边距的妙用：居中元素
• margin:0 auto;
• margin-top 盒子的计算方式：你这个元素到底有多大？
• margin+border+padding+内容宽度

圆角边框

• 左上 右上 左下 右下 border-radius:

<sytle>
div{
width:100px;
height:100px;
border:10px solid red;
box-shadow:10px 10px 1px yellow}
<sytle>

浮动

• 标准文档流 自上而下排列
• 块级元素：独占一行 h1~h6 p div 列表...
• 行内元素：不独占一行 span a img strong...
• 行内元素可以包含在块级元素中，反之，不哭也

display

block 块元素

inline 行内元素

inline-block 是块元素，但是可以内联，在一行

none

div{width:100px
height:100px
border:1px solid red;}
span{
div{width:100px
height:100px
border:1px solid red;
display:inline-block;}
<div>div块元素<\div>
<span>span行内元素<\span>