CSS总结

小白菜00

已于 2022-09-06 10:28:08 修改

阅读量1.8k

点赞数 2

分类专栏： css 文章标签： css 前端 html

于 2022-06-24 16:59:26 首次发布

本文链接：https://blog.csdn.net/m0_60027772/article/details/125441993

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

background-position属性

背景图片大小

background-attachment属性

1.默认（说明可以改）让子元素（包括块级）横向排列

2.子元素是行内元素则直接转化为块级元素

3.设置一个元素相对于父盒子的水平垂直居中——margin: auto;

基于375px宽度设计的网页在不同宽度客户端等比例缩放问题

transition-timing-function属性值

改变中心点位置为左上角（默认值为center）

animation与transition的区别

CSS概念

定义：层叠样式表，用来修饰html的，目前遵循的W3C发布的CSS3.0

理解

每个CSS样式由2部分组成，即选择符和声明，声明又分为属性和和属性值
属性必须发布放在花括号中，属性与属性值用：连接
每条声明用；结束
当一个属性有多个属性值时，属性与属性值不分先后顺序，用空格隔开
在书写样式过程中，空格，换行等操作不影响属性的显示

CSS构成

style>
    h1{
        color: rgb(239, 21, 21);
        font-style: italic;
    }
</style>

注意：

CSS选择器必须放在style标签内
style标签放在哪里都可以，并且可以写多个
CSS优先级body内style高于head内style
style标签是html提供的标签

CSS里面的注释

内容：/*注释内容*/

CSS目的

使用CSS属性来实现最终可以将CSS代码和HTML代码进行分离，同时也可以提高代码的复用性

CSS分类

内部CSS：使用html提供的style标签把css代码包起来
外部CSS：从外部引入CSS
行内CSS：当前行有效，给标签内加一个style属性

属性相同时CSS优先级

行内CSS>内部CSS>外部CSS

注意：加属性值后加!important 的所对应的属性优先级最高

    h1{
        color: rgb(228, 15, 33)!important;
    }

CSS选择器

标签名选择器
class选择器
交集选择器
id选择器
属性选择器
分组选择器
通配符选择器
包含选择器
伪类选择器
层级选择器

选择器优先级

注意：为选择器命名时，选择器的名称不能以数字开头

外部CSS

外部CSS创建引入方式1

引入外部样式表（放在哪里都可以）

<link rel="stylesheet" type="text/css" href="index.css"/>

属性

link：本页面能和外部页面进行链接
href：表示本页面要链接的CSS文件的地址
type：表示本页面链接到的页面类型，这里链接的是CSS样式表（不写也可以）
rel：用来说明本页面与链接页面之间的关系

注意：将内部样式表<style>……</style>里的资源剪切到css文件中（不包含style标签）并在表中引入<link rel="两表之间的关系" type="表的类型" href="css表的地址"/>

外部CSS创建引入方式2

<style type="text/css">
        @import url("外部css的地址");
</style>

案例

注意：css.html与index.css在同一个文件夹下

<!-- css.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部css</title>
    <style type="text/css">
        @import url("index.css");
    </style>
</head>
<body>
    <h1>我是大神</h1>
</body>
</html>

/* index.css */ 
   h1{
        color: aqua;
    }

link和import之间的区别

行内CSS

结构：<div style="width: 200px; height: 200px; color:blue">我是div</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内css</title>
</head>
<body>
    <div style="width: 200px; height: 200px; color:blue">我是div</div><!--行内css-->
</body>
</html>

内部CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部css</title>
</head>
<body>
    <h1>实验</h1>
</body>
<style>
    h1{
        color: aqua;
    }
</style>
</html>

内部CSS与外部CSS

内部CSS标签与外部CSS标签在页面内可以引入多个
内部CSS标签与外部CSS标签放在页面内哪里都可以

选择器

目的：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制

标签名选择器

<body>
    <h1>实验</h1>
</body>
<style>
    /* 标签名选择器 */
    h1{
        color: aqua;
    }
</style>

类选择器

<body>
    <div class="a">111111</div>
    <div class="a">222222</div>
    <div>333333</div>
</body>
<style>
    /* 类选择器 */
    .a{
        color: aqua;
    }
</style>

<body>
    <div class="a">111111</div><!-- 绿色 -->
    <!--可以出现属于2类的情况-->
    <div class="a b">222222</div><!-- 绿色，以style标签靠后的类选择器为主，和啊a，b的标签内顺序无关（选择器加载覆盖） -->
    <div>333333</div>
</body>
<style>
    /* 类选择器 */
    .b{
        color: red;
    }
    .a{
        color: green;
    }
</style>

交集选择器

格式：

选择器1选择器2{

属性:属性值;

}

注意： 选择器和选择器之间没有任何连接符号

案例：

<body>
    <div class="a">我是div</div>
    <p class="a">我是p</p>
</body>
<style>
    /* 只选择div标签下的a类 */
    div.a{
        color: aquamarine;
    }
</style>

<body>
    <div>
        <p name="a">一段话</p>
        <div name="a">二段话</div>
        <p name="b">三段话</p>
    </div>
</body>
<style>
    p[name="a"]{
        color: blue;
    }
</style>

id选择器

<body>
    <div id="a">111111</div>
    <div>222222</div>
    <div>333333</div>
</body>
<style>
    /* id选择器 */
    #a{
        color: red;
    }
</style>

注意：

当我们使用id选择符时，应该为每个元素定义一个id属性
id选择符的语法格式是“#”加上自定义的id名
起名是要取英文名，不能用关键字（所有标记和属性都是关键字）
一个id名称只能对应文档中的一个具体元素对象（唯一性），和类不同

通配符选择器

 /* 通配符选择武器，不管什么都具有下面的属性 */
    *{
        color: aqua;
    }

分组选择器

<body>
    <div id="a">111111</div>
    <div class="b">222222</div>
    <div>333333</div>
</body>
<style>
    /* 分组选择器,多个选择器之间用，连接 */
    div,.b,#a{
        color: red;
    }
</style>

包含选择武器

<body>
    <div>
        <p>我是一段话</p>
    </div>
</body>
<style>
    /* 包含选择器,下面表示选中div标签里的p标签，匹配原则：从右到左-由p到div */
    div p{
        color: red;
    }
</style>

<body>
    <div>
        <p>我是一段话</p>
    </div>
</body>
<style>
    /* 相对于上面的空格，这种形式说明的是选择div下的一级p标签 */
    div>p{
        color: red;
    }
</style>

伪类选择器

结构性伪类选择器

<body>
   <div class="a">
    <p>道生一</p>
    <p>一生二</p>
    <p>二生三</p>
    <p>三生万物</p>
   </div>
   <div class="b"></div>
   <div class="c"></div>
</body>
<style>
    /* 匹配a类p标签下的最后一个标签 */
   .a p:last-child{
    color: red;
   }
   .a p:first-child{
    color: blue;
   }
   /* 匹配a类p标签下的第二个标签 */
   .a p:nth-child(2){
    color: yellow;
   }
   /* 匹配a类p标签下的偶数位（even）标签奇数（odd）为2n+1/2n-1 */
   .a p:nth-child(even){
    color: pink;
   }
</style>

<body>
   <div class="a">
    <p>道生一</p>
    <p>一生二</p>
   </div>
   <div class="b">
    <p>二生三</p>
   </div>
   <div class="c"></div>
</body>
<style>
    /* 用:root代替html */
    :root,body{
        height: 100%;
        background: yellow;
    }
    div{
        width: 200px;
        height: 200px;
    }
    /* 选出有且仅有一个孩子的标签 */
   div p:only-child{
    color: red;
   }
   /* 选出没有孩子的p元素,注意，空格和文字也算孩子 */
   div:empty{
    background: green;
   }
</style>

目标伪类选择器

<body>
  <div class="a" id="a">a</div>
  <div class="b" id="b">b</div>
  <div class="c" id="c">c</div>
    <ul>
    <li><a href="#a">点我到a</a></li>
    <li><a href="#b">点我到b</a></li>
    <li><a href="#c">点我到c</a></li>
    </ul>
</body>
<style>
    div{
        width: 1000px;
        height: 1000px;
    }
    ul{
        list-style: none;
        position: fixed;
        right: 0;
        bottom: 300px;
    }
    a{
        display: inline-block;
        border: 1px solid blue;
        text-decoration: none;
    }
    /* 选定div标签下锚点点到的div目标 */
    div:target{
        background: yellow;
    }
</style>

UI元素状态伪类选择器

E:focus：匹配获取焦点的元素E

<body>
  <form action="#">
    用户名：<input type="text"><br>
    密码：<input type="password" disabled><br>
    记住用户名：<input type="checkbox"><br>
    <input type="submit" value="提交">
  </form>
  <div>总有一天，我会改变世界</div>
</body>
<style>
    /* 选中input标签可用状态的元素 */
   input:enabled{
    background: red;
   }
   /* 选中input标签不可用状态的元素 */
   input:disabled{
    background: yellow;
   }
   /* 选中input标签获取焦点的元素 */
   input:focus{
    background: green;
   }
   input:checked{
    background: blue;
   }
   /* checked生效的条件，去掉默认样式，外观表现不生效(有个性) */
   input[type=checkbox]{
    /* 外观表现不生效 */
    appearance: none;
    /* 加样式 */
    width: 20px;
    height: 20px;
    border: 1px solid pink;
   }
   /* 匹配div中被用户选中的部分 */
   div::selection{
    background: red;
    color: aqua;
   }
</style>

否定伪类选择器

<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
</body>
<style>
    /* 否定伪类选择器，不选择第一个li */
    li:not(:first-child){
        background: red;
    }
</style>

动态伪类选择器

语法（style里面有顺序如下）

层级选择器

<body>
    <ul>
        <li>111</li>
        <li class="a">222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>
<style>
    /* 将a类后的第二个li标签进行选择 */
    .a+li+li{
        background: yellow;
    }
</style>

<body>
    <ul>
        <li>111</li>
        <li class="a">222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>
<style>
    /* 将a类后所有的li标签进行选择 */
    .a~li{
        background: yellow;
    }
</style>

注意：以上两种选择器生效于兄弟节点

属性选择器

<body>
    <input type="text"/>
</body>
<style>
    /* 属性选择器3种 */
    [type]{
        background-color: aquamarine;
    }
    /*完全匹配，如果类有2个值其中有一个值符合则不生效*/
    [class="text"]{
        height: 200px;
    }
    /*同上*/
    input[type="text"]{
        color: blue;
    }
    /* 类中有一个包含box1则生效 */
    div[class~=box1]{
        border: 1px solid blue;
    }
</style>

模糊匹配的属性选择器

class^="b"：查找以b开头的
class$="b"：查找以b结尾的
class*="b"：查找包含b的

<body>
   <div class="bcc"></div>
   <div class="cbc"></div>
   <div class="ccb"></div>
</body>
<style>
    /* 选择以b开头的 */
    div[class^="b"]{
        width: 20px;
        height: 20px;
        background: red;
    }
    /* 选择以b结尾的 */
    div[class$="b"]{
        width: 20px;
        height: 20px;
        background: green;
    }
    /* 选择包含b的 */
    div[class*="b"]{
        width: 20px;
        height: 20px;
        border: 1px solid blue;
    }
</style>

伪元素（行内元素）

<body>
    <div>i am a dog</div>
</body>
<style> 
   div::before{
    /* 在div的前面加为元素，内容如下 */
    content: "hello world";
   }
   div::after{
    content: "haha";
   }
</style>

<style> 
   div::before{
    /* 在div的前面加为元素，内容如下 */
    content: "hello world";
   }
   /* 不占宽高的伪元素 */
   div::after{
    content: "我是个大字";
    clear: both;
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;/* 设置内容的可见性为隐藏 */
   }
</style>

修改input中的placeholder默认颜色

<body>
    <input type="text" id="in" placeholder="搜索">
</body>
<style>
    #in::-webkit-input-placeholder{
        color: blue;
    }
    /* 将id为in的输入框内的placeholder颜色变蓝 */
</style>

注意：-webkit-表示兼容WebKit browsers（Chrome的内核）

CSS基本属性

文本属性

word-spacling：词间距

color：字体颜色

text-transform: capitalize;

text-overflow：ellipsis；（溢出并隐藏后的文本用…显示）

text-shadow: 水平方向位移垂直方向位移模糊程度阴影颜色;（文本阴影——单）

text-shadow: 水平方向位移垂直方向位移模糊程度阴影颜色，水平方向位移垂直方向位移模糊程度阴影颜色;（文本阴影——多）

注意：多阴影之间的多个阴影用，隔开

color属性写法

直接写英文字母
rgb形式写灰度值，有4个参数，前3个为rgb灰度值，最后一个为透明度
#加6个16进制数，其中每2个16进制代表rgb的每个灰度值

text-transform属性值

capitalize： 每一个单词首字母转大写
uppercase：每一个字母均转大写

body>
    <p class="a">我是一段话</p>
</body>
<style>
   .a{/* 首行缩进2个汉字 */
    text-indent: 2em;
   }
</style>

<body>
    <p class="a">hello world</p>
</body>
<style>
   p{
    /* 每一个单词首字母大写，如果是uppercase表示每一个字母均转大写 */
    text-transform: capitalize;
   }
</style>

文本阴影案例

<body>
<div>只要学不死，就往死里学</div>
</body>
<style>
    div{
        text-shadow: 10px 10px 2px red,-10px -10px 2px yellow;
    }
</style>

列表属性

<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
    </ul>
</body>
<style>
    ul{
        list-style-type: disc;
    }
</style>

<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
    </ul>
</body>
<style>
    ul{
        /* 图片作为图标方式 */
        list-style-image: url(../HTML/timg.jpg);
    }
</style>

list-style-position

作用：将标记放到盒子的里面还是外面

<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
    </ul>
</body>
<style>
    li{
        border: 1px solid red;
        list-style-position: outside;/* 外面 */
    }
</style>

list-style合并属性

相当于把list-style-type,list-style-image,list-style-position合并在一起

<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
    </ul>
</body>
<style>
    li{
        border: 1px solid red;
        list-style:disc none inside;/* 里面 */
    }
</style>

背景属性

background-size——背景图片大小(复合属性——宽高）

background-clip——背景裁剪（控制背景元素显示区域）

<body>
    <div>我是一段话</div>
</body>
<style>
    div{
        /* 背景颜色红色，半透明 */
        background-color: rgba(255,0,0,0.5);
    }
</style>

background-repeat属性

注意：背景图片默认为平铺（当背景图片大小小于盒子大小时）

属性

repeat：默认x、y轴都平铺
repeat-x：只在x轴进行平铺
repeat-y：只在y轴进行平铺
no-repeat：不平铺

background-position属性

<body>
    <div>我是一段话</div>
</body>
<style>
    div{
        width: 300px;
        height: 300px;
        background-image: url(../HTML/图片.jpg);
        background-position: 20px 20px;/* 当然里面也可以写百分数,也可以写英文（left、center、right，top、center、bottom） */
        opacity: 0.6;/* 设置图片透明度 */
    }
</style>

背景图片大小

属性：background-size(复合属性——宽高）

cover：把背景图片（等比例）扩展至足够大，使背景图片完全覆盖整个区域，但可能会丢失图片部分

contion：会把图片（等比例）扩展，但会将图片完完整整显示在墙上

<body>
    <div>我是一段话</div>
</body>
<style>
    div{
        width: 300px;
        height: 300px;
        background-image: url(../HTML/图片.jpg);
        background-size: 300px 300px;/* 宽 高（当然也可以用百分数） */
    }
</style>

background-attachment属性

fixed：相对于浏览器窗口（屏幕）固定（不是页面）
scroll：相对于盒子固定（默认值）

background-clip属性

注意：内容区域并不一定为背景区域

属性值

border-box：背景从border区域向外裁剪（默认值）——此属性你将border边框改为虚线就可以清楚看到
padding-box：背景从padding区域向外裁剪
content-box：背景从content区域向外裁剪

背景复合属性

background属性

<body>
    <div>我是一段话</div>
</body>
<style>
    div{
        width: 300px;
        height: 300px;
        /*这里看不到图片，因为盒子大小不够*/
        background:yellow url(../HTML/图片.jpg) no-repeat center fixed;
    }
</style>

注意：会有覆盖现象

<style>
    div{
        width: 300px;
        height: 300px;
        background-color: yellow;
        background:url(../HTML/图片.jpg) no-repeat;/* 因为这里没写属性，会把上面的颜色属性覆盖，认为没有颜色 */
    }
</style>

设置内容可见性

visibility属性

语法：visibility: 属性值;

属性值

visible：定义元素内容可见（默认值）
hidden：定义元素内容不可见，但会占据原有位置
collapse：用在表格元素时会删除一行或一列，用在非表格元素上时和hidden效果一样
inherit：子元素的visibility属性从父元素继承

display：none；与visibility：hidden；区别

display：none；：不占位的隐藏（看不见，摸不着）
visibility：hidden；：占位置的隐藏（看不见，摸得着）

设置透明度

opacity属性

语法：opacity:0;

当其值为0时表示透明，值为1时表示不透明

<body>
    <div></div>
</body>
<style>
    div{
        width: 200px;
        height: 200px;
        background: blue;  
    }
    div:hover{
        opacity:0;
    }
</style>

光标属性

cursor属性

语法：cursor:属性值；

表示鼠标放在被cursor属性修饰的块内光标的显示结果

属性值

default：默认光标（通常是一个箭头）
auto：默认，浏览器设置的光标
crosshair：光标呈现为十字线
pointer：光标呈现为一只手
move：光标呈现表示某对象可移动的十字架型光标
text：光标指示可以对文本进行书写的I型光标
wait：光标指示程序正在忙（通常为一只表或一个沙漏）

filter图像滤镜属性

属性值

参数	呈现效果	使用方法	默认值	说明
none	默认值没效果	filter:none	none	没有效果
blur	设置图像模糊	filter:blur(px)	0	值越大图像越模糊
brightness	设置图像亮度	filter:brightness(%)	1	值可以超过100%，值越大越亮
contrast	设置图像对比度	filter:contrast(%)	1	值可以超过100%，值越大对比度越高
grayscale	设置图像为灰度图像	filter:grayscale(0-100%)	0	值不可超过100%，值越大图片越灰
hue-rotate	设置图像色相旋转	filter:hue-rotate(deg)	0	旋转角度与效果参照色相环
opacity	设置图像透明度	filter:opacity(0-100%)	1	值越小越透明
saturate	设置图像饱和度	filter:saturate(%)	1	值越大越饱和
sepia	设置图像为深褐色	filter:sepla(0-100%)	0	值越大图像越褐
initial	设置属性为默认值	filter:initial	initial	就是none的效果
inherit	属性从父元素继承	filter:inherit		效果是父元素的效果

为盒子设置模糊

<style>
    div{
        width: 100px;
        height: 100px;
        background: red;
        filter: blur(5px);
    }
</style>
<body>
    <div></div>
</body>

空余空间

white-space属性

属性值

normal：默认值，忽略空格回车等（文字在盒子一行显示一行满了换下一行）
nowrap：文本不会换行，不管盒子范围，文本会在同一行上继续显示，直到遇到<br/>为止
pre：预格式化文本，文本不会折行，若盒子长度不够文字在盒子外显示
pre-wrap：预格式化文本，会折行
pre-line：显示回车，不显示空格，会换行

<style>
    .white {
        width: 200px;
        height: 200px;
        background-color: yellow;
        white-space: pre-line;
    }
</style>
<body>
    <div class="white">
        <h3>
            这是一行文字这是一行文字
            这是一行文字这是一行文字
            这是一行文字这是一行文字
        </h3>
    </div>
</body>

文档流

含义：文档流是文档中可显示对象在排列时所占用的位置/空间

eg：块级元素自上而下摆放，内联元素从左到右摆放

标准流：如果完全遵循元素的默认摆放方式，那么就属于标准流

注意：标准流里面使用布局会有诸多限制，会导致许多页面效果无法实现

标准流限制如下

1.元素高矮不一的情况会以底边对齐

2.空格折叠现象

无论多少个空格、换行、tab、都会折叠为一个空格
如果我们想让元素之间没有空隙，那么代码必须紧密连接不能有空格

脱离文档流

使一个元素脱离文档流有三种方式

浮动
绝对定位
固定定位

浮动

浮动：增加一个浮层来放置内容

注意：

任何元素都可以浮动
所有的浮动都在同一层，页面中标准流一层，浮动一层
浮动后元素会脱离文档流，不占用空间
浮动只有左右浮动，没有上下浮动
脱离文档流后，元素相当于在页面增加了一个浮层来放置内容。此时可以理解为有两层页面，一层是底层原页面，一层是脱离文档流的上层页面，所以会出现折叠现象
浮动会让块级元素水平方向排布，如果容器空间宽度不够，那么会开第二行。
浮动的元素和不浮动的元素在一起，若浮动元素在上面因为浮动元素不占用空间，则不浮动的元素会把浮动元素空间占用，浮动元素把不浮动元素盖住，但是不浮动元素的文字不会被盖住；若浮动元素在下面而不浮动元素在上面，由于不浮动元素占据空间，那么就是正常的上下排列，不浮动元素在上，浮动元素在下。

<body>
    <div class="red">我是一段</div>
    <div class="green">我是二段</div>
    <div class="blue">我是三段</div>
</body>
<style>
    div{
        width: 300px;
        height: 300px;
    }
   .red{
    background: red;
    float: left;
   }
   .green{
    background: green;
    float: left;
   }
   .blue{
    height: 400px;
    background: blue;
   }
</style>

注意：蓝色的部分虽然被红色覆盖，但是文字依然看得见

浮动规则：见缝插针（多个浮动元素在一起的情况下——没有不浮动元素的情况）

<body>
    <div class="red">我是一段</div>
    <div class="green">我是二段</div>
    <div class="blue">我是三段</div>
</body>
<style>
   .red{
    width: 1000px;
    height: 900px;
    background: red;
    float: left;
   }
   .green{
    width: 800px;
    height: 800px;
    background: green;
    float: left;
   }
   .blue{
    width: 600px;
    height: 100px;
    background: blue;
    float: left;
   }
</style>

浮动规则案例

浮动副作用

如果父级元素没设置高度的话，浮动元素会造成父级元素高度塌陷（就是父元素高度直接没了）
后续元素会收到浮动元素影响，把浮动元素的位置占用

清浮动

含义：清除浮动元素盖住不浮动元素的效果

清除浮动方式

父元素设置高度
受影响的元素增加clear属性
overflow清除浮动
伪对象方式

清浮动属性

<body>
    <div class="red">我是一段</div>
    <div class="green">我是二段</div>
    <div class="blue">我是三段</div>
</body>
<style>
    div{
        width: 300px;
        height: 300px;
    }
   .red{
    background: red;
    float: left;
   }
   .green{
    width: 600px;
    background: green;
    clear:left;/* 清浮动 */
   }
   .blue{
    background: blue;
   }
</style>

overflow属性让浮动父元素计算高度

<body>
    <div class="contain">
        <div class="red">我是一段</div>
    </div>
    <div class="blue">我是三段</div>
</body>
<style>
    .contain{
        overflow: hidden;
    }
   .red{
    width: 300px;
    height: 300px;
    background: red;
    float: left;
   }
   .blue{
    width: 300px;
    height: 300px;
    background: blue;
   }
</style>

溢出属性

overflow属性值

visible：默认值，溢出内容会显示在元素之外
hidden：溢出内容隐藏
scroll：溢出内容以滚动方式显示，没有溢出也显示滚动条，只是不能用
auto：如果有溢出会添加滚动条，没有溢出则正常显示（没滚动条）
inherit：规定应该遵循父元素继承overflow属性

overflow属性分类

overflow-x：x轴溢出
overflow-y：y轴溢出
overflow：x，y轴均能溢出

<body>
<div class="box1"><img src="../HTML/图片.jpg"/></div>
</body>
<style>
   .box1{
    width:200px ;
    height: 200px;
    background: yellow;
    overflow-x: auto;
    overflow-y: hidden;
   }
</style>

定位

注意：

static默认按照文档流的顺序，从左到右，从上到下将网页填满（和行内与块级元素有关）
是否脱离文档流指是否占位置
除了static定位以及粘性定位之后的都可以设置属性（top、bottom、left、right）
粘性定位可以设置top、buttom属性，如果想要自己设置的区域左右粘贴，可以使用margin-left: auto属性-分布最右边，margin-right: auto-分布最左边，margin：0 auto-分布在中间
粘性定位不是脱离文档流的，其偏移位置为浏览器当前窗口
粘性定位和相对定位会保留自己原来的位置，绝对定位和固定定位都不会保留自己原来的位置
css中的坐标系是以从左到右为x轴正向，以从上到下为y轴正向
每次设置一次绝对定位或固定定位，那么就多一层
设置定位之后，相对定位和绝对定位他是相对于有定位的父级元素（不管绝对相对，有就行）进行位置调整，如果父级元素不存在则继续向上逐级寻找，直到顶层文档
相对定位是相对于自己的移动，会占用之前的位置，不会占用之后的位置

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
<style>
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background:red ;
    }
    .box2{
        background:blue ;
        position: relative;
        top: 100px;
        left: 100px;
    }
    .box3{
        background: yellow;
    }
</style>

粘性定位

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
<style>
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        height: 600px;
        background:red ;
    }
    .box2{
        background:blue ;
        position: sticky;
        top: 0px;
    }
    .box3{
        height: 800px;
        background: yellow;
    }
</style>

定位里的层级

如果两个兄弟块级元素定位到相同位置，那么后面定位的块会把前面定位的块盖住（后来居上），如果想要让之前的块级元素盖住后面定位的块级元素，那么需要设置层级，并且需要前面块级元素的层级大于后面块级元素的层级

层级属性

层级为10

z-index：10；

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<style>
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background:red ;
        position: relative;
        top: 10px;
        right: 10px;
        z-index: 10;/* 设置层级为10 */

    }
    .box2{
        background:blue ;
        position: relative;
        z-index: 1;
    }
</style>

注意：

层级可以设置为负值，值越大层级越大
两个兄弟块级元素下生效，父级元素不能盖住子级元素，如果想要父级元素盖住子级元素，那么不需要父级元素设置层级，子级元素设置层级为负数即可
绝对定位可以将行级元素直接转化为块级元素

绝对定位与浮动的区别

float：半脱离文档流，文字环绕效果实现
absolute：全脱离，不会实现文字环绕效果

宽高自适应

宽度自适应

width：auto；

width/height属性不写或者auto都为宽/高自适应（自适应窗口大小，不会出滚动条——窗口盒子大小不变）

自适应属性

min-height：最小高度
max-height：最大高度
min-width：最小宽度
max-width：最大宽度

min-height属性

min-height：500px；

如果被修饰的块没内容，那么他会占高度500px，有内容则高度大于500px

窗口自适应

定义：盒子根据窗口大小进行改变

/* 窗口自适应设定 */
html,body{height: 100%;}

注意：没有设置宽度是因为一个盒子默认占满整个宽度

<body>
    <div>i am a pig</div>
</body>
<style> 
    div{
        width: 100%;
        height: 100%;
        background:red;
    }
    /* 窗口自适应设定 */
    html,body{
        height: 100%;
    }
</style>

CSS里面以%为单位

一个元素如果有父级元素，那么该子类元素设置宽高的百分数，以及定位的百分数是以父级元素的宽高为参考对象
一个元素的位移变换（transform属性）等，不管有没有父级元素，都是以自身宽高为参照

cala函数

用途：用于动态计算长度值

注意：

运算符的前后都需要保留一个空格
任何长度都可以使用calc()函数进行计算
该函数支持“+”、“-”、“*”、“/”运算
该函数支持运算符优先级规则

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<style> 
    .box1{
        width: 200px;
        height: 100%;
        background:red;
        float: left;
    }
    .box2{
        /* calc函数使用场景 */
        width: calc(100% - 200px);
        height: 100%;
        background:rgb(16, 195, 64);
        float: left;
    }
    /* 窗口自适应设定 */
    html,body{
        height: 100%;
    }
</style>

盒子模型

盒子模型是CSS布局的基石，它规定了网页元素如何显示以及元素间的关系。CSS定义所有元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区。

边框

border属性（复合属性）

内部包含3种属性

线的宽度：border-width
线的样式：border-style
线的颜色：border-color

线的样式

solid：实线
double：双实线
dashed：虚线
dotted：点状线

<body>
   <div class="box1">
    我是个大神
   </div>
</body>
<style>
    .box1{
       width: 100px;
       height: 100px;
       background: yellow;
       border: 10px dashed transparent;/* 各个方向的边框均为此属性，透明边框 */
    }
</style>

注意：背景颜色也能蔓延到边框中，但是边框不在盒子（宽高）范围内

边框分类

border-top
border-bottom
border-left
border-right

内边距

padding：相对于自己的内部边距

<body>
   <div>
    我是个大神
   </div>
</body>
<style>
    div{
        width: 500px;
        height: 500px;
        background: yellow;
        padding: 20px;/* div盒子内部各个方向内边距20px */
    }
</style>

内边距分类

padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距

padding：复合内边距

1个值，4个方向一样
2个值，上下，左右
3个值，上，左右，下
4个值，上，右，下，左

外边距

margin：相对于自己的外部边距

<body>
<div class="box1">我是一个方块</div>
<div class="box2">我也是一个方块</div>
</body>
<style>
    div{
        width: 100px;
        height: 100px;
    }
    .box1{
      background: red;
      margin: 10px;/* box的四周外边距均为10px */
    }
    .box2{
      background: yellow;
    }
</style>

外边距分类

margin-left：左外边距
margin-right：右外边距
margin-top：上外边距
margin-bottom：下外边距

margin复合外边距

1个值，4个方向一样
2个值，上下，左右
3个值，上，左右，下
4个值，上，右，下，左

注意：

内边距不支持负数，但外边距支持负值
设置盒子屏幕水平居中：margin:0 auto;（前面的0代表距离上面的像素）

外边距的特性

两个盒子垂直外边距与水平外边距问题

垂直方向：外边距取最大值
水平方向：外边距会进行合并叠加

给子盒子加外边距

最终外边距作用在子盒子身上以父盒子为外，前提是设置边框，不设置边框的话那么就会外边距直接作用于父盒子身上

元素显示类型

块元素

独占一行，可以设置宽高，遵循盒子模型（内外边距，边框均可设置）

display：block；

display：list-item；

注意：p标签放文本可以，不能放块级元素

行内元素

多个行内元素处于同一行，不能设置宽高，左右内外边距，边框均可设置，上下内外边距设置无效

display：inline；

行内块元素

兼具行内元素和块级元素特征，支持盒子模型

display：inline-block；

隐藏属性

display：none；

盒子阴影

box-shadow属性（复合属性）

属性值

<body>
<div>只要学不死，就往死里学</div>
</body>
<style>
   div{
    width: 100px;
    height: 100px;
    background: yellow;
    margin: 0 auto;
    box-shadow: 10px 10px 10px 10px red,-10px -10px 10px blue inset;
   }
</style>

注意：如果不加insert属性，那么默认是外阴影，加了insert属性就变内阴影,内外阴影如下

圆角边框

border-radius属性（复合属性）

border-radius：圆角效果；

注意：圆角效果的大小等于从矩形的顶点开始向两边延申的距离，到达指定距离的两个点之间用来形成圆角

属性值

一个值：四个角一样
二个值：左上右下，左下右上
三个值：左上，左下右上，右下
四个值：左上，右上，右下，左下

<body>
<div></div>
</body>
<style>
   div{
    width: 200px;
    height: 200px;
    background: yellow;
    margin: 0 auto;
    /* 设置左下角为圆角 */
    border-bottom-left-radius: 10px;
   }
</style>

border-radius：水平距离/竖直距离；

注意：这里的圆角效果的大小等于从矩形的顶点向水平延申的距离，以及竖直延申的距离，之后到达指定距离的两个点之间用来形成圆角，并且，这种写法只支持border-radius属性

用来自定义多个角的话写法如下

<body>
<div></div>
</body>
<style>
   div{
    width: 200px;
    height: 200px;
    background: yellow;
    margin: 0 auto;
    border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;
   }
</style>

两边值的个数对于值的分配遵循以下原则

一个值：四个角一样
二个值：左上右下，左下右上
三个值：左上，左下右上，右下
四个值：左上，右上，右下，左下

怪异盒模型

含义：更改原盒子模型的计算方式通过box-sizing属性的取值进行更改

属性：box-sizing——默认值是content-box（标准盒子模型）

该属性允许您以特定的方式定义匹配某个区域的特定元素

这是由CSS2.1规定的高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框

标准盒模型

属性值：content-box

怪异盒子模型·

属性值：border-box

为元素设定的宽度和高度决定了元素的边框盒子

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过已设定的宽度和高度分别减去边框和内边距才得到内容的宽度和高度

理解属性值

border-box：盒子宽高以盒子大小为中心
content-box：盒子宽高以内容为中心

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<style>
    /* 怪异盒子模型 */
    .box1{
        width: 200px;
        height: 200px;
        background: green;
        padding: 30px;
        border: 10 solid black;
        box-sizing: border-box;
    }
    /* 普通盒子模型 */
    .box2{
        width: 200px;
        height: 200px;
        background: red;
        margin-top: 100px;
        padding: 30px;
        border: 10 solid black;
        box-sizing: content-box;
    }
</style>

弹性盒子

display：flex；

功能：

1.默认（说明可以改）让子元素（包括块级）横向排列

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
<style>
    .box1{
        width: 200px;
        height: 200px;
        background: green;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: red;
    }
    /*设置弹性盒子*/
    .box{
        display: flex;
    }
</style>

2.子元素是行内元素则直接转化为块级元素

<body>
    <div class="box">
        <span class="box1">毁灭吧！</span>
        <span class="box2">颤抖吧！</span>
    </div>
</body>
<style>
    .box1{
        width: 200px;
        height: 200px;
        background: green;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: red;
    }
    /* 设置弹性盒子 */
    .box{
        display: flex;
    }
</style>

3.设置一个元素相对于父盒子的水平垂直居中——margin: auto;

<body>
    <div class="box">
        <span class="box1">毁灭吧！</span>
    </div>
</body>
<style>
    .box1{
        width: 200px;
        height: 200px;
        background: green;
        /* 只有1个元素的时候设置此元素水平垂直居中 */
        margin: auto;
    }
    /* 设置弹性盒子 */
    .box{
        width: 600px;
        height: 600px;
        border: 1px solid black;
        display: flex;
    }
</style>

设置弹性盒子垂直排列方式

属性：flex-direction

属性值

row：正向横向排列（默认）
row-reverse：反向横向排列
column：正向垂直排列
column-reverse：反向垂直排列

理解：确定谁为主轴

<body>
    <div class="box">
        <span class="box1">毁灭吧！</span>
        <span class="box2">颤抖吧！</span>
    </div>
</body>
<style>
    .box1{
        width: 200px;
        height: 200px;
        background: green;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: red;
    }
    /* 设置弹性盒子 */
    .box{
        width: 600px;
        height: 600px;
        border: 1px solid black;
        display: flex;
        /* 设置垂直拍列方式 */
        flex-direction: column;
    }
</style>

主轴对齐方式

属性名：justify-content

属性值

flex-start：左对齐
center：居中对齐
flex-end：右对齐
space-between：两端对齐
space-around：距离环绕（两端流出空隙为npx，每个块之间流出空隙为2npx）

<body>
    <div class="box">
        <span class="box1">毁灭吧！</span>
        <span class="box2">颤抖吧！</span>
    </div>
</body>
<style>
    .box1{
        width: 200px;
        height: 200px;
        background: green;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: red;
    }
    /* 设置弹性盒子 */
    .box{
        width: 600px;
        height: 600px;
        border: 1px solid black;
        display: flex;
        /* 调整主轴对齐方式——居中 */
        justify-content: center;
    }
</style>

调整侧轴排列

属性名：aline-items

属性值

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

注意：在主轴上排列始终会在主轴排列，不会换行，不管块总宽度是否大于盒子宽度，如果大于则块宽度会被挤压变小，在这里的侧轴（为y轴的情况）排列更好的理解为从上到下的垂直排列方式

调整是否挤压元素宽度

属性：flex-shrink

属性值

0：禁止挤压
1：允许挤压

注意

该属性应该用在项目身上表示该项目是否允许被挤压
如果不允许被挤压，那么多个项目长于主轴时依然不会换行，只会溢出主轴外，此时中间若有允许被挤压的项目，那么该项目直接会被挤压消失

折行

折行属性：flex-wrap

作用：如果主轴显示不下就会直接折行，但是会行与行之间进行等间距排列

注意：如果折行后多个项目总高度大于盒子高度，则会直接溢出

属性值

wrap：折行
nowrap：不折行

<body>
    <div class="box">
        <span class="box1">毁灭吧！</span>
        <span class="box2">颤抖吧！</span>
        <span class="box2">恐惧吧！</span>
        <span class="box2">颤栗吧！</span>
    </div>
</body>
<style>
    span{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    /* 设置弹性盒子 */
    .box{
        width: 600px;
        height: 600px;
        border: 1px solid black;
        display: flex;
        /* 调整主轴对齐方式——居中 */
        justify-content: center;
        /* 主轴显示不下会折行 */
        flex-wrap: wrap;
    }
</style>

调整折行之后的行间距

属性名：align-content

属性值

flex-start：左对齐
center：居中对齐
flex-end：右对齐
space-between：两端对齐
space-around：距离环绕

项目对齐方式

理解：设置弹性盒子的盒子为容器，容器里面的块级元素被称为项目，这是为弹性盒子每个项目设置的属性，这里的项目对齐方式可以脱离主轴的控制，在与主轴的垂直方向上进行特定排序

注意：可以脱离折行控制

属性名：align-self

属性值

flex-start：左对齐
center：居中对齐
flex-end：右对齐
baseline：和flex-start类似
stretch：拉伸，如果该项目盒子不设置高度那么该项目会默认占满弹性盒子高度（弹性盒子设置高度）的高度——这是相对横向为主轴来说，纵向为主轴，该项目会默认占满弹性盒子宽度

<body>
    <div class="box">
        <div class="box1">毁灭吧！</div>
        <div class="box2">颤抖吧！</div>
    </div>
</body>
<style>
    .box1{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        align-self: center;
    }
    .box2{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    /* 设置弹性盒子 */
    .box{
        width: 600px;
        height: 600px;
        border: 1px solid black;
        display: flex;
        /* 调整主轴对齐方式——居中 */
        justify-content: center;
    }
</style>

项目调整顺序

order：0；

注意：order值默认为0，order值越大，顺序越靠后，如果多个order值一样，那么就按正常顺序排列（order可以为负数）。

剩余宽高

flex：1；

给项目加上此属性意思为占满剩余空间，如果多个项目flex属性相同，那么就会出现空间均分的情况，如果不同，则按比例换算自己占总的几份空间就占总的几份

网格布局

含义：将网页划分成一个个网格，可以任意组合成不同的网络，做出各种各样的布局

flex与grid布局

flex布局是轴线布局，只能指定而且根据轴线位置，可以看作是一维布局
grid布局是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局

容器和项目

容器：一个案例中最大的盒子，可以理解成父元素

项目：一个案例中，最大盒子里面的内容，可以理解成子元素

行和列：容器里面水平区域称为行，垂直区域称为列

单元格：行和列交叉的区域

网格布局中的属性

含义：网格布局中的属性和flex中的布局类似，分成了两类，一类容器属性，一类项目属性

容器属性

触发网格布局

给父元素添加：display：grid；

display关于网格的取值分为两个，grid（块网格）和inline-grid（行内块网格）

grid==网格布局的容器为块级元素，该容器独占一行
inline-grid==网格布局容器为行内块元素

注意：给行内元素加display：grid；就可以将此容器变成块元素

行列划分

规定行属性：grid-template-row：n；

规定列属性：grid-template-column：n；

后面的取值数量代表多少行，多少列

属性值n的写法

绝对大小：npx

百分比：n%

注意：行或列百分比总和为100%

功能函数repeat（）

auto-fill关键字（功能填充）配合功能函数使用

fr关键字（列宽片段）

为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意味片段）如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

注意：以上5fr=表格列宽

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
<style>
    .box{
        width: 600px;
        height: 600px;
        background: rgb(159, 12, 12,0.7);
        display: grid;
        /* 划分为3行3列网格 */
        grid-template-rows: repeat(auto-fill,200px);
        grid-template-columns: 1fr 1fr 1fr;
    }
</style>

设置最小/最大值

grid-template-rows: minmax(100px,200px) 200px 300px;

minmax(100px,200px)：最小100px最高200px

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
<style>
    .box{
        width: 600px;
        height: 600px;
        background: rgb(159, 12, 12,0.7);
        display: grid;
        /* 划分为3行3列网格 */
        grid-template-rows: minmax(100px,200px) 200px 300px;
        grid-template-columns: repeat(3,200px);
    }
</style>

列间距（复合属性）

grid-gap：30px 30px；

第一个值表示行间距，第二个值表示列间距

指定区域

合并网格的时候使用“grid-area：网格名字；”进行合并

设置子元素区域名字

grid-area: 区域名字；

结果图

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <!-- <div>9</div> -->
    </div>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 646px;
        height: 646px;
        border: 5px solid green;
        display: grid;
        grid-template-rows: repeat(3,200px);
        grid-template-columns: 200px 200px 200px;
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        grid-template-areas:'a b c'
                            'd e e'
                            'g h i';
    }
    .box div{
        /* 单元格边框 */
        border: 1px solid red;
    }
    .box div:nth-child(1){
        /* 设置第一个div子元素名字为a */
        grid-area: e;
        border: 1px solid blue;
    }
</style>

注意：每个块占的位置只能是个矩形

网格布局对齐方式

grid-auto-flow属性

设置子盒子排列方式为纵向排列

grid-auto-flow: column;

属性值

row：横向排列，默认值
column：纵向排列

单元格项目对齐

单元格内容对齐

注意：单元格对齐方式默认为stretch，不加宽高才好用

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 600px;
        height: 600px;
        border: 5px solid green;
        display: grid;
        grid-template-rows: repeat(3,100px);
        grid-template-columns: repeat(3,100px);
        grid-auto-flow: column;       
        /* 调整主元素水平对齐 */
        justify-content:center;
        /* 调整主元素竖直对齐 */
        align-content: center;
        /* 调整子元素水平对齐 */
        justify-items: center;
        /* 调整子元素竖直对齐 */
        align-items: center;
    }
    .box div{
        /* 单元格边框 */
        border: 1px solid red;
        width: 50px;
        height: 50px;
    }
</style>

网格布局项目属性

网格线合并

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 600px;
        height: 600px;
        border: 5px solid green;
        display: grid;
        grid-template-rows: repeat(3,200px);
        grid-template-columns: repeat(3,200px);
    }
    .box div{
        /* 单元格边框 */
        border: 1px solid red;
    }
    .box div:nth-child(1){
        /* 起始列网格线是1 */
        grid-column-start: 1;
        /* 结束列网格线是3 */
        grid-column-end: 3;
        /* 起始行网格线是1 */
        grid-row-start: 1;
        /* 结束行网格线是3 */
        grid-row-end: 3;
        /* 因此1占2行共4个单元格 */
    }
</style>

    .box div:nth-child(1){
        /* 简写方式 */
        grid-column: 1/3;
        grid-row: 1/3;
        /* 因此1占2行共4个单元格 */
    }

    .box div:nth-child(1){
        /* 简写方式 */
        grid-column: 2/4;
        grid-row: 2/4;
        /* 通过网格线改变块的位置与大小 */
    }

移动端

模拟器上显示的分辨率

CSS像素：设备的独立像素
物理分辨率：设备的像素

设备像素比（dpr）=物理像素/CSS像素

移动端布局

布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。

视觉视口：视觉视口是指用户正在看到网页的区域，这个区域的宽度等同于移动设备浏览器窗口的宽度。

理想视口：理想窗口是指对设备来讲最理想的视口尺寸，采用理想视觉窗口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

width=device-width：宽度为设备宽度
initial-scale=1.0：设备初始值，1.0表示不缩放
user-scalable=no：用户不允许双击和捏放

设置滚动条隐藏（全局生效）

    /* 定制滚动条消失 */
    ::-webkit-scrollbar{
        display: none;
    }

多列布局（瀑布流）

属性

column-count：规定元素被分割的列数

column-gap：规定列之间的间隔大小

column-rule：调整列边框（复合属性）

column-fill：设置或检索对象所有列的高度是否统一

auto：列高度自适应内容
balance：所有列的高度以其中最高的一列统一

column-width：设置或检索对象每列的宽度

column-span：该元素是否横跨父级元素所有列

none：不跨列
all：横跨所有列

break-inside：是否允许该盒子内部折行

auto：允许
avoid：不允许

<body>
    <div>
        <h1 class="a">hello world</h1>
        <h1>hello world</h1>
        <h1>hello world</h1>
        <h1>hello world</h1>
        <h1>hello world</h1>
    </div>
</body>
<style>
    div{
        height: 300px;
        background: pink;
        /* div内容显示5列 */
        column-count: 5;
        /* 调整列间距 */
        column-gap: 50px;
        /* 调整列边框 */
        column-rule: 2px solid red;
        /* 列高度统一属性,会先占满列高度,可能达不到5列 */
        column-fill:auto;
        /*调整列宽 */
        column-width: 100px;
    }
    .a{
        /* 横跨所有的列 */
        column-span: all;
        text-align:center;
    }
    h1{
        /* 不允许盒子内部进行折行 */
        break-inside: avoid;
    }
</style>

响应式布局

定义：按照屏幕的大小进行动态的响应，快速的反应，快速的处理让每个屏幕都能在这套网页中很好的展示，这就叫响应式布局

常见的布局方式

固定布局：以像素作为页面的基本单位，不管设备屏幕以及浏览器宽度，只设计一套尺寸

可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同的宽度布局。通过识别的屏幕尺寸以及浏览器宽度，选择最合适的那套宽度布局

弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕以及浏览器宽度，并能完美的利用有效空间展现最佳效果

混合布局：同弹性布局类似，可适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面的基本单位

布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有2种方式

PC优先：从PC端开始向下设计
移动优先：从移动端向上设计

无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称为布局断点）

响应式布局设计原则

模块内容挤压拉伸——布局不变
模块中内容换行平铺——布局不变
模块中内容删减增加——布局不变
模块位置改变——布局改变
模块展示方式改变：隐藏-展开——布局改变

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设置CSS样式，媒体查询由媒体类型和一个或者多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height、color等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备制定显示效果。

媒体查询操作方式

对设备提出询问（表达书）开始，如果表达式为真，媒体查询中的CSS被应用，若为假则忽略

媒体查询结构

    @media all and(min-width:320px){
        body{
            background: red;
        }
    }

理解：对于所有的媒体，若宽度>=320px则使用如下样式

设备类型（默认为all）

注意：

and被称为关键字，其他关键字还包括not（排除某种设备），only（仅限某种设备）
（min-width：400px）就是媒体特性，其被放置在一对圆括号中

常用媒体查询

PC端或大屏幕设备

@media only screen and (min-width:1029px){}

orientation属性

portration：竖屏
landscape：横屏

竖屏时执行后面操作

@media screen and (orientation:portrait) and (max-width:720px){}

横屏时执行后面操作

@media screen and (orientation:landscape){}

注意：当宽度比高度大的时候浏览器认为是横屏，否则为竖屏

通用断点

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    /* width>1000px */
    @media screen and (min-width:1000px) {
        body{
            background: blue;
        }
    }
    /* width<500 */
    @media screen and (max-width:500px) {
        body{
            background: red;
        }
    }
    /* 500px<width<1000px */
    @media screen and (max-width:1000px) and (min-width:500px) {
        body{
            background: green;
        }
    }
</style>

字体引入

字体模块：@font-face

语法规则

@font-face{

font-family:<YourWebFontName>;

src:<source>[<format>][,<soure>[format>]]*;

[font-weight:<weight>];

[font-style:<style>];

}

font-family：自定义字体名字
src：字体文件路径
font-weight：字体加粗
font-style：字体样式改变

<body>
    <div>赵钱孙礼</div>
</body>
<style>
    @font-face {
        font-family: hello;
        src: url("字体样式路径");
    }
    div{
        font-family: hello;
        font-size: 50px;
    }
</style>

rem布局开发

目的：解决移动端等比例缩放问题

px、em、rem单位

px：像素单位
em：相对于父元素字体大小的单位，如父元素字体大小为16px则1em=16px
rem：相对于根元素（html）的字体大小

<body>
    <div class="div1">
        <p>div1</p>
    </div>
    <div class="div2">
        <p>div2</p>
    </div>
</body>
<style>
    html{
        font-size: 32px;
    }
    .div1,.div2{
        border: 1px solid red;
        font-size: 16px;
    }
    .div1 p{
        font-size: 1rem;
    }
    .div2 p{
        font-size: 2em;
    }
</style>

基于375px宽度设计的网页在不同宽度客户端等比例缩放问题

<body>
    <div class="box">
        hello
    </div>
</body>
<style>
    .box{
        width: 3.75rem;
        height: 100px;
        background: red;
    }
</style>
<script>
/* html标签的fontSize随着clientWidth动态改变 */
document.documentElement.style.fontSize=document.documentElement.clientWidth/375 * 100 +'px'
</script>

vh与vm单位

vh：view-height，100vh等于视口的高度
vw：view-width，100vw等于视口的宽度

注意：

不同终端的视口不同，vh与vw也不同
没有滚动条时100vw等于100%，如果有滚动条时100vw包含滚动条其为窗口大小，而100%为刨除滚动条后的窗口大小

精灵图

功能：将导航背景图片，按钮背景图片等有规则的合成一张背景图，即多张图片合为一整图，然后用background-position来实现背景图片的定位技术

图片整合的优势

通过图片整合来减少对服务器的请求次数，从而提高加载速度
通过整合图片来减少图片体积

两栏布局与三栏布局

两栏布局：左边固定，右边块自适应

三栏布局：两边固定，中间块自适应

2种3栏布局方法

第一种

<body>
    <div class="left"></div>
    <div class="right"></div><!-- 在不浮动块的前面 -->
    <div class="center"></div><!--因为其是块级元素独占一行-->
</body>
<style> 
    .left,.right{
        width: 200px;
        height: 100%;
    }
    .left{
        background: red;
        float: left;
    }
    .right{
        background: blue;
        float: right;
    }
    .center{
        height: 100%;
        background: pink;
        margin-left: 200px;
        margin-right: 200px;
    }
    /* 窗口自适应设定 */
    html,body{
        height: 100%;
    }
</style>

第二种

<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>
<style> 
    .left,.right{
        width: 200px;
        height: 100%;
    }
    .left{
        background: red;
        float: left;
    }
    .right{
        background: blue;
        float: right;
    }
    .center{
        width: calc(100% - 400px);
        height: 100%;
        background: pink;
        float: left;
    }
    /* 窗口自适应设定 */
    html,body{
        height: 100%;
    }
</style>

CSS渐变

定义：用CSS方式实现的一个颜色到另一个颜色之间的平稳的过渡

线性渐变

background: linear-gradient(direction,color1,color2);

direction属性

to bottom：从上向下渐变（默认）
to top：从下向上渐变
to left：从右向左渐变
to right：从左向右渐变

direction也支持角度渐变

background: linear-gradient(90deg,red,blue);

理解：red在下面，blue在上面，随着度数的增加顺时针旋转

注意：颜色可以写多个值，支持多颜色渐变，颜色后面也可以加百分比来控制渐变

<body>
    <div class="box">
        hello world
    </div>
</body>
<style>
    html,body{
        width: 100%;
        height: 100%;
    }
    div{
        height: 100%;
        background: linear-gradient(to top left,red,blue);
    }
</style>

径向渐变

径向渐变不同于线性渐变，线性渐变是从一个方向向另一个方向的渐变，而径向渐变是从一个点向四周的渐变

background: radial-gradient(center,shape,size,color1,color2);

center：渐变起点位置

shape：渐变的形状

ellipse：椭圆形（默认）
circle：圆形

size：渐变的大小，即渐变到哪里停止

closest-side：最近边
farthest-side：最远边
closest-corner：最近角
farthest-corner：最远角

控制渐变

background: radial-gradient(red 5%,green 20%,blue 30%);

理解：5%的前面全为红色，之后红色从5%时就开始渐变直到20%变为绿色，绿色从20%开始渐变直到30%变为蓝色，之后不需要渐变剩下区域全为蓝色

注意：

颜色可以写多个
color1为最内侧颜色，之后的颜色逐渐往外侧延申

center属性改变渐变起点

background: -webkit-radial-gradient(20% 40%,red,green,blue);

-webkit-radial-gradient解决浏览器兼容问题，从浏览器内核的角度支持一下此属性的设置

渐变起点：

20%：从左向右为x轴的20%
40%：从上到下为y轴的40%

重复渐变

重复线性渐变

background: repeating-linear-gradient(red 5%,green 20%,blue 30%);

理解：5%的前面承接100%后面，之后红色从5%时就开始渐变直到20%变为绿色，绿色从20%开始渐变直到30%变为蓝色，之后又开始重复上述过程，直到到达100%

重复径向渐变

background: repeating-radial-gradient(red 5%,green 20%,blue 30%);

过渡

含义：CSS3的transition允许CSS的属性值在一定时间区间内平滑的过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS属性值

transition属性（复合属性）

transition: all 5s 3s linear;

属性值

all：单一属性-transition-property：检索或设置对象中参与过渡的属性（all表示所有属性均变）
5s：单一属性-transition-duration：检索或设置对象过渡的持续时间
3s：单一属性-transition-dely：检索或设置对象延迟过渡的时间（什么时候开始过渡）
linear：单一属性-transition-timing-function：检索或设置对象中过渡的动画类型

简写：transition：all/具体属性值运动时间s/ms 延迟时间s/ms 动画类型

注意：单一属性transition-property写属性值可以写多个，中间用空格隔开

<body>
    <div class="box"></div>
</body>
<style>
    div{
        width: 200px;
        height: 200px;
        background: red;
        transition: all 5s 3s linear;
    }
    div:hover{
        width: 600px;
        height: 600px;
    }
</style>

transition-timing-function属性值

逐帧动画

steps(n)：动画执行的步数——8步

transition: all 5s 1s steps(8);

贝塞尔曲线

transition: all 5s 1s cubic-bezier(值1，值2，值3，值4)；

其可以自定义变速动画

transform（）属性（复合属性）

属性值translate（值1，值2）

含义：将元素向指定方向移动

水平移动：向右移动translate（npx，0）向左移动translate（-npx，0）
垂直移动：向上移动translate（0，-npx）向下移动translate（0，npx）
双角移动：右下角移动translate（npx，npx），右上角移动translate（npx，-npx），左上角移动translate（-npx，-npx），左下角移动translate（-npx，npx）

translateX（npx）：水平方向移动一个对象，对象只在x轴上进行移动npx，若内部为正值，则对象右移，反之左移

translateY（npx）：竖直方向移动一个对象，对象只在y轴上进行移动npx，若内部为正值，则对象下移，反之上移

属性值scale（）

含义：让元素根据中心圆点进行缩放，默认值为1.因此0.01-0.99之间任何值是一个元素缩小，任何大于1的值使元素显得更大

该函数可以接受1个值也可以接受2个值，若只有一个值时，其第二个值默认与第一个值相等

scaleX(n)：元素在水平方向上缩放元素
scaleY(n)：元素在竖直方向上缩放元素
scale(n)：元素在整个平面上缩放元素

注意：该放大为中心点放大，里面的值为负数时会出现倒像

<body>
    <div></div>
</body>
<style>
    div{
        width: 200px;
        height: 200px;
        background: blue;
        border: 1px solid red;
        transition: all 2s;
        margin: 0 auto;
    }
    div:hover{
        /* xy轴放大1.5倍 */
        transform: scale(1.5);
    }
</style>

改变中心点位置为左上角（默认值为center）

transform-origin: left top;

旋转

rotate()属性

rotate(n)方法：通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对于原点中心顺时针旋转；若为负，则逆时针旋转。

rotateX(n)方法，元素围绕其x轴以给定的度数进行旋转，它主要在三维空间内进行操作

rotateY(n)方法，元素围绕其y轴以给定的度数进行旋转，它主要在三维空间内进行操作

注意rotate(n)等价于rotateZ(n)

多属性值的使用

1.位移与缩放

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<style>
    .box{
        width: 600px;
        height: 600px;
        border: 2px solid gray;
    }
    .box div{
        width: 200px;
        height: 200px;
        background: red;
        border: 1px solid black;
    }
    .box div:nth-child(1){
        transform: translateX(400px);
    }
    .box div:nth-child(2){
        transform: translateX(400px) scale(0.5);
    }
    .box div:nth-child(3){
        transform: scale(0.5) translateX(400px);
    }
    /* 2，3产生不同情况的原因，盒子缩放时位移的距离也跟着缩放，进而导致结果不同 */
</style>

2.位移与旋转

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<style>
    .box{
        width: 600px;
        height: 600px;
        border: 2px solid gray;
    }
    .box div{
        width: 100px;
        height: 100px;
        background: red;
        border: 1px solid black;
    }
    .box div:nth-child(1){
        transform: translateX(400px);
    }
    .box div:nth-child(2){
        transform: translateX(400px) rotate(45deg);
    }
    .box div:nth-child(3){
        transform: rotate(45deg) translateX(400px);
    }
    /* 2，3产生不同情况的原因，盒子旋转时导致坐标轴旋转，进而位置不同 */
</style>

注意：transform内可以写多个属性，但是掌握好先后顺序，不可以在一个块中写多个transform，因为会出现覆盖导致生效的只有最后一个

倾斜的

属性：skew()

该函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕x轴和y轴按照一定的角度倾斜

一个参数：表示水平方向倾斜的角度
二个参数：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

<body>
    <div>hello</div>
</body>
<style>
    div{
        width: 200px;
        height: 200px;
        background: red;
        line-height: 200px;
        text-align: center;
        border: 1px solid black;
        font-size: 50px;
        margin: 0 auto;
        transform: skewX(30deg);
        /* 正值表示抓着右下角往右拉动，直至把上面的角拉的多出对应度数
           负值表示抓着左下角往左拉动，直至把上面的角拉的多出对应度数*/
    }

<body>
    <div>hello</div>
</body>
<style>
    div{
        width: 200px;
        height: 200px;
        background: red;
        line-height: 200px;
        text-align: center;
        border: 1px solid black;
        font-size: 50px;
        margin: 0 auto;
        transform: skew(30deg,30deg);
        /* 抓着右下角往右下分别拉动 */
    }
</style>

关键帧动画

animation与transition的区别

相同点：都是随着时间改变元素的属性值

不同点：transition需要触发一个事件（hover事件或click事件）才会随着时间改变CSS属性；而animation在不需要触发任何事件的情况下也可以显示的随着时间的变化来改变元素的属性值从而达到一个动画的效果，css3的animation就需要明确的动画属性值

animation: ppt2 2s linear 1s 10 alternate;

animation属性

动画持续时间

animation-duration: 2s;

动画延迟时间

animation-delay: 5s;

动画过渡类型

animation-timing-function: linear;

动画循环次数

animation-iteration-count: infinite;

数字：代表循环一定次数
infinite：代表循环无限次

动画在循环中运行方向

animation-direction: alternate;

alternate：正常方向交替运行
alternate-reverse：反方向交替运行
normal：默认正常状态，不支持反向
reverse：从结果开始反向运动

动画运行状态

animation-play-state: running;

running：运行中，默认
paused：暂停

<body>
    <div></div>
</body>
<style>
    div{
        width: 200px;
        height: 200px;
        background: red;  
        animation: ppt2 2s linear 1s 10 alternate-reverse;
    }
/* 声明动画第一种写法 */
@keyframes ppt1 {
    from{
        width: 200px;
        height: 200px;
        background: red;
    }
    to{
        width: 400px;
        height: 600px;
        background: blue;
    }
}
/* 第二种写法，可以支持多种状态 */
@keyframes ppt2 {
    0%{
        width: 200px;
        height: 200px;
        background: red;
    }
    50%{
        width: 400px;
        height: 600px;
        background: blue;
    }
    100%{
        width: 800px;
        height: 800px;
        background: pink;
    }
}
</style>

动画填充模式

animation-fill-mode: forwards;

属性值

none：默认值，没有动画填充
forwards：保留最后一帧状态
backwards：保留第一帧的初始状态

注意：动画填充模式不是无限循环时使用

关键帧动画

animation: run 3s steps(1,start);

这里的1表示从第一帧到第二帧只需要1步，没有多余过渡

end（保留当前帧，看不到最后一帧，动画结束看不见）
start(保留下一帧，看不到第一帧，从第一帧很快跳到下一帧) 因为从第一帧开始

注意：

step-start等于steps(1,start);
step-end等于steps(1,end);

3D

transform-style: preserve-3d;

属性值

flat：2D舞台（默认）
preserve-3d：3D舞台

3D位移

transform:translateZ(100px);

transform: translate3d(0,0,100px);

3个参数分别为x，y，z轴移动

设置景深

perspective:900px;

设置景深——视觉感受：近大远小,上面的意思是对象距离我们900px

向z轴移动100px

<body>
<div class="box">
    <div class="center">
    </div>
</div>
</body>
<style>
    .box{
        width: 500px;
        height: 500px;
        border: 5px solid black;
        transform-style: preserve-3d;
        position: relative;
        margin: 0 auto;
        perspective:900px;
    }
    .center{
        position: absolute;
        width: 200px;
        height: 200px;
        background: red;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        transform: translate3d(0,0,700px);
    }
</style>

注意：z轴上物体离我们越来越近，视觉感受就是物体越来越大

3D旋转

rotateX()：以x轴旋转对应角度
rotateY()：以y轴旋转对应角度
rotateZ()：以z轴旋转对应角度
rotate3d()：以x，y，z轴旋转对应角度

transform: rotate3d(1,0,0,90deg);

注意：前面3个值为0/1分别对应x，y，z轴，后面跟个角度，代表每个轴旋转多少度

<body>
    <div class="box">
        <div class="center">
        </div>
    </div>
</body>
<style>
    .box{
        width: 500px;
        height: 500px;
        border: 5px solid gray;
        display: flex;
        transform-style:preserve-3d ;
        transition: all 2s linear;
        background: pink;
    }
    .center{
        margin: auto;
        width: 200px;
        height: 200px;
        background: red;
        transition: all 2s linear;
    }
    div .center:hover{
        transform: rotate3d(1,0,0,90deg);
    }
    div:hover{
        transform: rotateY(90deg);
    }
</style>

3D缩放

scaleZ()：沿着z轴进行缩放
scale3d()： 沿着x，y，z轴放大对应倍数

transform: scale3d(1,1,10)；

里面有3个值分别对应x，y，z轴放大对应的倍数

<body>
    <div class="box">
        <div class="center">
        </div>
    </div>
</body>
<style>
    .box{
        width: 500px;
        height: 500px;
        border: 5px solid gray;
        display: flex;
        transform-style:preserve-3d ;
        perspective: 900px;
    }
    .center{
        margin: auto;
        width: 200px;
        height: 200px;
        background: red;
        transition: all 2s linear;
    }
    div .center:hover{
        transform: scale3d(1,1,10) rotateX(90deg);
    }
</style>

小白菜00

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
CSS总结

目录CSS概念理解CSS构成注意：CSS里面的注释CSS目的CSS分类属性相同时CSS优先级CSS选择器选择器优先级外部CSS外部CSS创建引入方式1引入外部样式表（放在哪里都可以）外部CSS创建引入方式2案例link和import之间的区别行内CSS内部CSS选择器标签名选择器类选择器id选择器注意：通配符选择器分组选择器包含选择武器伪类选择器结构性伪类选择器目标伪类选择器UI元素状态伪类选择器否定伪类选择器动态伪类选择器层级选择器属性选择器模糊匹配的属性选择器伪元素（行内元素）CSS基本属性文本属性
复制链接

扫一扫

专栏目录