CSS参考手册自用版（新增flex布局）
程序员文章站
2022-04-13 23:12:59
...
CSS参考手册-D
#参考慕课网、谷歌、腾讯课堂、w3scholl等相关信息及课程
仅为自用，可供参考
附上链接：
- https://www.imooc.com/learn/9
- https://ke.qq.com/course/393322?taid=3111497647915114
CSS官方参考手册
CSS样式分类
内联式
- 将css代码直接写在HTML标签中，如下
<p style="color:red;font-size:12px">
这里文字是红色
</p>
嵌入式
- 写在当前文件中，如下
<style type="text/css">
span{
color:red;
}
</style>
外部式
- 如下
.box{
font-size:12px;
}
- 三种方式的优先级：就近原则
什么是选择器
- 每一条css样式声明（定义）由两部分组成，形式如下：
选择器{
样式;
}
1、标签选择器
- 标签选择器其实就是html中的标签，如下
p{
font-size:12px;
line-height:1.6em;
}
2、类选择器
- class定义类:
class="类名称" - 英文原点开头，不要使用中文
.类选器名称{
css样式代码;
}
3、ID选择器
- 很多情况下id与class相似，但也存在如下区别
- 1、为标签设置id=“id名称”
- 2、id前为#号，而非.
#setGreen{
color:green;
}
- 3、同一ID只能在文档中选择一次，而类选择器可使用多次
- 4、类选择器可以同时为一个元素设置多个样式，而id不可以
- 如下
<span class="stress bigsize"></pan>
4、子选择器
- '>'用于指定标签元素下的第一代子元素
- 如下
.firt>span{
bordr:1px solid red;
}
5、包含（后代）选择器
- ’ '即加入空格，指定标签元素下的所有后代元素
- '>‘为直接后代；’ '为所有后代
- 如下
.first span{
color:red;
}
6、通用选择器
- 功能最强大的选择器
- '*'匹配html中所有标签元素
- 如下：（是所有标签元素字体变红）
*{
color:red;
}
常用选择符
伪类选择符
- 给html不存在的标签（某种状态）设置样式
- 如给html中一个标签鼠标滑过的状态设置字体颜色，如下
//最常用，其他存在兼容性问题
a:hover{
color:red;
}
分组选择符
-为多个标签同时设置同一种样式，如下：
h1,span{
color:red;
}
CSS的继承、层叠和特殊性
继承
- 继承是一种规则，它允许样式不仅应用于某个特定html元素，而且应用于它的后代。
- 如下：（某种颜色应用于p标签，这个颜色设置不仅应用于p标签，还应用于p标签中所有子元素文本，这里的子元素为span）
p{
color:red;
}
- 有一些css样式是不具有继承性的，如
border:1px solid red;
特殊性
- 判断多层样式的选取
- 权值：
- ID>CLASS>标签>继承，如下
层叠
- 如果多个样式有相同的优先级，则按照前后顺序进行选择
重要性
- 设置最高权值
-
!improtant注意写在分号前 - 如下：
p{
color:red !important;
}
p{
color:green;
}
//将会显示上面那个p，而忽略层叠规则
CSS格式化排版——文字排版
字体
font-family- 如设置宋体与微软雅黑
body{
font-family: "宋体";
font-family: "Microsoft Yahei"
}
字号、颜色
-
font-sizecolor
body{
font-size:12rpx;
color:red;
}
粗体
font-weight:bold
p span{
font-weight:bold;
}
斜体
font-style:italic
p a{
font-style:italic;
}
下划线
text-decoration: underline
删除线
text-decoration: line-through
.oldPrice{
text-decoration: line-through;
}
缩进
text-indent: 2em- em: 空格单位
行间距（行高）
line-height: 1.5em- 1.5em = 1.5倍行间距
中文字间距、字母间距
- 中文
letter-spacing - 字母
word-spacing
h1{
letter-spacing: 50px;
word-spacing: 50px;
}
对齐
- 为块状元素中的文本，照片设置对齐样式
text-align
h1{
text-align: center;left;right;
}
CSS盒模型——布局
元素分类
- html的标签元素大体被分为三种不同的类型：
- 块状元素
<div> <p> <h1> <h6> <ol> <ul> <dl> <table> <address>
<blockquote> <form>
- 内联元素（行内元素）
<a> <span> <br> <i> <em> <strong> <label> <q> <var>
<cite> <code>
- 内联块状元素
<img> <input>
块级元素
-
display:block块状元素转换 - 如下操作可使内联元素a转换为块状元素
a{
display:block;
}
- 块状元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶部和底边距都可设置
3、元素宽度在不设置的情况下，是我本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
内联元素（行内元素）
display:inline- 如下代码可将块级元素div转换为内联元素，从而具有内联元素的特点：
div{
display:inline;
}
- 内联元素特点：
1、 和其他元素在一行
2、元素的高度、宽度及顶部和底部边距不可设置
3、元素的宽度就是它包含的文字和图片的宽度，不可更改
内嵌块状元素
display:inline-block-
<img> <input>就是代表 - 具有内嵌和块状的特点：如可在一行，可设置宽高、行高、边距
盒模型
盒模型——边框(一)
- 边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色（边框三个属性）
- 设置粗细为2px，样式为实心，颜色为红色的边框
div{
border:2px solid red;
}
- 注意：
- 1、border-style（边框样式）常见有：
dashed(虚线)|dotted(点线)|solid(实线)
- 2、border-color（边框颜色）中的颜色可以设置为十六进制
- 3、border-width（边框宽度）可设置为：
thin|medium|thick 最常用：px（像素）
盒模型——边框（二）
- 为其设置四个方向上的边框
- 如只设置底部
div{
border-bottom:1px solid red;
}
盒模型——宽度和高度
- 盒模型的宽高指的是内容的宽高，具体详见flex布局
- 如图：
- 具体代码如下
div{
width: 200px; //宽度
height: 30px; //高度
padding: 20px; //内边距(填充)
border: 1px solid red; //边框
margin: 10px //外边距
}
盒模型——填充(内边距)
-padding
- 顺序：上右下左（顺时针）
- 如下：（也可以分开写）
div{
padding:20px 10px 15px 30px; //上右下左
padding: 10px; //全相同
padding:10px 20px; //上下 左右
}
盒模型——边界(外边距)
margin- 语法同
padding相同，查看上面即可
CSS布局类型
- 如果说html布局结构为本，css布局类型就是末，是外在的表现形式。
- Flow ：流动模型
- Float : 浮动模型
- Layer : 层模型
流动模型——Flow
- 默认布局
- 块状元素会在所处的包含元素内自上而下按垂直顺序延伸分布，因为在默认状态下，块状元素的宽度都为100%。
- 实际上，块状元素都会以行的形式占据位置。
- 内联元素都会在所处的包含元素内自左到右的水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
浮动模型——Float
- 目的：让块状元素能够并排显示
- 默认情况下元素是不可以浮动的，但可以用css代码改变，如下
- 1、左浮动——
float:left
div{
width:200px;
height:200px;
border:2px solid red;
float:left
}
<div id="div1"></div>
<div id="div2"></div>
- 2、右浮动——
float:right - 3、一左一右——分别赋值
#div1{
float:left
}
#div2{
float:right
}
什么是层模型
- 如何让html元素在网页中精确定位，CSS定义了一组定位属性来支持层布局模型
- 三种形式
- 1、绝对定位——
position:absolute - 2、相对定位——
position:relative - 3、固定定位——
position:fixed
层模型——绝对定位
position:absolute- 将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含快进行绝对定位。如果不存在这样的包含快，则相对于body元素，即浏览器窗口
- 如下代码可以将div元素相对于浏览器窗口向右，并向下移动
div{
width: 200px;
height: 200px;
border: 2px solid red;
position: absolute;
left: 100px;
top: 50px;
}
层模型——相对定位
- 与原位置相比进行上下左右的偏移
- 实例代码如下：
#div1{
width: 200px;
height: 200px;
border: 2px solid red;
position: relative;
left: 100px;
top: 50px;
}
层模型——固定定位
- 始终位于视图对应位置，不会随滚动条等状态影响
- 具体操作同绝对定位相似，翻阅即可
Relative与Absolute 组合使用
- 改变Absolute的参照元素，具体如下
<div id="box1"> //参照定位的元素
<div id="box2"></div> //相对参照元素进行定位
</div>
#box1{
width: 200px;
height: 200px;
position: relative;
}
#box2{
position: absolute;
top: 20px;
left: 30px;
}
CSS代码缩写，占用更少的带宽
盒模型代码缩写
- margin padding border:
- 1、四个方向全写
- 2、只写一个：四个方向一致
- 3、只写两个：上下、左右
- 4、写三个：左右相同
颜色值的缩写
- 当你设置的颜色是十六进制的色彩是，如果每两位的值相同，可以缩写一半
- 如下
p{
color: #000000(000);
}
p{
color: #336699(369);
}
字体缩写
-正常编写如下：
body{
font-style: italic;
font-variant: small-caps //把段落设置为小型大写字母字体
font-weight: bold;
font-size: 12px;
line-height: 1.5em;
font-family: "宋体"，sans-serif
}
可简化为一句
body{
font= ...........
}
-常用如下，只有字号、行间距、中文字体和英文字体
body{
font: 12px/1.5em "宋体",sans-serif;
}
单位和值
颜色值
- 颜色共分别为以下三类：
1、字体颜色——color
2、背景颜色——background—color
3、边框颜色——border - 设置颜色的方法也有以下几种：
- 1、英文命令颜色
- 2、RGB颜色：每一项的值既可以是0-255间的证书，也可以是0%-100%的百分数
- 3、十六进制颜色
长度值
- 常用单位：px（像素）、em、%（百分比）
- 三种单位均为相对单位：
- em：就是font-size的值，随你设置的有所不同
- 百分比：
p{
font-size: 12px;
line-height: 130%; //设置行高为字体的130% 12*1.3=15.6px
}
CSS样式设置小技巧
水平居中设置
行内元素：文本、图片等 text-align: center
<body>
<div class="txtCenter"></div>
</body>
<style>
.txtCenter{
txt-align: center;
}
</style>
定宽块状元素： margin: 20px auto
<body>
<div class="txtCenter"></div>
</body>
<style>
div{
border: 1px solid red; //为了显示居中效果明显为div设置了边框
width: 200px; //定宽
margin: 20px auto;
//margin-left与margin-right设置为auto
}
</style>
也可以写成：
margin-left: auto;
margin-right: auto;
不定宽度元素
引入<table>标签，看作定宽元素来使用
-
<table>标签具有宽度自适应性
<style>
table{
border: 1px solid;
margin: 0 auto;
}
</style>
将块级元素转化为行内元素 diplay：inline
- 但也存在一些问题，如设置为行内元素后，就少了一些设定长度值的功能
设置浮动及相对定位
- 通过给父元素设置float，然后给父元素设置
position：relative和left：50% - 子元素设置
position：relative和left：-50%
垂直居中
父元素高度确定的单行文本
- 通过设置
height与line-height高度一致来实现
<style>
.container{
height: 100px;
line-height: 100px;
background: #999;
}
</style>
父元素高度确定的多行文本
- 1|插入
<table>，同时设置vertical-align实现居中 - 2|设置
display:table-cell,设置vertival-align
隐形改变display类型
- 1|
position: absolute - 2|
float: left或float:right - 只要出现上述两种情况，display类型就会自动变为
display:inline-block的方式显示，也就可以设置元素的宽和高了（针对行内元素而言)
css3 flex布局
传统盒子模型：
主要问题：
padding/
border
盒子模型
content-box
平时普通盒子模型，padding，border，盒子会变大，向外扩展
border-box
盒子模型，padding，border，盒子模型不变大，向内扩展
calc(公式):
//注意：+-*/ 具体如下
clac(100px-20px) ×
clac(100px - 20px) √
flex弹性盒子布局
父级属性
display:flex
添加浏览器前缀：-webkit
(真实工作中通常使用postCss插件完成)
- 如果用了弹性布局，子元素，不需要浮动float
父级身上的其他属性：
justify-content: 子元素的水平排列方式 √
`center ` 居中
`space-betwwen` 两端对齐
`space-around` 牵手对齐
`flex-start` 居左
`flex-end` 居右
align-items：子元素垂直排列 √
`center` 居中
`flex-start` 开始
`flex-end` 底部
align-content ：多行同时选择垂直排列
`center` 居中...
flex-direction：排列方式 √
`row` 横向排列（默认）
`row-reverse` 横向翻过排列
`column` 纵向排列
`column-reverse` 纵向翻过排列
flex-wrap：子元素是否显示在一行 √
`no wrap` 不换行（默认）
`wrap` 换行
flex-grow : <flex-direction> <flex-wrap> 混合输入
子级属性
flex:1 1是一个系数 √
- 子元素在划分父元素宽度，先刨除固定宽度
align-selt 用来覆盖父级align-items垂直排列
flex-grow:1 定义子元素放大比例
order: 规定子元素顺序
- 排序数值越小，越靠前，默认值为0