CSS语法大全，会了这些，什么页面都不用怕了
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（默认值）：轴线占满整个交叉轴。
作者：大明湖畔王先森
链接：https://juejin.cn/post/7023970843260616734