CSS笔记

一只小万叶

已于 2023-07-05 20:34:28 修改

阅读量210

点赞数

分类专栏：学习笔记（自己理解总结）文章标签： css 笔记前端学习

于 2023-07-05 20:15:01 首次发布

本文链接：https://blog.csdn.net/qq_35625122/article/details/131563131

版权

学习笔记（自己理解总结）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS

初识CSS

简介

Css全拼：Cascading style sheet 层叠样式表

/* css特有的唯一注释 */
/*
 *语法结构
 *改变的目标{
 *属性:属性值；
 *}
 */

link标签

外部引入css样式表

<link rel="stylesheet" href="css文件路径">

导入外部样式表

<style>
	@import url(路径);
</style>

一. 选择器

1. 标签选择器

选取指定的HTML元素。

/* 标签名：{属性：属性值；} */
p {color:red;}                   /* 改变所有p标签的字体颜色 */

2. 类选择器

选取指定class属性的元素。

/* .名字：{属性：属性值；} */
.name {
  color:black;
}
/* <span class="name">123</span> */

3. id选择器

选取指定id属性的元素。

同一个页面中只允许一个id

不能重复

/* #名字：{属性：属性值；} */
#name {
  color:black;
}
/* <span id="name">123</span> */

4. 多类选择器

<!-- 标签名, 标签名, 标签名..........{属性：属性值;} -->
<style>
  /* h1标签span标签p标签都用这个样式 */
  h1, span, p {
    	font-size:20px;
  }
</style>

<h1>啊哈哈哈</h1>
<span>我是一个span标签</span>
<p>我是一个p标签</p>

5. 后代选择器

选取指定元素的后代元素。

<!-- 选择某个标签下的另一个标签 -->
<style>
  /* 选择p标签下的span标签(改变span标签的样式) */
  p span {
    color:yellow;
  }
</style>

<p>
  <span>哈哈</span>
</p>
	<span>耶耶</span>

6. 子选择器(儿子选择器)

选取指定元素的直接子元素。

<!-- 只选择当前标签下的子选择器(只要儿子不要孙子重孙) -->
<!-- 标签 > 标签 {属性：属性名;} -->
<style>
  /* 这样是实现不了的，因为span是div的孙子 */
  div > span {
    color:yellow;
  }
  /* 这样是可以实现的，因为span是p的儿子,意思就是寻找p下面的span标签 */
  p > span {
    color:yellow;
  }
</style>

<div>
  <p>
    <span>哈哈</span>
  </p>
</div>

7. 相邻兄弟选择器

<!-- 标签 + 标签{属性：属性名;} -->
<!-- 选择同级且紧跟的标签,只改变紧跟的标签的属性 -->
<style>
  /* 只改变h1的样式 */
  p + h1 {
    color:red;
  }
</style>

<div>
  <p>1</p>
  <h1>2222</h1>
</div>

/* 还能这样用：鼠标放在第一个标签上改变的是当前的标签和后面标签的颜色 */
ul li div:hover{
    background-color: rgb(213, 56, 93);
    cursor:pointer;
}
ul li div:hover + span{
    color: rgb(213, 56, 93);
    cursor:pointer;
}
/* 还能这样用：鼠标放在第一个标签上改变的是当前的标签和后面标签的颜色 */
li:hover div{
    background-color: rgb(213, 56, 93);
    cursor: pointer;
}

li:hover {
    color: rgb(213, 56, 93);
    cursor: pointer;
}
/* 也可以实现 */

8. 通用同层选择器

选取同一层级内的所有同名元素（不包含开头元素！）。

<style>
  /* 选择当前最后一个p标签之后的所有同级的h1标签，改变他们的属性 */
  p ~ h1 {
    color:red;
  }
</style>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>

9. 属性选择器

选取指定属性的元素。

a[id]{
  color:red;
}
/* 选中a标签中href=a1 改变 */
a[href=a1]{
  color:green;
}
/* a标签href 属性包含a2 全部选中 */
a[href*=a2]{
  color:yellow;
}
/* a标签中 href 属性值以a2开头 */
a[href^=a2]{
  font-size:24px
  color:red;
}
/* a标签中 href 属性值以a2结尾 */
a[href$=a2]{
  font-size:44px
}
<body>
	<a href="a1"></a>
    <a href="a2"></a>
    <a href="a22"></a>
    <a href="2a2"></a>
    <a href="a3"></a>
</body>

10. 层叠选择器

用于匹配满足多个条件的元素，比如某个class下的某个标签。

.menu .submenu li {
	border: 1px solid black;
}

11. 通用选择器

选取所有元素。

* {
	margin: 0;
}

12. 伪类选择器

伪类名	作用
:hover	鼠标悬停时的样式
E:first-child	作为父元素的第一个子元素的E
E:last-child	作为父元素的最后一个子元素的E
E F:nth-child(n) 不严谨！！！！！	选择父级元素E的第n个子元素F
E:first-of-type	选择父级元素内具有指定类型的第一个元素
E:last-of-type	选择父级元素内具有指定类型的最后一个E元素
E:nth-of-type(n) 严谨！！！！！	选择父级元素内具有指定类型的第n个F元素
a:link	未单击访问时超链接的样式
a:visited	单击访问后超链接的样式
a:active	鼠标单击未释放时超链接的样式
a：有顺序之分	a:line>a:visited>a:hover>a:active

选择器	描述
:checked	选取所有被选中的表单控件
:disabled	选取所有被禁用的表单控件
:enabled	选取所有可用的表单控件
:empty	选取所有没有子元素的元素
:first-child	选取所有父元素的第一个子元素
:last-child	选取所有父元素的最后一个子元素
:not()	选取所有不匹配选择器表达式的元素
:nth-child()	选取所有父元素的第n个子元素
:nth-last-child()	选取所有父元素的倒数第n个子元素
:nth-of-type()	选取所有父元素下相同类型的第n个子元素
:nth-last-of-type()	选取所有父元素下相同类型的倒数第n个子元素
:only-child	选取所有只有一个子元素的元素
:only-of-type	选取所有父元素下只有一种类型的子元素
:target	选取当前活动的锚点元素
:root	选取文档的根元素
:lang()	选取所有指定语言的元素
:target-within	选取所有目标元素的祖先元素
:focus-within	选取所有包含一个获得焦点元素的元素
:is()	可以同时匹配多个选择器表达式
:where()	可以对复杂的选择器进行分组和逻辑操作
:any-link	选取任何带href属性的锚点元素
:valid	选取所有满足验证条件的表单控件
:invalid	选取所有不满足验证条件的表单控件
:default	选取表单中默认选中的元素

13. 伪元素选择器

这些伪元素选择器可以让我们定制更精细的页面样式

伪元素选择器非常有用，并且可以让开发者针对元素的某些部分单独进行样式设置，从而获得更好的美学和效果。

选择器	描述
::before	在选定元素的内容之前插入内容
::after	在选定元素的内容之后插入内容
::first-letter	选取选定元素的第一个字母并应用样式
::first-line	选取选定元素的第一行并应用样式
::selection	选取用户选定的文本并应用样式
::marker	选取列表标记并应用样式
::placeholder	选取所有输入框的placeholder文本并应用样式
::backdrop	选取弹出层的外部容器并应用样式

用法示例：

::before：在选定元素的内容之前插入内容

// 例如，在每个p元素前面插入一个足球图标
p::before {
  content: "\26BD "; /* Unicode 足球图标 */
}

::after：在选定元素的内容之后插入内容

// 例如，在每个a元素后面添加一个箭头图标：
a::after {
  content: "\2192 "; /* Unicode 右箭头图标 */
}

::first-letter：选取选定元素的第一个字母并应用样式

// 例如，对于每个段落元素的首字母，将其字体大小增大并添加颜色：
p::first-letter {
  font-size: 2em;
  color: red;
}

::first-line：选取选定元素的第一行并应用样式

// 例如，调整每个段落元素的第一行行距：
p::first-line {
  line-height: 1.5;
}

::selection：选取用户选定的文本并应用样式

// 例如，将用户在页面上选择的文本背景色改为黄色：
::selection {
  background-color: yellow;
}

::marker：选取列表标记并应用样式。

// 选取列表标记并应用样式。
ul::marker {
  content: "\2605 "; /* Unicode 实心五角星 */
}

::placeholder：选取所有输入框的placeholder文本并应用样式

// 例如，将所有输入框的placeholder文本颜色改为灰色：
::placeholder {
  color: gray;
}

::backdrop：选取弹出层的外部容器并应用样式

// 例如，对于一个弹出层，将其外部容器的背景色设为半透明黑色：
::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

二. CSS 顺序

相同的css样式下后面的样式会覆盖前面的样式

a {
  font-size:30px;
  color:red;
}
a {
  font-size:40px;
  color:blue;
}
/* 
 *	最后实现的样式只会是字体大小为40，颜色为蓝色的样式
 *	相同的css样式下后面的样式会覆盖前面的样式
 */

优先级

行内样式 > head-style(内部样式) > 外部样式 

由里到外
先看body主体的样式
再看head头部的样式
最后在看外面的样式

同一个标签同时存在id选择器和类选择器
!important>行内样式> ID 选择器>类(伪元素、伪类、属性)选择器>元素选择器>通用选择器

<link>外部引入样式优先级

我同时有多个外部样式引入，里面都有一个相同属性的元素样式
优先会用下最下面的样式

<link href="css/jd1.css" rel="stylesheet" type="text/css">
<link href="css/jd2.css" rel="stylesheet" type="text/css">
<link href="css/jd3.css" rel="stylesheet" type="text/css">
优先使用jd3.css的样式

强制执行

!important

强制运行这个属性，不顾及顺序及明确

三. CSS样式

/* table边框 */
/* table:边框大小 边框样式 边框颜色; */
<table border="1" bordercolor="#FF9966">
            <tr>
                <td width="102" style="border-right-style:none">隐藏右边框</td>
                <td width="119" style="border-left-style:none">隐藏左边框</td>
            </tr>
            <tr>
                <td style="border-top-style:none">隐藏上边框</td>
                <td style="border-bottom-style:none">隐藏下边框</td>
            </tr>
        </table>

        <table>
            <tr>
                <td style="border-right:#cccccc solid 1px;">显示右边框</td>
                <td style="border-left:#cccccc solid 1px;">显示左边框</td>
                <td style="border-top:#cccccc solid 1px;">显示上边框</td>
                <td style="border-bottom:#cccccc solid 1px;">显示下边框</td>
            </tr>
        </table>

        <table>
            <tr>
                <td style="border-right : thin dashed blue;">右边框显示细虚线</td>
                <td style="border-bottom: thick dashed yellow;">左边框显示粗虚线</td>
                <td style="border-top: double green;">上边框显示两条线</td>
                <td style="border-left: dotted red;">下边框显示点</td>

                <td style="border-bottom:1px dashed #cccccc;">下边框虚线</td>
            </tr>
        </table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EOW0v4Ca-1688558911519)(D:\work\Md word\前端\img\表格边框.png)]

vertical-align:middle；					/* 图片、图标与文字对齐，垂直居中 */
/* 圆角 TIps：不是设置圆形的情况下最好不要用百分比设置，用像素设置 */
transition: all 3s ease 1s; 


/* 同时缩放加平移 */
div:hover {transform: translate(1000px,100px) scale(10);}
/* 渐变色 */
/* 属性：方向,红逐渐变蓝 tips：不加-image也能实现 */
background: linear-gradient(to right, red , blue);
/* 块级元素变行内元素 */
display: inline-block
/* 光标变小手 */
cursor:pointer;
/* 元素透明度 */
/* 两种写法 0-1 反着对应 0%-100%*/
opacity:1;

/* 动画 很精彩 */、
.main ul > li:hover .commodity{
    display: block;
    animation: hideIndex 1s;
}
/* 为animation下的hideIndex属性值绑定@keyframes动画样式表*/
@keyframes hideIndex{
	0%{ opacity: 0; transform: translate(0px, -10px) }
	100%{opacity: 1; transform: translate(0, 0) }
}

不懂就去搜索animation属性用法

/* 鼠标单击文本框后消除加粗的边框 */
input:focus{
    outline: none;
}

1. 字体样式

字体大小：1em=16px

缩进的时候会用到em

属性	作用	属性值
font-family	字体类型	黑体设置多个则 font-family: “Times New Roman”,“Times”,宋体;
font-style	字体风格	斜体:italic…
font-weight	字体粗细	加粗：bold 更粗一点：bolder 细一点：lighter
font	一个属性设置全部	风格粗细大小类型

2. 文本样式

属性	作用	属性值
text-align	文本对齐方式	center居中 left左对齐（默认） right右对齐 justify两端对齐
text-indent	首行文本缩进	用em单位设置，会根据文本的字体大小进行智能缩进
line-height	行高	可以设置垂直居中
text-decoration	文本装饰	underline:下划线 overline:上划线 line-through:删除线 Tips:如果想同时存在多个效果就写在一起，没有顺序之分

3. color属性

flatui 扁平化设计（常用）网站找色系

拟物化设计-苹果公司著名设计师提出

属性	作用
rgb( r, g, b);	r;红色 g:绿色 b:蓝色三个数字上限255，数字越大颜色越亮
rgba( r, g, b, a)	a：透明度（越小越透明 0.1 1）
#dddddd	16进制来写，如果#后面6个数字相同则可简写为3个数字=6个数字

4. 阴影

1 - 阴影属性

box-shadow: h-shadow v-shadow blur spread color inset;

属性值	作用
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

2 - 文本阴影

/* 文本阴影 */
/* 内阴影（不加这个默认外阴影） x轴距离 y轴距离 模糊度 阴影颜色 */
text-shadow : inset 10px 10px 0px black

3 - 盒子阴影

/* 阴影 */
/* 内阴影（不加这个默认外阴影） x轴距离 y轴距离 模糊度 阴影颜色 */
box-shadow : inset 10px 10px 0px black

4 - 设置多个阴影

/* 用,隔开 */
box-shadow: 10px 10px 10px 10px #0f0 ,20px 20px 10px 10px #f0f ,30px 30px 10px 10px #888888 ;

5. 列表样式

属性名：list-style	作用
none	取消样式
disc	实心圆
circle	空心圆
square	实心方块
decimal	数字

不管是有序或者无序列表都按照你想要的样式来改变

用list-style-type属性

属性值：	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

列表头为图片

list-style-image:url();

6. 背景图片

属性	作用
background-repeat:no-repeat	不平铺
background-repeat:repeat-x	平铺x轴
background-repeat:repeaty	平铺y轴
background-position：x轴 y轴；（可用%控制垂直水平居中） background-position：top right；（图片右上，可以用英文来定位）	控制图片位置
background：背景颜色 url() 平铺位置位置；	一个属性设置多个值

7. 动画

1 - 2D变形

transform

属性	作用	属性值
translate	平移	translate(x轴移动距离,y轴移动距离)
translateX	平移X轴距离	translateX(X轴移动距离)
translateY	平移Y轴距离	translateY(Y轴移动距离)
rotate	旋转	rotate(旋转度数)
scale	缩放	scale(x轴放大倍数,y轴放大倍数) 值为负数则翻转缩小则0.开头
scaleX	缩放X轴	scaleX(放大的倍数)
scaleY	缩放Y轴	scaleY(放大的倍数)
skew	倾斜	skew(x轴倾斜度,y轴倾斜度)
skewX	倾斜X轴	skewX(倾斜度数)
skewY	倾斜Y轴	skewY(倾斜度数)

/* translate:平移  （x轴，y轴） */
transform: translate(100px,100px) ;	
/* scale:缩放  （宽度，高度） 倍数（像素）缩放 */
/* 必须为正数 不能为负数，如果想缩小就输入小于1的数 例：0.1，0.2... */
transform: scale(1,2) ; 
/* rotate:旋转 Tips：单位必须是deg 1deg=1度 */
transform: rotate(20deg,20deg);
/* skew：倾斜  Tips：单位必须是deg 1deg=1度*/
transform: skew(20deg,20deg)
/* 可以多个变形同时使用 */
transform:scale(1,2) skew(20deg,20deg) rotate(20deg,20deg);

2 - 过渡

transition

transition:whidth 2s,background-color 2s;
transition:all;
/* 
	过度的控件 all为全部元素 过度所需要的时间 过度的效果（写死的数据） 延迟时间，可为负数 
	如果想让它动画回去 一定记得在原有的选择器属性里加transition
	比如 
	.dh {
		transition:变化的控件 过渡时间 延迟时间 过度样式
		transition: all 3s 1s ease;      //必须加这个不然 没有回去的动画效果
	}
	.dh:hover {
		transition: all 3s ease 1s; 
	}
*/

/*
   	过度效果
	ease：速度由快到慢（默认值）
	linear：速度恒动（匀速运动）
	ease-in：速度越来越快（渐显效果）
	ease-out：速度越来越慢（渐隐效果）
	ease-in-out：速度先加速在减速（渐显渐隐效果）
*/

3 - 动画

@keyframes关键帧

/* 两种写法 */

/* 英文 */
@keyframes name {
  from {/* CSS央视写在这里 */}
  to{/* CSS央视写在这里 */}
}
/* 百分值 常用 */
@keyframes name {
  0% {/* CSS央视写在这里 */}
  100%{/* CSS央视写在这里 */}
}

animation动画

animation: name duration timing-function delay iteration-count direction fill-mode;

属性值	作用	属性表
name	动画名称	name属性
duration	动画完成所需要的时间	duration属性
timing-function	动画进行的样式	timing-function属性
delay	动画在几秒后生效（延迟）动画开始前的等待时间	delay属性
iteration-count	定义动画播放的次数	iteration-count属性
direction	指定是否应该轮流反向播放动画（如果动画被设置只播放一次，该属性将不起作用）	direction属性
fill-mode	规定当动画不播放是（当动画完成时或当动画有一个延迟未开始播放时），要应用到的元素的样式	fill-mode属性
play-state	指定动画是否正在运行或暂停	play-state属性

让一个图标转起来：可以用来制作点击按钮，按钮加个loading图标让他转圈圈

<style>
	 .glyphicon-refresh-animate {
        -animation: spin .7s infinite linear;
        -webkit-animation: spin2 .7s infinite linear;
    }

    @-webkit-keyframes spin2 {
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
        from { transform: scale(1) rotate(0deg); }
        to { transform: scale(1) rotate(360deg); }
    }
</style>
<button id="addAdvice" type="button" class="btn btn-success" style="position: relative;padding-left:25px">
    <!-- svg为图标，这个是我从阿里巴巴矢量图标库赋值来的 -->
    <!-- 如果图标对不齐，在父元素设置个相对定位，图标设置个绝对定位，调整位置即可 -->
    <svg></svg>
    添加医嘱
</button>
<script>
    // 点击按钮让他添加这个class
    $("#addAdvice").click(function (){
        $(this).find(".glyphicon-refresh-animate").removeClass("hide");
        $(this).prop("disabled", true);
        // 发送完请求再让按钮释放并且去除class与隐藏图标
        $(this).prop("disabled", false);
        // 自己写剩下的
    })
</script>

四. 盒子模型

1. 简介

每个html标签都是一个盒子

由元素内容宽高内边距边框及外边距组成

<!-- 内外边距分为上下左右4个方向 -->
内边距padding：内容与边框的距离
外边距margin：元素边框与另一个元素边框之间的距离

/* 上下边距为0 左右水平居中 */
margin:0px auto;
/* 元素宽度=边框宽度+元素宽度+左右内边距 */

2. 内边距padding

/* 对于行内元素讲 内边距只有左右有效果 上下没效果 但是padding还是有值的 */
/* 四个方向的内边距为5px */
padding:5px;
/* 上下内边距5px 左右内边距15px */
padding:5px 15px;
/* 调整4个不同的内边距 顺时针方向（规范） 上右下左 */
padding:5px 10px 15px 30px;
/* 单独调整一个方向的内边距 */
/* padding-方向:边距; */

3. 外边距margin

/* 对于行内元素讲 外边距只有左右有效果 上下没效果 */
/* 四个方向的外边距为5px */
margin:5px;
/* 上下外边距5px 左右外边距15px */
margin:5px 15px;
/* 调整4个不同的外边距 顺时针方向（规范） 上右下左 */
margin:5px 10px 15px 30px;
/* 单独调整一个方向的外边距 */
/* margin-方向:边距; */

边距的碰撞

.p1 {margin:20px;}
.p2 {margin:30px;}
/* 
 *p1下外边距位20px
 *p2上外边距为30px
 *他们之间的距离不是20px+30px
 *此时会采用30px 并不是30px+20px
 */

边距可以为负值-!!! 谨记

4. display属性

定义与用法：display 属性规定元素应该生成的框的类型

属性值

作用

none

隐藏元素

inline-block

拥有行内元素和块级元素的特性（还是行内元素）

block

将行内元素变成块级元素

list-item

此元素会作为列表显示。

run-in

此元素会根据上下文作为块级元素或内联元素显示。

table

此元素会作为块级表格来显示（类似），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似），表格前后没有换行符。

table-row

此元素会作为一个表格行显示（类似

table-cell

此元素会作为一个单元格显示（类似

）

table-caption

此元素会作为一个表格标题显示（类似

）

inherit

规定应该从父元素继承 display 属性的值。

inline

将块级元素变为行内元素

）。

5. 圆角

border-raius :1 1 1 1; 					 /* 顺序：左上 右上 右下 左下 */
border-raius :1 1; 						 /* 顺序：左上-右下 右上-左下 */

6. 浮动

float

浮动的元素会脱离当前标准的文档流
标准文档流：指的是行内元素或块级元素按照一行或者一列从左到右或从上到下自然的排列

属性值	作用
left	向左浮动
right	向右浮动
	继承上一级的元素浮动

清除浮动

clear:left;  /* 清除左边的浮动影响 */

属性值	作用
left	清除左浮动
right	清除右浮动
both	清除全部浮动

边框塌陷问题

四种解决方案

直接给父元素加高度
给浮动元素的最下面添加一个空的div 给这个div设置clear属性，值为both
父元素设置overflow属性，值为hidden
给父元素添加after伪类并设置3个属性 content: ‘’; display: block; clear: both;-----比较常用

7. 溢出

overflow:scroll;

属性值	作用
hidden	隐藏超出部分的内容
scroll	加滚轮显示超出内容

overflow:auto; = height:auto;
/* 高度随内容改变 */

水平方向内容溢出

/* 解决方案 */
word-break:break-all;
overflow:hidden;

8. 定位

1 - 静态定位

页面默认定位样式

position:static;

2 - 相对定位

想保留原来位置的空间且移动
如果一个元素设置了此属性那该元素就有了四个可设置偏移量的属性
相对于自身原来的位置进行偏移
相对定位的元素不会影响其他元素
相对定位的元素占有原来的位置（空间占用）
不会脱离当前标准文档流

/* 解锁的属性可以设置负值，有奇效 */
position:relative;
left:100px;
top:100px;

解锁的属性	作用
left	向左边移动
right	向右边移动
top	向上面移动
bottom	向下面移动

3 - 绝对定位

绝对定位的元素会影响其他元素的位置
绝对定位的元素也具有相对元素的四个解锁偏移量 left right top bottom
如果绝对定位的元素没有被父元素包裹那当前元素的偏移是相对浏览器定位的，如果父元素参与定位且包裹此元素则相对于父元素进行定位
绝对定位一般都是和父元素的相对定位配合使用
如果多个元素都参与绝对定位并且为兄弟关系那最后的元素在最上面但可以通过属性 z-index 控制某个单独元素的位置让元素按自己的意愿进行顺序显示
会脱离当前标准文档流
- z-index 值越大越在前（越优先显示）

/* 父元素 */
div{
  position:relative;
}
/* 子元素 */
.a1{
 	position:absolute;
	lefi:100px;
	top:100px;
}
<body>
	<div>
		<div class="a1"></div>
	</div>
</body>

4 - 固定定位

相对于浏览器进行定位（唯一与绝对定位不同的地方），不会因为父元素的定位改变位置
固定定位会影响其他元素的位置
脱离当前标准文档流
可通过 z-index 属性改变控制元素的位置
与绝对定位很相似
绝对定位的元素也具有相对元素的四个解锁偏移量 left right top bottom
可以实现页面下滑元素固定位置（左右侧客服栏回到顶部页面滑动导航栏跟着滑动）

position:fixed;

5 - 属性z-index改变定位顺序

/* 此时显示的是a2 */
.a1{
	whidth:100px;
	height:100px;
  	position:absolute;
	background-color:red;
}
.a2{
  	position:absolute;
	whidth:100px;
	height:100px;
	background-color:blue;
}
/* 加z-index让其打乱顺序显示a1 */
.a1{
	whidth:100px;
	height:100px;
  	position:absolute;
	background-color:red;
  	z-index:1;
}
.a2{
  	position:absolute;
	whidth:100px;
	height:100px;
	background-color:blue;
}

/* 如果同时设置z-index 谁的值大则显示谁 */
.a1{
	whidth:100px;
	height:100px;
  	position:absolute;
	background-color:red;
  	z-index:1;
}
.a2{
  	position:absolute;
	whidth:100px;
	height:100px;
	background-color:blue;
}

<div class="a1"></div>
<div class="a2"></div>

6 - 冻结属性好用

/* 给想要冻结的div添加这个样式即可 超级方便 */
/* 而且不脱离标准文档流 */
position: sticky;
left: 0;

五. 特性

对于行内元素来讲设置width与height是改变不了大小的，宽高由内容撑起
CSS层叠性
CSS继承性
当内容行高与元素高度相等时元素会实现垂直居中

六. 弹性布局

1. 基本概念

$f l e x$ 布局

容器轴概念

轴称	简介
$main$ $a x i s$	水平主轴 $X$ 轴
$corss$ $a x i s$	垂直交叉轴 $Y$ 轴
$main$ $s t a r t$	水平轴（ $X$ 轴）开始位置
$main$ $e n d$	水平轴（ $X$ 轴）结束位置
$cross$ $s t a r t$	交叉轴（ $Y$ 轴）开始位置
$cross$ $e n d$	交叉轴（ $Y$ 轴）结束位置
$main$ $s i ze$	子元素占宽
$cross$ $s i ze$	子元素占高

$Tips : $如果将一个元素$ display $属性设置为$ flex$ 或 $in l in e$ - $f l e x$ 时

其子元素的 $f l o a t$ 、 $c l e a r$ 和 $v er t i c a l$ - $a l i g n$ 等属性将失效
只影响子元素！！不影响后代元素！！！！

用法

<style>
  /* 给父元素添加display:flex属性 */
  .d1{
    display:flex;
  }
</style>
<div class="d1">
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
</div>

2. 容器属性

父元素添加完 $d i s pl a y : f l e x$ 属性后该父元素会解锁6大属性

$f l e x$ - $d i rec t i o n$ 属性：决定主轴方向（决定子元素的排列方式）

值	描述
$ro w$	默认值主轴沿水平方向从左到右，起点在左
$ro w$ - $re v erse$	主轴沿水平方向从右到左，起点在右
$c u l u mn$	主轴沿垂直方向从上到下，起点在上
$c u l u mn$ - $re v erse$	主轴沿垂直方向从下到上，起点在下
$ini t ia l$	将此属性设置为属性的默认值
$inh er i t$	从父元素继承此属性的值

$f l e x$ - $w r a p$ 属性：设置子元素超出父容器时是否换行

值	描述
$n o w r a p$	默认值表示元素不会换行
$w r a p$	元素会在需要时换行，从上往下排列
$w r a p$ - $re v erse$	元素会在需要时换行，从下往上排列有点反人类
$ini t ia l$	将此属性设置为属性的默认值
$inh er i t$	从父元素继承此属性的值

$f l e x$ - $f l o w$ 属性：该属性为 $f l e x - d i rec t i o n$ 与 $f l e x$ - $w r a p$ 的总成写法

写法
```
/** 值对应flex-direction与flex-wrap属性的所有值
  * 相当于一个属性设置两个属性
  **/
flex-flow: flex-direction flex-wrap;
```

$j u s t i f y$ - $co n t e n t$ 属性：设置子元素在主轴（ $X$ 轴-横轴）方向的对齐方式

值	描述
$f l e x$ - $s t a r t$	默认值，左对齐
$f l e x$ - $e n d$	右对齐
$ce n t er$	水平居中对其
$s p a ce$ - $b e tw ee n$	两端对齐，元素之间间隔是相等的
$s p a ce$ - $a ro u n d$	每个元素两侧的间隔相等，中间的间隔距离是最左边距离与最右边距离的两倍

$a l i g n$ - $i t e m s$ 属性：设置子元素在交叉轴（ $Y$ 轴-纵轴）方向的对齐方式

值	描述
$s t re t c h$	默认值子元素将被拉伸适应容器（子元素未设置高度，将占满父元素，父元素多少高度就占多高）
$ce n t er$	子元素位于交叉轴的中间-垂直居中
$f l e x$ - $s t a r t$	子元素位于交叉轴的开始位置-顶部
$f l e x$ - $e n d$	子元素位于交叉轴的结束位置-底部
$ba se l in e$	子元素与父元素的基线对其

几个属性值的效果如下图所示：

align-items 属性演示

$a l i g n$ - $co n t e n t$ 属性：子元素多行情况下的对齐方式
- 单行模式下不生效
- 要与 $f l e x$ - $w r a p : w r a p$ 同时使用
- 可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式

值	描述
$s t re t c h$	默认值子元素将被拉伸适应容器（子元素未设置高度，将占满父元素，父元素多少高度就占多高）
$ce n t er$	子元素在容器内居中排布水平居中
$f l e x$ - $s t a r t$	子元素位于交叉轴的开始位置-顶部
$f l e x$ - $e n d$	子元素位于交叉轴的结束位置-底部
$s p a ce$ - $b e tw ee n$	多行子元素均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
$s p a ce$ - $a ro u n d$	多行子元素均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等

几个属性值的效果如下图所示：

3. 项目属性

$or d er$ 属性：定义项目的排列顺序。数值越小，排列越靠前，默认为0 可以为负数
- 语法：选择器{ order: 排名数值 };
```
.item{
  order:1;
}
```
$f l e x$ - $g ro w$ 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

语法：选择器{ flex-grow: }
- 放大规则：
```
有一排子元素，先宽度分配放大flex-grow为0的子元素，然后剩余的宽度按比例分配给flex-grow不为0的（其宽度为剩余宽度乘以当前flex-grow值再除以所有该行元素的flex-grow总和）。
```
- 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
$f l e x$ - $s h r ink$ 属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

语法：选择器 { flex-shrink: }
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
- 负值对该属性无效
- 子元素中如果有文字，那么文字撑开的部分宽度是无法压缩的，子元素宽度为当前子元素宽度减去压缩宽度（压缩宽度等于总超出宽度乘以当前元素的加权比例（当前元素宽度乘以flex-shrink值除以【每个元素宽度乘以自身flex-shrink的和】））
$f l e x$ - $ba s i s$ 属性：项目的宽度
语法：
```
.item {
  flex-basis: <length> | auto; /* default auto */
}
```
- $f l e x$ - $ba s i s$ 属性定义了在分配多余空间之前，项目占据的主轴空间（ $main$ $s i ze$ ）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 $a u t o$ ，即项目的本来大小
- 它可以设为跟 $w i d t h$ 或 $h e i g h t$ 属性一样的值（比如350 $p x$ ），则项目将占据固定空间
$f l e x$ 属性：是flex-grow, flex-shrink 和 flex-basis的简写
语法：
```
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
```
- 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
- 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

$a l i g n$ - $se l f$ 属性：允许子元素flex item与其他子元素flex item有不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示，有以下几种取值：

值	描述
$a u t o$	（默认值）继承父元素的
$s t re t c h$	轴线占满整个交叉轴
$f l e x$ - $s t a r t$	与交叉轴的起点对齐
$f l e x$ - $e n d$	与交叉轴的终点对齐
$ce n t er$	与交叉轴的中点对齐
$ba se l in e$	子元素flex item中的第一行文字的基线对齐

七. 媒体查询

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表
媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 $t r u e$ 或 $f a l se$

语法：

/* @media 适用对象 and (条件) */
@media not|only mediatype and (expressions) {
  /* css样式 */
  CSS-Code;
}

您还可以针对不同的媒体使用不同的样式表：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

$e x p ress i o n s$ 媒体类型
下面值==expressions

值	描述
* $a ll$	用于所有的媒体设备。
$a u r a l$	用于语音和音频合成器。
$b r ai ll e$	用于盲人用点字法触觉回馈设备。
$e mb osse d$	用于分页的盲人用点字法打印机。
$han d h e l d$	用于小的手持的设备。
$p r in t$	用于打印机。
$p ro j ec t i o n$	用于方案展示，比如幻灯片。
* $scree n$	用于电脑显示器。
$tt y$	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
$t v$	用于电视机类型的设备。
$s p eec h$	用于大声“读出”页面的屏幕阅读器。

/* 当浏览器宽度大于480px时 以下属性生效 */
@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}

#main {margin-left: 4px;}

#leftsidebar {
  float: none;
  width: auto;
}

#menulist {
  margin: 0;
  padding: 0;
}

.menuitem {
  background: #CDF0F6;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
</style>
</head>
<body>

<div class="wrapper">
  <div id="leftsidebar">
    <ul id="menulist">
      <li class="menuitem">Menu-item 1</li>
      <li class="menuitem">Menu-item 2</li>
      <li class="menuitem">Menu-item 3</li>
      <li class="menuitem">Menu-item 4</li>
      <li class="menuitem">Menu-item 5</li>
    </ul>
  </div>
  
  <div id="main">
    <h1>请调整浏览器窗口大小来查看效果！</h1>
    <p>本例显示了一个菜单，如果视口为 480 像素或更宽，它将向页面左侧浮动。如果视口小于 480 像素，则菜单将位于内容的顶部。</p>
  </div>
</div>

</body>
</html>

区间选择与或者

语法：

/* 宽度在 600 到 900 像素之间或超过 1100 像素 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
</style>
</head>
<body>

<h2>改变 DIV 在不同屏幕尺寸上的外观</h2>

<div class="example">Example DIV.</div>

<p>请调整浏览器窗口的大小以查看响应效果。如果浏览器宽度在 600 到 900 像素之间或超过 1100 像素，则改变 DIV 的外观。</p>

</body>
</html>

选择器权重比较

说明
或称非凡性，是需要用一套计算公式来去计算CSS的权重。CSS的权重是一个衡量CSS值优先级的一个标准，规则如下：
用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
权重比较

选择器的权重	0,0,0,0
一个标签（元素）选择器权重	0,0,0,1
一个类，伪类选择器的权重	0,0,1,0
一个ID选择器权重	0,1,0,0
一个行内样式权重	1,0,0,0
一个!important权重	我是王者我最大

权重的叠加