小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

CSS基础

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="margin: auto;width: 500px;color: gray;">
        <p style="text-align:center;">
            <span style="background-color: gray;color: white;font-size: 24px;">
                物联网工程
            </span>
        </p>
        <p align="left">
            <b>简介</b>
        </p>
        <p>
            物联网(<span style="color: red;">Internet of Things</span>)这个词，国内外普遍公认的是 MITAuto-ID 中心Ashton 教授1999年在研究RFID时最早提出来的。在2005年国际电信联盟（ITU）发布的同名报告中，物联网的定义和范围已经发生了变化，覆盖范围有了较大的拓展，不再只是指基于RFID技术的物联网。物联网是基于互联网，传统电信网等信息承载体，让所有能够被独立寻址的普通物理对象实现互联互通的网络又称为物联网域名。
        </p>
    </div>
</body>

</html>

CSS的东西都放在style里，有好多的分号，不能忘，（直接联想到了C语言，每次都是因为分号找半天）

div放在body中

margin: auto 让元素本身水平居中

background-color: gray 设置背景颜色

font-size: 24px 设置字体大小

color: white 设定文字颜色

CSS基础语法

h1 {color:red; font-size:14px;}

可以一起定义多个

h1,h2,h3,h4,h5,h6 
{
    color: green;
}

CSS派生选择器

可以定义某个标签下的标签

已经定义过的不能被覆盖

id选择器

<div id="content"> 用#content去定义

<div id="content">标签下的p标签用#content p{.......}去定义

类选择器

就是id选择器中的#换成.

CSS样式

背景

    <style>
        body {
            color: black;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            background-image: url(1.jpg);
            background-position: center;
            margin: 0%;
        }
    </style>

background-image: url(1.jpg); 插入背景图片

background-repeat: no-repeat; 不平铺

background-attachment: fixed; 背景图片不随其余部分滑动

默认值 scroll 背景图像会随着页面其余部分的滚动而移动

background-position: center; 图片位置

background-position:66% 33%;把一个图像放在水平方向 2/3、垂直方向 1/3 处

margin: 0%;

文本

color:red; 颜色

ext-align:center; 对齐方式

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

text-decoration:none; 删除链接的下划线

text-indent:50px; 文本缩进

字母大小写转换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>大小写字母转换</title> 
<style>
p.uppercase {text-transform:uppercase;}  /*每个单词的所有字母大写*/
p.lowercase {text-transform:lowercase;}  /*每个单词的所有字母小写*/
p.capitalize {text-transform:capitalize;}  /*每个单词的首字母大写*/
</style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

字体

p.normal {font-style:normal;} 正常字体

p.italic {font-style:italic;} 斜体

p.oblique {font-style:oblique;} 斜体

font-size 字体大小后面可以加40px或者1.5em

链接

a:link {color:#000000;} /* 未访问链接*/

a:visited {color:#00FF00;} /* 已访问链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;} /* 鼠标点击时 */

盒子

margin: 50px;

border: 25px solid blue;

padding: 50px;

定位 position left top

relative 相对定位

1.相对于自己的初始位置

2.定位后空间不释放

absolute 绝对定位

1.位置相对于最近已定位的祖先元素如果没有最近已定位的祖先元素相对于body

2.定位后空间释放

fixed 固定定位

1.位置相对可视界面

2.定位后空间释放

浮动 float left right

清除浮动 clear:left right both

父元素中的子元素都浮动 --> 塌陷

解决塌陷 1.

div clear:both

.clearfix::after{

context:"";

//block   clear:both 才会生效

display:block;

clear:both;

}

3.overflow:hidden

（BFC规则 overflow:hidden触发了BFC BFC规则去渲染页面浮动的元素也参与计算高度）

布局

float布局

<style>
　　.container{
　　　　width: 800px;
　　　　height: 200px;
　　}
　　.left{
　　　　float: left;
　　　　background: red;
　　　　width: 200px;
　　　　height: 100%;
　　}
　　.right{
　　　　background: blue;
　　　　margin-left: 200px;
　　　　height: 100%;
　　　　　　　　padding-left: 10px;
　　}
</style>
<body>
　　<div class="container">
　　<div class="left">
　　　　左
　　</div>
　　<div class="right">
　　　　右
　　</div>
</div>
</body>

将其分为两栏

flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

属性：

flex-direction
flex-wrap

flex-flow
justify-content

align-items
align-content

flex-direction

属性决定主轴的方向，（排列方向），共有4个值

flex-direction: row | row-reverse | column | column-reverse;

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

2.属性控制是否换行，有3个值

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap（默认）不换行， wrap向下换行， wrap-reverse向上换行

flex-flow

是direction和wrap的合并简写

flex-flow: <flex-direction> || <flex-wrap>;

justify-content

定义项目在主轴上的对齐方式，共有5个值

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐
flex-end：右对齐

center：居中
space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

定义在交叉轴上如何对齐，同样有5个值

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

定义多跟轴线的对齐方式，有6个值

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

CSS语法大全，会了这些，什么页面都不用怕了