文章标题

一基本结构

对于整体框架

body{    background-color:#ff0000/red;/*背景颜色拥有两种写法*/    color:black;//设置文本颜色为黑色    font-size:12px;//设置文字的大小    font-family：“sans seif”;//设置文字的字体}

背景里加图片

background-image：url(图片)；

padding 设置内边距属性

div{  padding-top:30px;  padding-right:50px;  padding-botton:50px;  padding-left:100px;}

margin 设置外边距属性

div{  margin-top:200px;  margin-right:200px;  margin-botton:50px;  margin-left:250px;}

border 设置边框属性

div{  border-color:#ff0000;  border-width:10px;  border-style:solid;}

1. 内边距（padding）, 围绕着内容的空间（比如围绕段落的空间）
2. 边框（border）, 紧接着内边距的实体线段

3. 外边距(margin), 围绕元素外部的空间

   • width (属于一个元素的可以定义这个页面的宽度保持不动)
   • background-color, 元素内容和内边距之后的颜色
   • color, 元素内容的颜色（通常是文本）

通配符

*

<style>*{color：#000000；}//将页面中所有文字颜色设置为黑色p{color:#0000ff;}//将所有p标签中文字的颜色设置为蓝色p*{color:#ff0000;}//将所有p标签中的子标签文字设置为红色</style>

类

定义在style标签中 需要在类名前面加“ . ”号

调用类时需要在调用的标签里调用类名就可以。注意类的第二个词首字母要大写

<style>    .myClass{        color：#ff0000;        }</style><p class="myClass">内容</p>

选择符

元素(标签)选择符：指定所有指定的html元素

浮动

盒子都有position属性 不设置其默认值为 static 不接受上下左右位置属性

position

relative 相对 可以设置top bottom left right 属性这些属性是相对于其父类而言的 其值为绝对的left：20px；为向左移动20px; 且盒子不随浏览器变动absolute 绝对的  可以设置top bottom left right 属性其必需有一个父类定义了position属性 当盒子都定义这个属性盒子会水平排版其属性值是相对的：right：40px；为与right相距40pxfixed 固定位置 相对与浏览器窗口 无论怎么滚动都处于窗口的固定位置 可以设置top bottom left right

z-index

如果盒子重叠了 设置z-index属性可以确定盒子优先级z-index：数字； 数字越大的优先级越大

float 浮动

浮动效果可以让盒子水平排列 其先提条件是不能超过父体的大小

Overflow 清除浮动

防止超出父类范围出现坍塌 需在父类中定义 overflow：auto;

对齐

vertical-align 垂直对齐

Flexbox

垂直居中
.类 {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}