资讯详情

CSS总结

CSS概念

理解

CSS构成

注意：

CSS里面的注释

CSS目的

CSS分类

属性相同时CSS优先级

CSS选择器

选择器优先级

外部CSS

外部CSS创建介绍方法1

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

外部CSS创建介绍方法2

案例

link和import之间的区别

行内CSS

内部CSS

内部CSS与外部CSS

选择器

标签名选择器-toc" style="margin-left:40px;">标签选择器

类选择器

交集选择器

格式：

案例：

id选择器

注意：

通配符选择器

分组选择器

包括武器的选择

伪类选择器

结构性伪类选择器

目标伪类选择器

UI假元素状态选择器

否定伪类选择器

动态伪类选择器

层级选择器

属性选择器

模糊匹配的属性选择器

伪元素(行内元素)

CSS基本属性

文本属性

color属性写法

text-transform属性值

阴影案例的文本

列表属性

list-style-position

list-style合并属性/p>

背景属性

background-repeat属性

background-position属性 

背景图片大小

background-attachment属性

background-clip属性 

背景复合属性

设置内容可见性 

visibility属性

设置透明度

opacity属性

光标属性 

cursor属性

空余空间

属性值

文档流

标准流限制如下

脱离文档流

浮动

注意：

浮动规则案例

浮动副作用

清浮动

清除浮动方式

清浮动属性 

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

溢出属性 

overflow属性值

overflow属性分类

定位

注意：

粘性定位

定位里的层级

层级属性

注意：

绝对定位与浮动的区别

宽高自适应

宽度自适应

自适应属性

min-height属性

窗口自适应

CSS里面以%为单位

cala函数

注意：

盒子模型

边框

border属性（复合属性）

边框分类

内边距

内边距分类

padding：复合内边距

外边距

外边距分类

margin复合外边距

注意：

外边距的特性

元素显示类型

块元素

行内元素

行内块元素

盒子阴影

属性值

圆角边框

属性值

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

怪异盒模型

标准盒模型

怪异盒子模型·

理解属性值

弹性盒子

功能：

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

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

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

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

主轴对齐方式

属性值

调整侧轴排列

属性值

调整是否挤压元素宽度

属性值

折行

属性值

调整折行之后的行间距

属性值

项目对齐方式

属性值

项目调整顺序

剩余宽高

网格布局

flex与grid布局

容器和项目

网格布局中的属性

容器属性

触发网格布局

行列划分

属性值n的写法

列间距（复合属性）

指定区域

网格布局对齐方式

grid-auto-flow属性

属性值

单元格项目对齐

单元格内容对齐

网格布局项目属性

网格线合并

移动端

模拟器上显示的分辨率

移动端布局

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

多列布局（瀑布流）

属性

响应式布局

常见的布局方式

响应式布局设计原则

媒体查询

媒体查询操作方式

设备类型（默认为all）

注意：

常用媒体查询

PC端或大屏幕设备

通用断点

字体引入

语法规则

rem布局开发

px、em、rem单位

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

vh与vm单位

 注意：

精灵图

图片整合的优势

两栏布局与三栏布局 

2种3栏布局方法

第一种

第二种 

CSS渐变

线性渐变

direction属性

direction也支持角度渐变

径向渐变

控制渐变

注意：

center属性改变渐变起点

渐变起点：

重复渐变

重复线性渐变

重复径向渐变

过渡

transition属性（复合属性）

属性值

transition-timing-function属性值

逐帧动画 

贝塞尔曲线

transform（）属性（复合属性）

属性值translate（值1，值2）

属性值scale（）

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

旋转

rotate()属性

多属性值的使用

1.位移与缩放

2.位移与旋转

倾斜的

属性：skew()

关键帧动画

animation与transition的区别

animation属性 

动画持续时间

动画延迟时间

动画过渡类型

动画循环次数

动画在循环中运行方向

动画运行状态

动画填充模式

关键帧动画

3D

属性值

3D位移

设置景深

3D旋转

3D缩放

CSS概念

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

理解

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

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代码和HTML代码进行分离，同时也可以提高代码的复用性

CSS分类

  1. 使用html提供的style标签把css代码包起来
  2. 从外部引入CSS
  3. 当前行有效，给标签内加一个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>

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

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

CSS基本属性

词间距

字体颜色

capitalize;

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

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

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

多阴影之间的多个阴影用，隔开 

  • 直接写英文字母
  • 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(复合属性——宽 高）

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

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

<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区域向外裁剪（默认值）——此属性你将border边框改为虚线就可以清楚看到
  • 背景从padding区域向外裁剪
  • 背景从content区域向外裁剪

背景复合属性

<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: 属性值;

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

  • 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：光标指示程序正在忙（通常为一只表或一个沙漏）

空余空间

属性值

  • 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>

文档流

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

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

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

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

标准流限制如下

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>

溢出属性 

  • 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定位之后的都可以设置属性（top、bottom、left、right）
  • 粘性定位不是脱离文档流的，其偏移位置为浏览器当前窗口
  • 粘性定位和相对定位会保留自己原来的位置，绝对定位和固定定位都不会保留自己原来的位置
  • 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>

定位里的层级

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

标签： 绿色矩形连接器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台