CSS2完结（结合前面）

标签：浮动 CSS2 前面 color 元素 height 完结 background left

CSS2基础

浮动

概念：

早期：实现文字环绕图片或者文字环绕文字（通过伪元素选择器实现）的效果
现在：主流的布局方式之一

特点：

不管什么类型的元素，都按照文字环绕图片的效果实现
脱离文档流，浮动起来，元素大小默认被内容撑开
margin和其他内容区以外的内容可以完美设置
浮动后不会当成行内块处理
一个浮动元素会尽量向左或向右移动，知道他的外边缘触碰到包含框或另一个浮动框的边框为止

文档流：元素默认排列方式贴在网页这个“画板上”

特点1 特点4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 400px;
            background-color: skyblue;
            font-size: 20px;
            padding: 1px;
        }
        img{
            width: 200px;
            float: left;
            margin: 10px;
        }
        .test::first-letter {
            font-size: 100px;
            margin: o.5em;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <img src="../favicon.ico" alt="">
        Lorem ipsum dolor sit 
    </div>
    <br>
    <div class="test">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, id. Quidem unde officiis delectus iure laudantium aut officia velit itaque? Sapiente delectus distinctio non, quis, molestias similique maxime magni quia quo quibusdam tempore ea quaerat dignissimos suscipit minus ab incidunt reprehenderit quos, quam ipsam tenetur qui? Sit vero corrupti, magnam quod architecto temporibus accusamus aliquam, autem sint perspiciatis nobis eveniet natus facilis expedita beatae dignissimos nemo rerum nesciunt animi? Fugiat laboriosam consequuntur aspernatur quo, nemo quia rem et eligendi unde ea autem blanditiis? Quam voluptatem nostrum, molestiae sit, quidem nisi voluptas hic, distinctio provident quod eius totam debitis dolor modi!
    </div>
</body>
</html>

特点2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 600px;
            height: 600px;
            background-color: skyblue;
            font-size: 20px;
        }
        .box1 {
            background-color: orange;
        }
        .box2 {
            background-color: blueviolet;
            float: left;
        }
        .box3 {
            background-color: red;
            float: right;
        }
        .box {
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

影响：

兄弟元素会被其他浮动的元素影响
父元素高度塌陷，脱离文档流致使父元素的兄弟元素被父元素的浮动元素遮挡

父元素设置宽度依然会限制子元素浮动的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 600px;
            background-color: gray;
            border: 1px solid black;
        }
        .box {
            height: 100px;
            width: 100px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
        }
        .box1,.box2,.box3 {
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box0">0</div>
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <!-- <div class="box box4">4</div> -->
    </div>
    <!-- <div style="background-color: orange;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt libero maxime ea, eum deserunt doloribus ratione blanditiis aperiam ipsum, iure hic consequuntur neque consectetur ullam. Quos fugiat ducimus magni, possimus porro eaque eveniet temporibus repellat aliquid quis at iste repellendus atque corporis tempora ab? Illo totam est vel earum sint facilis reiciendis incidunt nam reprehenderit nostrum? Repellat, assumenda vitae? Consequuntur eum ducimus nihil reiciendis voluptas deserunt, aspernatur vero ea corporis recusandae. Quasi, velit reiciendis! Impedit quaerat accusamus et, exercitationem velit, illo ipsa officia possimus ab rerum, earum nemo obcaecati quis fugit perspiciatis blanditiis nesciunt! Tempore nisi voluptates magni doloribus voluptas accusantium minima veniam rem non, et aliquid numquam consequatur quas, odit ratione tenetur nam delectus adipisci doloremque voluptate porro quod nobis eaque. Voluptatum dolores vitae, sequi numquam natus sed ratione optio harum quam quod facere reiciendis ipsam, voluptates deleniti maxime nihil molestias blanditiis repellat earum ex culpa? Eveniet sunt est voluptate, ab ad itaque, libero, molestiae unde expedita voluptatibus vitae dicta dolores dolore consectetur aliquam pariatur soluta blanditiis aspernatur rem. Sapiente architecto nemo accusamus quo deleniti asperiores odit dolorem, beatae maxime inventore reprehenderit obcaecati laborum aut eligendi natus nihil id magni provident quae ipsum voluptate. Eaque culpa modi odit voluptas.</div> -->
</body>
</html>

在这里插入图片描述

解决方法：

希望达到效果：

父元素的高度不塌陷，后边兄弟元素的排版不会受到影响

给父元素设置高度
给父元素也设置浮动属性，但会带来其他影响
父元素设置overflow的值为hidden
父元素最后一个子元素设置clear为both属性
父元素通过伪元素选择器在最后设置一个没有内容的块级元素来专门进行消除浮动的影响

clear是专门用来消除浮动影响的属性，但使用clear自身的元素必须不能浮动而且不是行内元素

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 600px;
            /* 方案一 给父元素加高度 */
            /* height: 122px; */
            background-color: gray;
            border: 1px solid black;
            /* 方案二 给父元素也设置浮动 */
            /* float: left; */
            /* 方案三 给父元素设置overflow */
            /* overflow: hidden; */
        }
        .box {
            height: 100px;
            width: 100px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
        }
        .box1,.box2,.box3 {
            float: left;
        }
        /* 方案四 给父元素设置一个最后的子元素，没有内容，用来清除浮动的影响 */
        /* .magic {
            clear: both;
        } */
         /* 方案五 给父元素的最后设置一个无内容的伪元素来清除浮动的影响 */
        .outer::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <!-- <div class="box box4">4</div> -->
        <!-- <div class="magic"></div> -->
        <!-- <div style="background-color: blueviolet;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, consectetur voluptatibus quo culpa beatae repellat mollitia blanditiis ratione dolore assumenda alias labore maxime voluptate deleniti sed, enim aliquid eligendi iure nemo minus. Labore totam ratione numquam iure nostrum voluptate voluptas error quibusdam non vero ducimus ipsam, doloremque aspernatur, hic, ut nulla accusamus quo alias impedit. Fuga sapiente natus quaerat placeat quis, quidem pariatur temporibus porro et facilis incidunt quas harum! Eligendi facilis provident optio saepe ut aliquam, quae, quaerat vero omnis blanditiis fugit pariatur, placeat ipsa numquam adipisci soluta unde. Consequatur sit voluptas debitis. Eos quod, suscipit nisi id aut doloremque beatae omnis tempore ut doloribus molestiae similique pariatur harum? Ipsam suscipit illo quaerat quibusdam fugiat in aliquam doloremque rerum, fugit repellat. Nihil porro autem, at neque soluta, corrupti quas velit exercitationem voluptas reiciendis ipsum quasi sed incidunt quibusdam aut possimus libero reprehenderit eius hic harum aliquid molestiae cupiditate dicta! Eligendi animi distinctio asperiores inventore? Sequi, aut cumque voluptatem et repellat ipsa perferendis ullam odio ad iure reiciendis laudantium nemo vero rerum harum! Rerum eius et dolore? Perspiciatis dolore laudantium doloribus eos asperiores mollitia excepturi obcaecati consectetur quidem iure! Praesentium culpa aperiam in iusto quia quibusdam reprehenderit aliquid qui incidunt?</div> -->
    </div>
</body>
</html>

在这里插入图片描述

[!NOTE]

属性名属性值
float left，right，none（不浮动，默认值）
clear left，right，both（消除左右浮动的影响）

属性名	属性值
float	left，right，none（不浮动，默认值）
clear	left，right，both（消除左右浮动的影响）

定位

相对定位

概念：

元素相对自己本身的位置进行移动，但当时占据的位置不改变，块级元素依旧占据整行，行内块和行内元素也依旧占据着原本的位置

相当于样式的移动，但原本所占据的位置不会改变

[!CAUTION]

可以超出父元素content
层级>普通元素
可以给出负值
可以和浮动，margin一起使用，但不推荐
没有脱离文档流

优先级：

**左右（上下）**不可以同时写，如果一起写了，**left（top）**优先
后写定位层级 > 先写定位层级

使用步骤：

写上属性名position，属性值为relative
写上下左右任意方向对应的移动方向的px

作用：

进行微调
与绝对定位配合使用（常用）

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            padding: 10px;
        }
        .box {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }
        .box1 {
            background-color: blueviolet;
        }
        .box2 {
            background-color: orange;
            position: relative;
            bottom: 200px;
            /* float: left; */
        }
        .box3 {
            background-color: brown;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

绝对定位

概念：

被设置为绝对定位的元素，参考它的包含块进行定位，并且彻底脱离了文档流，本来占据的位置消失，但如果还在本来位置上，还遮挡住下面的元素

包含块:

1.若是没有脱离文档流的元素，父元素就是他的包含块

2.若是脱离文档流的元素，第一个开启定位的祖先元素就是包含块，若没有，则最老的祖先元素就是包含块

[!CAUTION]

可以写负值

可以与margin同时使用，但不推荐，且有所限制

不可与浮动共存，绝对定位>浮动

是对浮动布局的辅助

限制：只有用了定位中的left才可以使用margin-left且兼容性差

使用步骤：

写下属性名position，值为absolute
写下上下左右方向的位移px

同相对元素一样，上下，左右不可以同时使用

补充：

设置了绝对定位的元素，就变成了定位元素

定位元素：默认由内容撑开，宽高可以设置

可以用来进行鼠标悬停的局部页面覆盖或者移除

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            padding: 10px;
            position: relative;
        }
        .box {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }
        .box1 {
            background-color: blueviolet;
        }
        .box2 {
            background-color: orange;
            position: absolute;
            bottom: 210px;
        }
        .box3 {
            background-color: brown;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <!-- span元素代替下面的div -->
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

悬停前：
在这里插入图片描述

悬停后：

固定定位

概念：

元素参考视口来进行定位

视口:你能看到的网页，不论移动，放大或者缩小

[!CAUTION]

脱离文档流
设置了固定定位后元素成为定位元素
同绝对定位一样，加了left，才可以使用margin-left，但兼容性差，不推荐

使用步骤：

设置属性名position，值为fixed
设置上下左右方向的位移px（上下，左右不可以同时使用）

作用场景：

回到顶部的设计，跟着视口移动
狗皮膏药广告，一直挂在视口上

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            padding: 10px;
            height: 2000px;
        }
        .box {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }
        .box1 {
            background-color: blueviolet;
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
        .box2 {
            background-color: orange;
            bottom: 200px;
        }
        .box3 {
            background-color: brown;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

粘性定位

概念：

元素参考离它最近的拥有**“滚动进制”的祖先元素**，当距离一个方向剩下多少指定位移px时，元素产生粘性，当其父元素消失，元素粘性消失

滚动机制：拥有滚动条，但可不可以滚动都可以

[!CAUTION]

不会脱离文档流
可加浮动，不推荐
可加margin，不推荐

使用步骤:

设置属性名position，值为sticked
通过设置上下左右等来产生粘性效果

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .page-header {
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: orange;
        }
        .item {
            background-color: #ccc;
        }
        .first {
            font-size: 40px;
            background-color: skyblue;
            position: sticky;
            top: 0px;
        }
        body {
            height: 2000px;
        }
        

    </style>
</head>
<body>
    <!-- 头部区域 -->
     <div class="page-header">头部</div>
     <!-- 内容区 -->
      <div class="container">
        <!-- 每一项 -->
        <div class="item">
            <div class="first">A</div>
            <h2>A1</h2>
            <h2>A2</h2>
            <h2>A3</h2>
            <h2>A4</h2>
            <h2>A5</h2>
            <h2>A6</h2>
            <h2>A7</h2>
            <h2>A8</h2>
        </div>
        <div class="item">
            <div class="first">B</div>
            <h2>B1</h2>
            <h2>B2</h2>
            <h2>B3</h2>
            <h2>B4</h2>
            <h2>B5</h2>
            <h2>B6</h2>
            <h2>B7</h2>
            <h2>B8</h2>
        </div>
        <div class="item">
            <div class="first">C</div>
            <h2>C1</h2>
            <h2>C2</h2>
            <h2>C3</h2>
            <h2>C4</h2>
            <h2>C5</h2>
            <h2>C6</h2>
            <h2>C7</h2>
            <h2>C8</h2>
        </div>
        
        
      </div>
</body>
</html>

定位的特殊应用

补充：

用了定位后子元素位置会越过父元素的padding

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 让定位元素充满父元素
        特例：left和right，top和bottom可以同时使用
        */
        .outer {
            height: 400px;
            background-color: #ccc;
            position: relative;
        }
        .inner {
           
            font-size: 20px;
            padding: 20px;
            border: 2px solid black;
            background-color: skyblue;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">大圣</div>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 800px;
            height: 200px;
            position: relative;
            background-color: #ccc;
        }
        .inner {
            width: 400px;
            height: 100px;
            position: absolute;
            background-color: skyblue;
            /* 方案一
                使用的元素不可以没有宽高
            */
            /* top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto; */
            /* 方案二 */
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -50px;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

布局

版心

概念：

一个固定宽度且水平居中的盒子，宽度大概在960~1200之间

这个宽度是通过数据调查得到的，对多数浏览器都好使

应用：

设置一个满网页的宽度的盒子，在里面再设置一个版心填充内容

有些网页设置响应式，不同像素点下，网页的显示效果会有所不同

常用布局名字

布局类型	名字
顶部导航条	topbar
页头	header，page-header
导航	nav，navigator，navbar
搜索框	search，search-box
横幅，广告等	banner
主要内容	content
侧边栏	aside，sidebar
页脚	footer,page-footer
新闻	news

等等等等…

重置默认样式

概念：

由于当今网页的实现越来越精细化，导致以前的默认样式变得没有那么必要，因此设置了一些方法来重置默认样式

方法：

全局选择器（不常用）
reset.css（有些大厂会有自己独特的方式来重置默认样式）
normallize.css（使各大浏览器可以实现标准化，众多大厂在进行维护，通过数据来保留有价值的样式）

方法3增加了对html5的元素的设置

开发时可以根据实际情况选择

normalize的网站，有兴趣可以查看

标签：浮动,CSS2,前面,color,元素,height,完结,background,left
From： https://blog.csdn.net/wozhaonue_w/article/details/141566735

CSS2基础

浮动

定位

相对定位

绝对定位

固定定位

粘性定位

定位的特殊应用

布局

版心

常用布局名字

重置默认样式

相关文章

赞助商

阅读排行