java程序员之-css基础

林梦梵

已于 2023-11-07 22:23:58 修改

阅读量7.7k

点赞数

文章标签： css 前端

于 2023-11-07 22:12:37 首次发布

本文链接：https://blog.csdn.net/huangyunming/article/details/134254254

版权

我笑了，你哭了！

我睡了，你也睡了！

　　我哭了，你却笑了！

　　世界总是那么狭小，却突然变得那么大，那么小是因为我们相遇，突然变得那么大是因为世分两地！

　　我想你，而你却没有那么想我，其实我不会太惆怅，因为你还不懂我！

　　所以我笑了，你哭了！

　　我笑了，是因为我太自恋了，以为你知道我的爱！

　　你哭了，是因为我对于你重要了！

　　如果我重要了，我还爱着你，那么就在一起吧！

　　我笑了，你哭了！

　　我高兴的笑了，你激动得哭了！

　　如果你没有离开，怎么会发现我的存在！

　　如果我毅然挽留，怎么会让你自由！

一、css基础

1、css样式表的引入方法

        css根据使用场景的不同提供了四种引入样式的方法
        1、行内式
        2、内嵌式
        3、外链式
        4、导入式

行内式：

在标签的style属性中，等号后面的引号内属性css样式，多个属性使用分号分隔；

<div style="color:red;font-size:8px;font-family:red;"></div>

内嵌式：

在head标签的内部，title标签的下面，一对style标签中；

<head>
<title>标题</title>
<style>
        div{
        color:red;
        font-size:50px
        }
</style>
</head>

外链式：

跟内嵌式的位置一样，只是将style标签里面的内容放到单独的一个.css文件里面，然后通过link标签引入；

<link rel='stylesheet' href='dd/s.css'></link>

导入式：

在head标签的内部，title标签的下面，一对style标签内，通过@import进行导入；

注意，必须写在style标签的最顶部；

<style>
        @import url('aa/vv.css');
</style>

样式表的名称	权重	优点	缺点
行内式样式表	最高	权重高，样式设置更精确	第一，结构和样式没有进行分离；第二，不能批量修改样式；
内嵌式样式表	大于导入式、等于内外链式	能够将css样式和骨架进行分离，可以进行批量属性修改	样式和骨架没有进行完全分离，多个html文件不能使用同一套css代码；
外链式样式表	大于导入式，等于内嵌式	样式和骨架进行完全分离，一份css代码可以重复使用	如果我们写肖的demo的时候，每次写外链式比较麻烦，并且看起来不直观
导入式样式表	最低	样式和骨架进行了完全分离，一份cssdiam可以重复使用	导入式有样式问题，引入导入式涉及到加载顺序，说白了，页面会白一下，体验不好；

2、css选择器

选择器分为两种，一种是基础选择器，一种是高级选择器

基础选择器：标签选择器、id选择器、类名选择器、通配符选择器；

高级选择器：后代选择器、交集选择器、并集选择器

基础选择器：

标签选择器：

        选择方法：通过标签名称去选择；
        书写方法：标签名；
        作用范围：html全部相关的标签；

p{
        color:red;
}

用途：实现全选同名标签，可以设置公共样式
缺点：只能进行全选，不能进行单独的布局样式；

id选择器：

选择方法：通过标签上的id属性进行选择；
书写方法：#id属性值(自定义)
选择范围：只能选中一个标签；

#id{
        color:red;
}

说明：id其实就是标签的身份证号，具有唯一性。规定一个页面中不允许有同名id属性；
优点：id属性的权重高；
缺点：只能实现单选；

类名选择器：

        选择方法：通过标签的class属性进行选择；
        书写方法：.匹配对应的class属性值；
        选择范围：选择所有同名class属性标签；

.classname{
        color:red;
}

说明：一个标签的class属性值可以有一个或者多个，多个class使用空格隔开；
id和class属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线；

通配符选择器：

        书写方法：*
        选择范围：选择包含html标签在内的所有标签；
        通配符*后面添加样式，每个标签都会加载一次；
*我们通常使用清除页面的默认样式；

*{
        color:red;
}

例如清除页面的默认页面边距；

*{
    padding:0px;
    margin:0px;
}

高级选择器：

后代选择器：

书写方法：使用空格连续链接多级选择器；

作用：通过标签之间的后代关系去决定选择某个范围内的元素，具有精确匹配性；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box ul li{
            color:red;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>box111111111111</li>
            <li>box2222222222222222</li>
        </ul>
    </div>
    <div class="boxe">
        <ul>
            <li>boxe111111111111</li>
            <li>boxe2222222222222222</li>
        </ul>
    </div>
</body>
</html>

注意：需要注意的是，后代关系不一定是父子关系；
如上css设置可以使用：

<style>
        .box li{
            color:red;
        }
</style>

说明：表示选择类名为box后代中的li；

交集选择器：

书写方法：将多个选择器连接书写，中间没有空格，不需要加任何符号；

作用：进行满足所有选择器条件的匹配；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.par{
            color:blue;
        }
    </style>
</head>
<body>
    <div class="par">div内容</div>
    <p class="par">p内容</p>
</body>
</html>

并集选择器：

并集选择器有‘和’的意思，代表多个标签设置同样的属性；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,div{
            color:blue;
        }
    </style>
</head>
<body>
    <div>div内容</div>
    <p>p内容</p>
</body>
</html>

说明： div和p标签设置的属性是一样的，这个时候我们可以通过并集选择器设置同样的属性值；

扩展说明：并集选择器非常灵活，可以结合多种选择器使用，就是利用逗号进行分割从而区分属性；

#par .par li,p{
        color:red;
}

说明：上面的代码指的是#par里面的.par里面的li和p标签的文字颜色为红色；

3、css继承性和层叠性

继承性

只需要给祖先元素设置文字属性，后代元素就能加载这个属性，这个特性我们叫做继承性；
解释：其实就是父级标签设置的样式在子标签上会有效；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            color:red;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>文字</li>
        </ul>
    </div>
</body>
</html>

浏览器上也能查看到样式继承来之谁：

注意，css可以继承的属性都是关于文字的，比如color，font-size，font-family

层叠性

css样式表又叫做“层叠式样式表”，什么是层叠性；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            color:red;
        }
        #p1{
            font-size:40px;
        }
        p{
            text-decoration: underline;
        }
        
    </style>
</head>
<body>
    <p id="p1" class="box">文字咯</p>
</body>
</html>

解释：就是多个样式设置在一个标签上得到了显式；
通过上面的案例，我们发现一个标签可以被多个选择器选中，并设置对应的属性

提问：如果多个选择器，设置了同一个属性，怎么办？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            color:red;
        }
        #p1{
            color:yellow;
        }
        p{
            color:blue;
        }
        
    </style>
</head>
<body>
    <p id="p1" class="box">文字咯</p>
</body>
</html>

我们看上图后面两个选择器设置的内容被‘杠’掉了，我们叫做被层叠性了，这就是css的层叠性；
选择器权重：id选择器>class选择器>标签选择器；
如果被多个选择器同时选中，首先看id的，如果没有id的，看class的，如果没有class的，看标签的；

提问：如下代码文字颜色是什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.box1 #box2 #box3 p{
            color:green;
        }
        #box1 div.box2 div.box3 p{
            color:red;
        }
        div.box1 div.box2 #box3  p{
            color: aqua;
        }
        
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>文字</p>
            </div>
        </div>
    </div>
</body>
</html>

是不是觉得很疑惑？

解释：思路就是，查看多组选中器中；id选择器，class选择器，标签选择器的数量；

第一个：2 1 2
第二个：1 2 2
第二个：1 2 2

如果去掉一个选择器那么后面两个是同级的，那么就是谁放到最后就显式谁的样式；

提问：如果遇到复杂的选择器，不要慌，要学会数选择器！

方法，首先将所有的选择器罗列出来，从id选择器比较，如果id选择能比出大小，则数量多的获胜。如果id选择器数量相同或者没有，则比较类名选择器，数量多的获胜。如果类名选择器数量相同或者没有，则比较标签选择器，数量大的获胜，如果所有选择器数量相同，后写的覆盖先写的；

升华：如果都没有选择中对应标签，就看谁离得近，离得近的就是被选中的，如果选择的都是同一个元素中，再去数权重；

总结：
遇到了复杂的选择器，首先看是否同时选中的一个元素，如果都选择的是同一个元素，则数权重，如果层级不同，比如有的是父亲级别，有的是爷爷级别，使用就近原则，谁离得近听谁的；如果所有的权重一样，选择位置也一样，后书写的覆盖先写的；

二、css提升

css属性学习-color

字体颜色
color作用是用来设置文字的颜色；
属性值：颜色名、颜色值；
颜色值：包含rgb和十六进制；

rgb模式是三原色(red、green、blue)，rgb(红色，绿色，蓝色)逗号分隔每个颜色的色值，每个颜色的取值范围是0~255，一共就组成1670万种颜色；
红色：rgb(255,0,0)
绿色：rgb(0,255,0)
蓝色：rgb(0,0,255)
白色：rgb(255,255,255)
黑色：rgb(0,0,0)

p{
        color:rgb(255,0,0)
}

十六进制：是将rgb颜色表示法进行了简化；
将十进制的0~255颜色表示法替换成了十六进制颜色表示法；
0-00
255-ff
十六进制就是0~9，a~f
十六进制颜色值的写法：使用#后面加红绿蓝三个颜色的十六进制的二位数写法；
红色：#ff0000
绿色：#00ff00
蓝色：#0000ff
白色：#ffffff
黑色：#000000

p{
        color:#ff0000
}

特别说明：部分特殊的十六进制是可以简化的，比如黑色#000000可以简化为#000，有些是不能简化的，比如#00ffab这种是不可以简化的；

#00ffaa简化为：#0fa
#aaffdd简化为：#afd

css属性学习-font-family

字体-font-family
作用：设置文字使用哪些字体显式；
属性值：必须要用引号包裹，值可以有多个，中间使用逗号隔开；
中文字体：
微软雅黑的英文表示法：Miscrosoft Yahei
宋体英文表示法：SmiSum

英文字体：
Arial
consolas

方案：工作中关于文字我们是通过设计图获取的，如果设计师没有给你字体，可以自己去获取，通过FW获取；

css属性学习-font-size

字号-font-size
作用：是设置文字的大小；
属性值：
px为单位：数值是几表示字号显示多少像素；
百分比为单位：参考的是继承的字号的百分比；
em为单位：数值是几表示继承字号的几倍；

css属性学习-line-height

行高-line-height
定义：文字在一定的高度内垂直居中；
属性值：
px为单位：数值是几表示行高就为几像素；
百分比：参考的是自身字号的百分比；

刺客：利用行高的特点，可以设置文字在盒子内垂直居中；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            margin: 200px auto;
            height: 200px;
            width: 400px;
            border: 1px solid red;
            line-height: 200px;
        }
        
    </style>
</head>
<body>
    <div id="box1" class="box1">
        什么鬼
    </div>
</body>
</html>

css属性学习-font-weight

字体加粗-font-weight
作用：设置字体是否进行加粗显式；
属性值：单词法，数值法；
数值：100~700，以整百为单位表示；

p{
        font-weight:200
}

单词表示法：
normal表示正常的，没有加粗的；
bold表示加粗，和数值700是相等的；

css属性学习-font-style和综合属性

字体样式font-style
作用：用来设置文字是否有倾斜或者斜体；
属性值：
normal:正规的，没有倾斜的；
italic:斜体的，指的是文字斜体；
oblique:倾斜的，与字体无关；

工作中用的最多的是italic
italic和oblique的区别是，italic如果字体带有倾斜那么就倾斜如果没有就没有。oblique与字体是否有倾斜无关一律倾斜；

font属性综合写法：包含五个单一属性，书写是属性值之间用空格隔开，字号和行高使用斜杠分隔。字号、行高、字体必须连续书写，顺序不能颠倒，而且必须位于倒数后三个；
24px字号，48px是行高 SimSun宋体；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .font{
            font:italic normal 24px/48px 'SimSun'
        }
    </style>
</head>
<body>
    <p class="font">我是综合属性设置；</p>
</body>
</html>

文本

对齐text-align

作用：用来设置段落的整体水平方向对齐；
属性值：left、center、right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 300px;
            border: red solid 1px;
            margin: 200px auto;
            text-align: right;
        }
    </style>
</head>
<body>
    <p>我是综合属性设置；我是综合属性设置；我是综合属性设置；我是综合属性设置；我是综合属性设置；</p>
</body>
</html>

文本修饰text-decoration

作用：设置文本整体是否有线条修饰；
属性值：
none：没有修饰；
overline：上划线；
line-through：中划线、删除线；
underline：下划线；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .none{
        text-decoration: none;
       }
       .overline{
        text-decoration: overline;
       }
       .line_through{
        text-decoration: line-through;
       }
       .underline{
        text-decoration: underline;
       }
    </style>
</head>
<body>
    <p class="none">正常</p>
    <p class="overline">上划线</p>
    <p class="line_through">中划线</p>
    <p class="underline">下划线</p>
</body>
</html>

刺客：通常使用text-decoration属性取消a的默认下划线；

缩进text-indent

作用：设置段落首行缩进；
属性值：
px单位数值表示：数字是多少代表首行缩进多少像素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        div{
            width: 200px;
            height: 100;
            border: red 2px solid;
            
        }
        p{
            text-indent:30px;
        }
       .none{
        text-decoration: none;
       }
       .overline{
        text-decoration: overline;
       }
       .line_through{
        text-decoration: line-through;
       }
       .underline{
        text-decoration: underline;
       }
    </style>
</head>
<body>
    <div>
    <p class="none">正常</p>
    <p class="overline">上划线</p>
    <p class="line_through">中划线</p>
    <p class="underline">下划线</p>
</div>
</body>
</html>

百分比表示法：参考标签的父级width属性值的百分比；

以em为单位：数字是几表示首行缩进几个中文字符。最常用的设置；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        div{
            width: 200px;
            height: 100;
            border: red 2px solid;
            
        }
        p{
            text-indent:2em;
        }
       .none{
        text-decoration: none;
       }
       .overline{
        text-decoration: overline;
       }
       .line_through{
        text-decoration: line-through;
       }
       .underline{
        text-decoration: underline;
       }
    </style>
</head>
<body>
    <div>
    <p class="none">正常</p>
    <p class="overline">上划线</p>
    <p class="line_through">中划线</p>
    <p class="underline">下划线</p>
</div>
</body>
</html>

css盒模型

盒模型
又叫框模型、是css的重要布局属性，包含了五个属性，width（宽度）、height（高度）、padding（内边距）、border（边框）、margin（外边距）
盒子的实际加载区域：width+height
盒子可实体化显示区域：width+height+padding+border
盒子实际占位区域：width+height+padding+border+margin

css盒模型-width和height

宽度和高度
作用：设置加载内容的区域；
宽度：width
高度：height
属性值：
px为单位的表示法，数值是多少就是多少像素；

div{
        width:200px;
        height:200px;
}

百分比表示法，它是父级盒子的宽度或者高度的占比；

div{
        width:200px;
}
p{
        width:50%;
}

特别说明：如果没有设置宽度，会默认撑满父盒子的宽度；
如果盒子不设置高度，会默认被内容撑高；

css盒模型-padding

内边距
作用：设置宽和高到边框的间距；
特点：不能加载内容，但是可以加载背景；
属性名：padding
属性值：px为单位的数值；
padding属性是一个综合属性，可以根据不同方向进行单一属性设置；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            padding-left: 20px;
            padding-right: 25px;
            padding-top: 30px;
            padding-bottom: 40px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        我是
    </div>
</body>
</html>

我们可以使用padding进行综合书写；
四值表示法：padding: 30px 25px 40px 20px;
以上代码等价于下面的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            padding: 30px 25px 40px 20px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        我是
    </div>
</body>
</html>

三值法：三个值分别代表上、左右、下；

padding:10px 20px 10px

二值法：两个值分别表示上下、左右
padding:10px 20px

css盒模型-margin

外边距
属性名：margin
属性值：跟padding一样；

css属性扩展-清除默认样式

？？？？？

css属性扩展-margin塌陷

margin塌陷现象
同方向的margin会有塌陷
在垂直方向上，如果有遇到的margin，两个盒子之间不是属性值的和，而是比较两个盒子谁的margin更大，使用的就是margin值更大的高度；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        div{
            background-color: blue;
            width: 100px;
            height:100px;
            margin:50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        div{
            background-color: blue;
            width: 100px;
            height:100px;
            margin:50px;
        }
        .bb{
            margin-top:100px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="bb"></div>
</body>
</html>

父子元素也有margin塌陷的现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        div{
            background-color: blue;
            width: 100px;
            height:100px;
        }
        p{
            background-color: pink;
            width: 50px;
            height: 50px;
            margin:30px;
        }
        
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

父子盒子，如果子盒子设置margin-top，父盒子没有设置或者margin-top的值小于了子盒子，此时会存在margin塌陷的现象；

如何解决margin塌陷的现象，如果是兄弟关系，统一都设置一个方向的margin，比如都设置margin-bottom，如果是父子盒子，可以给父盒子加border或者padding，其实这种方法都不合理，正常情况下都不会使用子盒子去踹父盒子，而是使用父盒子加padding；

css盒模型-border

边框
作用：设置盒子的显示边缘（边框）
属性名：border
border属性值有三个值，border是一个综合书写；
border:2px solid green;
按照border的属性类型划分三个属性值分别代表：边框宽度：border-width、线形：border-style、线的颜色：border-color；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border:2px solid green;
            padding: 10px 20px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        我是
    </div>
</body>
</html>

线宽：border-width
border-width:10px 20px 30px 40px;

div{
            border: 10px solid red;
            border-width: 10px 20px 30px 40px;
            padding: 10px 20px;
            width: 200px;
            background-color: pink;
        }

线型：border-style
属性值：类型padding，也有四值法；
border-style: solid dashed dotted double;

 div{
            border: 10px solid red;
            border-width: 10px 20px 30px 40px;
            border-style: solid dashed dotted double;
            padding: 10px 20px;
            width: 200px;
            background-color: pink;
        }

solid:实线
dashed:虚线
dotted:点线
double:双线
groove：边框凹陷效果
rideg：边框凸陷效果；
inset：内容凹陷效果；
outset：内容凸显效果；

边框颜色：border-color
属性值：类型padding，也有四值法；

 div{
            border: 10px solid red;
            border-width: 10px 20px 30px 40px;
            border-style: solid dashed dotted double;
            border-color: yellow blue green hotpink;
            padding: 10px 20px;
            width: 200px;
            background-color: pink;
        }

无论是线型还是线厚度还是线的颜色，都可以单一设置某一个方向；
比如我们设置右侧边框颜色为紫色；
先做什么，对哪里做什么，做的是什么；

 div{
            border: 10px solid red;
            border-width: 10px 20px 30px 40px;
            border-style: solid dashed dotted double;
            border-color: yellow blue green hotpink;
            border-right-color: purple;
            padding: 10px 20px;
            width: 200px;
            background-color: pink;
        }

css属性扩展-height

height属性扩展
一个盒子必须有高度，否则看不到内容样式，高度可以有多个配置内容，比如超出部分，如何显示；
如果盒子没有设置高度，则被内容撑高，如果设置了高度，内容高度大于盒子本身的高度，不会被隐藏，会自动超出盒子内容显示；

 p{
            width: 200px;
            background-color: brown;
        }

 p{
            width: 200px;
            background-color: brown;
            height: 100px;
        }

关于高度超出部分，是有属性可配置的；

overflow，其作用指的是超出盒子部分怎么显示；
属性值：visible可见的，默认值；

 p{
            width: 150px;
            background-color: brown;
            height: 100px;
            overflow:visible;
  }

属性值：hidden，隐藏掉；

 p{
            width: 150px;
            background-color: brown;
            height: 100px;
            overflow:hidden;
  }

属性值：scrol，添加滚动条；作用是给盒子添加滚动条样式，无论文字内容是否超出盒子，都加滚动条样式；

p{
            width: 150px;
            background-color: brown;
            height: 100px;
            overflow:scroll;
 }

属性值：auto，作用是盒子内容超出部分滚动条显示；

p{
            width: 150px;
            background-color: brown;
            height: 100px;
            overflow:auto;
}

关于height属性，如果希望盒子自动被内容撑高，可以设置值为auto；

css属性扩展-居中

居中
关于居中，主要有两种，一种是关于盒子的，一种是关于文字的；
属性名：text-align
水平居中，属性值：center

 div{
            width: 150px;
            height: 100px;
            border:1px solid black;
            text-align:center;
 }

单行文字的垂直居中，设置line-height的高度和盒子一样高；

 div{
            width: 150px;
            height: 100px;
            border:1px solid black;
            text-align:center;
            line-height:100px;
 }

总结：如果需要单行文本水平垂直都居中，设置text-align:center,line-height:盒子的高度；
如果是多行文本；
如果是多行文本设置垂直居中不能使用行高等于盒子高度；
方法：盒子不设置高度，设置上下相同的padding属性值；

div{
            width: 150px;
            border:1px solid black;
            text-align:center;
            padding:20px 0px;
  }

盒子也有居中的讲究
盒子的水平居中
方法给目标元素设置margin：自定义值 auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            border:1px solid black;
            text-align:center;
            padding:20px 0px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div>老大摄氏度东风大幅度大幅度反对的顶顶顶顶</div>
</body>
</html>

盒子的垂直居中，和文字的类似，父盒子不设置高度，而设置上下padding；

总结：如果设置盒子上下左右都居中的状态，首先子盒子设置margin：0 auto；父盒子不设置高度，而设置上下padding；

工作中真正设置垂直居中使用的是定位，很少使用padding去挤高度；

三、css浮动

css浮动的基本使用

如果一个网站只有标准文档流，很多效果是不能实现的，如果要实现非标准特点的页面就必须让标签去标准化让标签脱离标准的方法：浮动、定位；

浮动：
浮动属性是专门用于进行网页并布局的；
作用：脱离标准文档流，不在受元素等级的限制，又可以并排显示，又可以设置宽和高；
float：属性就是设置元素浮动；
属性值：left、right

不设置浮动前的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1000px;
        height: 100px;
        border:2px solid red;
    }
    p{
        width: 40px;
        height: 40px;
        margin: 0 10px;
        background-color: green;
        /* float:left; */
    }
   </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
</body>
</html>

设置左浮动：
float:left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1000px;
        height: 100px;
        border:2px solid red;
    }
    p{
        width: 40px;
        height: 40px;
        margin: 0 10px;
        background-color: green;
        float:left;
    }
   </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
</body>
</html>

设置右浮动就是从右开始：

如果里面的元素填充完一整行会自动换行到下面：

然后添加一个外边距的上下设置；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1000px;
        height: 100px;
        border:2px solid red;
    }
    p{
        width: 40px;
        height: 40px;
        margin: 5px 10px;
        background-color: green;
        float:left;
    }
   </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
        <p>23</p>
        <p>24</p>
        <p>25</p>
        <p>26</p>
    </div>
</body>
</html>

浮动的特性：元素会按照书写的顺序进行一次贴边，同一个父盒子中，既可以设置左浮动，也可以设置右浮动；

css浮动小练习

完成如下布局

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    .container{
        width: 970px;
        height: 103px;
        margin: auto;
    }
    .container .top{
        height: 103px;
        margin-bottom: 10px;
    }
    
    .container .top .left{
        height: 103px;
        width: 277px;
        background: red;
        float: left;
    }
    .container .top .right{
        height: 103px;
        width: 679px;
        float:right;
    }
    .container .top .right .right-top{
        height: 49px;
        width: 137px;
        background: rgb(31, 235, 31);
        float:right;
        margin-bottom: 8px;
    }
    .container .top .right .right-bottom{
        height: 46px;
        width: 679px;
        background:rgb(31, 235, 31);
        float:left;
    }
    .container .conter{
        height: 435px;
        margin-bottom: 10px;
    }
    .container .conter .conter-left{
        height: 435px;
        width: 310px;
        background: orange;
        margin-bottom: 10px;
        float:left;
    }
    .container .conter .conter-right{
        height: 435px;
        width: 650px;
        margin-bottom: 10px;
        float:right;
    }
    .container .conter .conter-right .conter-right-top{
        height: 401px;
        width: 650px;
        margin-bottom: 10px;
    }
    .container .conter .conter-right .conter-right-top .conter-right-top-l{
        height: 401px;
        width: 450px;
        float:left;
    }
    .container .conter .conter-right .conter-right-top .conter-right-top-l .conter-right-top-l-t{
        height: 240px;
        width: 450px;
        background: skyblue;
        margin-bottom: 10px;
    }
    .container .conter .conter-right .conter-right-top .conter-right-top-l .conter-right-top-l-c{
        height: 110px;
        width: 450px;
        background: skyblue;
        margin-bottom: 10px;
    }
    .container .conter .conter-right .conter-right-top .conter-right-top-l .conter-right-top-l-b{
        height: 30px;
        width: 450px;
        background: skyblue;
    }
    .container .conter .conter-right .conter-right-top .conter-right-top-r{
        height: 401px;
        width: 190px;
        background: palevioletred;
        float:right;
    }
    .container .conter .conter-right .conter-right-bottom{
        height: 25px;
        width: 650px;
        background: green;
    }
    .container .bottom{
        height: 35px;
        background: blue;
    }
    
   </style>
</head>
<body>
    <div class="container">
        <div class="top">
            <div class="left"></div>
            <div class="right">
                <div class="right-top"></div>
                <div class="right-bottom"></div>
            </div>
        </div>
        <div class="conter">
            <div class="conter-left"></div>
            <div class="conter-right">
                <div class="conter-right-top">
                    <div class="conter-right-top-l">
                        <div class="conter-right-top-l-t"></div>
                        <div class="conter-right-top-l-c"></div>
                        <div class="conter-right-top-l-b"></div>
                    </div>
                    <div class="conter-right-top-r"></div>
                </div>
                <div class="conter-right-bottom"></div>
            </div>
        </div>
        <div class="bottom"></div>
    </div>
</body>
</html>

css浮动的性质

浮动的性质
浮动的元素拖标
我们知道了浮动元素是脱离标准流的，那么脱离标准流后，浮动元素有哪些特性？
答：浮动元素，脱离标准流后，既可以设置宽度和高度，也可以实现并排显示，不区分元素的状态，也就是不区分行内元素和块级元素；

标准流对行内元素设置高度没有生效；
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 200px;
        height: 200px;
        border:red 1px solid;
    }
    div p{
        width: 100px;
        height: 100px; 
        background-color: palevioletred;
    }
    div span{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
   </style>
</head>
<body>
    <div>
        <p>我是p</p>
        <span>我是span</span>
    </div>
</body>
</html>

p标签和span标签都设置了宽度和高度，但是由于元素类型的限制，span标签没有宽度和高度

div内元素设置浮动之后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 200px;
        height: 200px;
        border:red 1px solid;
    }
    div p{
        width: 100px;
        height: 100px; 
        background-color: palevioletred;
        float:left;
    }
    div span{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        float:left;
    }
   </style>
</head>
<body>
    <div>
        <p>我是p</p>
        <span>我是span</span>
    </div>
</body>
</html>

注意：需要注意的是，兄弟元素如果有一个浮动了，剩下的必须都要浮动；

如果此时p标签和span标签都没有设置宽度和高度，元素的宽度会被内容撑宽，不会自动撑满父盒子；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 200px;
        height: 200px;
        border:red 1px solid;
    }
    div p{
        background-color: palevioletred;
        float:left;
    }
    div span{
        background-color: blueviolet;
        float:left;
    }
   </style>
</head>
<body>
    <div>
        <p>我是p</p>
        <span>我是span</span>
    </div>
</body>
</html>

没有设置浮动和宽高的情况下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 200px;
        height: 200px;
        border:red 1px solid;
    }
    div p{
        background-color: palevioletred;
        /* float:left; */
    }
    div span{
        background-color: blueviolet;
        /* float:left; */
    }
   </style>
</head>
<body>
    <div>
        <p>我是p</p>
        <span>我是span</span>
    </div>
</body>
</html>

依次贴边
如果父盒子的宽度不足以存下所有的子盒子，存放不下的会自动向前寻找，直到空余位置能够存放，从而进行贴边显式；

正常显式：没有设置浮动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 400px;
        height: 400px;
        border:red 1px solid;
        margin: 100px auto;
    }
    div p{
        width: 100px;
        height: 100px;
    }
    div p.par1{
        background-color: aqua;
    }
    div p.par2{
        background-color: red;
    }
    div p.par3{
        background-color: rebeccapurple;
    }
    div p.par4{
        background-color: gold;
    }
   </style>
</head>
<body>
    <div>
        <p class="par1">1</p>
        <p class="par2">2</p>
        <p class="par3">3</p>
        <p class="par4">4</p>
    </div>
</body>
</html>

让大家都浮动一下：
让p标签左浮动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 400px;
        height: 400px;
        border:red 1px solid;
        margin: 100px auto;
    }
    div p{
        width: 100px;
        height: 100px;
        float:left;
    }
    div p.par1{
        background-color: aqua;
    }
    div p.par2{
        background-color: red;
    }
    div p.par3{
        background-color: rebeccapurple;
    }
    div p.par4{
        background-color: gold;
    }
   </style>
</head>
<body>
    <div>
        <p class="par1">1</p>
        <p class="par2">2</p>
        <p class="par3">3</p>
        <p class="par4">4</p>
    </div>
</body>
</html>

演示贴边现象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 400px;
        height: 400px;
        border:red 1px solid;
        margin: 100px auto;
    }
    div p{
        width: 100px;
        height: 100px;
        float:left;
    }
    div p.par1{
        height: 250px;
        background-color: aqua;
    }
    div p.par2{
        height: 200px;
        background-color: red;
    }
    div p.par3{
        background-color: rebeccapurple;
    }
    div p.par4{
        width: 300px;
        background-color: gold;
    }
   </style>
</head>
<body>
    <div>
        <p class="par1">1</p>
        <p class="par2">2</p>
        <p class="par3">3</p>
        <p class="par4">4</p>
    </div>
</body>
</html>

设置200px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 400px;
        height: 400px;
        border:red 1px solid;
        margin: 100px auto;
    }
    div p{
        width: 100px;
        height: 100px;
        float:left;
    }
    div p.par1{
        height: 250px;
        background-color: aqua;
    }
    div p.par2{
        height: 200px;
        background-color: red;
    }
    div p.par3{
        background-color: rebeccapurple;
    }
    div p.par4{
        width: 200px;
        background-color: gold;
    }
   </style>
</head>
<body>
    <div>
        <p class="par1">1</p>
        <p class="par2">2</p>
        <p class="par3">3</p>
        <p class="par4">4</p>
    </div>
</body>
</html>

如果父盒子的跨度不够，子盒子会依次贴边，但是如果前面元素中有空隙当前需要贴边的元素不会钻空，不会出现钻空的现象，而只会查询剩余宽度实现依次贴边；
例如；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 600px;
        height: 400px;
        border:red 1px solid;
        margin: 100px auto;
    }
    div p{
        width: 100px;
        height: 100px;
        float:left;
    }
    div p.par1{
        height: 250px;
        background-color: aqua;
    }
    div p.par2{
        width: 250px;
        background-color: red;
    }
    div p.par3{
        width: 230px;
        height: 130px;
        background-color: rebeccapurple;
    }
    div p.par4{
        width: 200px;
        background-color: gold;
    }
   </style>
</head>
<body>
    <div>
        <p class="par1">1</p>
        <p class="par2">2</p>
        <p class="par3">3</p>
        <p class="par4">4</p>
    </div>
</body>
</html>

如果某一个子盒子的宽度大于了父盒子，会有益出状态；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 600px;
        height: 400px;
        border:red 1px solid;
        margin: 100px auto;
    }
    div p{
        width: 100px;
        height: 100px;
        float:left;
    }
    div p.par1{
        height: 250px;
        background-color: aqua;
    }
    div p.par2{
        width: 250px;
        background-color: red;
    }
    div p.par3{
        width: 230px;
        height: 130px;
        background-color: rebeccapurple;
    }
    div p.par4{
        width: 700px;
        background-color: gold;
    }
   </style>
</head>
<body>
    <div>
        <p class="par1">1</p>
        <p class="par2">2</p>
        <p class="par3">3</p>
        <p class="par4">4</p>
    </div>
</body>
</html>

向右贴边的原理和向左相同，也是按照先后顺序进行贴边；

css浮动贴边特性练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div.outer{
        width: 940px;
        height: 440px;
        border:black 1px solid;
        padding: 10px;
        margin: 10px auto;
    }
    div.outer div{
        float:left;
    }
    .outer .box1{
        width: 300px;
        height: 260px;
        background: palevioletred;
    }
    .outer .box2{
        width: 240px;
        height: 260px;
        background: skyblue;
    }
    .outer .s_box{
        width: 200px;
        height: 130px;
    }
    .outer .box3{
        background: yellow;
    }
    .outer .box4{
        background: yellowgreen;
    }
    .outer .box7{
        width: 300px;
        height: 180px;
        background: rgb(75, 188, 223);
    }
    .outer .s_box2{
        width: 160px;
        height: 180px;
    }
    .outer .box8{
        background: purple;
    }
    .outer .box9{
        background: greenyellow;
    }
   </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="s_box box3"></div>
        <div class="s_box box4"></div>
        <div class="s_box box4"></div>
        <div class="s_box box3"></div>
        <div class="box7"></div>
        <div class="s_box2 box8"></div>
        <div class="s_box2 box9"></div>
        <div class="s_box2 box8"></div>
        <div class="s_box2 box9"></div>
    </div>
</body>
</html>

css浮动让出标准以及字围现象

浮动margin塌陷问题
标准流有margin塌陷的现象；

标准流时候的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div.outer{
        width: 200px;
        height: 300px;
        border:1px solid red;
        margin: 30px auto;
    }
    div.outer div{
        width: 100px;
        height: 50px;
        margin: 20px auto;
        background: skyblue;
        /* float:left; */
    }
    
   </style>
</head>
<body>
    <div class="outer">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

浮动流的塌陷现象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div.outer{
        width: 200px;
        height: 300px;
        border:1px solid red;
        margin: 30px auto;
    }
    div.outer div{
        width: 100px;
        height: 50px;
        margin: 20px auto;
        background: skyblue;
        float:left;
    }
    
   </style>
</head>
<body>
    <div class="outer">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div.outer{
        width: 200px;
        height: 300px;
        border:1px solid red;
        margin: 30px auto;
    }
    div.outer div{
        width: 110px;
        height: 50px;
        margin: 20px ;
        background: skyblue;
        float:left;
    }
    
   </style>
</head>
<body>
    <div class="outer">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

总结：浮动元素没有了标准流的margin塌陷现象，各自有各自的margin，不会相互塌陷；

浮动元素让出标准流：
标准流中的元素都有自己的一个标准流位置，后面的元素只能在前面元素的后面进行加载；
浮动元素脱离标准流，它会让后面的元素占有自己原来的位置，显示效果上来看仿佛是自己“飘”起来了我们称之为脱标了；

例如：标准流情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div.outer{
        width: 200px;
        height: 300px;
        border:1px solid red;
        margin: 30px auto;
    }
    div.outer div{
        width: 150px;
        height: 50px;
        background: skyblue;
    }
    p{
        width: 50px;
        height: 100px;
        background: purple;
        /* float: left; */
    }
    
   </style>
</head>
<body>
    <div class="outer">
        <p></p>
        <div class="box"></div>
    </div>
</body>
</html>

浮动后的非标准流：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div.outer{
        width: 200px;
        height: 300px;
        border:1px solid red;
        margin: 30px auto;
    }
    div.outer div{
        width: 150px;
        height: 50px;
        background: skyblue;
    }
    p{
        width: 50px;
        height: 100px;
        background: purple;
        float: left;
    }
    
   </style>
</head>
<body>
    <div class="outer">
        <p></p>
        <div class="box"></div>
    </div>
</body>
</html>

字围现象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div.outer{
        width: 200px;
        height: 300px;
        border:1px solid red;
        margin: 30px auto;
    }
    div.outer div{
        width: 150px;
        height: 200px;
        background: skyblue;
    }
    p{
        width: 50px;
        height: 100px;
        background: purple;
        float: left;
    }
    
   </style>
</head>
<body>
    <div class="outer">
        <p></p>
        <div class="box">我是测试验证，非标准流的情况怎么处理，看看这个流程是怎么个显式，被占用部分怎么处理的情况；</div>
    </div>
</body>
</html>

css清除浮动的影响上

清除浮动影响
标准流的盒子，如果不设置高度，会被内容自动撑高；
如果盒子内部的元素浮动了，子盒子脱标后，不能撑高父盒子
父盒子的高度会为0，会导致一些问题；
1）父盒子的高度不能被子元素撑高了；
2）如果父盒子后面还有其他兄弟标签，并且该兄弟标签内部也有浮动元素，前面的浮动会影响后面的贴边；
1代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 600px;
        border:red 5px solid;
    }
    div p{
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 5px;
        float: left;
    }
   </style>
</head>
<body>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
</body>
</html>

2代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    .div1{
        width: 1200px;
        border:red 5px solid;
    }
    .div2{
        width: 1200px;
        border:blue 5px solid;
    }
    .div1 p{
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 5px;
        float: left;
    }
    .div2 p{
        width: 100px;
        height: 100px;
        background-color: burlywood;
        margin: 5px;
        float: left;
    }
   </style>
</head>
<body>
   <div class="div1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
   <div class="div2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
</body>
</html>

根据以上两个问题，需要整理方案解决以上问题:

解决方案：

清除浮动方法一：height属性；

父盒子的高度不能被子盒子撑高，我们可以强制给父盒子设置一个高度，去管理内部的子元素；
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        height: 110px;
    }
    .div1{
        width: 1200px;
        border:red 5px solid;
    }
    .div2{
        width: 1200px;
        border:blue 5px solid;
    }
    .div1 p{
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 5px;
        float: left;
    }
    .div2 p{
        width: 100px;
        height: 100px;
        background-color: burlywood;
        margin: 5px;
        float: left;
    }
   </style>
</head>
<body>
   <div class="div1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
   <div class="div2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
</body>
</html>

缺点：父盒子的高度不可以随着子元素变高而增高，如果子盒子是动态的，父盒子还会出现原来的问题；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        height: 110px;
    }
    .div1{
        width: 1200px;
        border:red 5px solid;
    }
    .div2{
        width: 1200px;
        border:blue 5px solid;
    }
    .div1 p{
        width: 100px;
        height: 120px;
        background-color: aqua;
        margin: 5px;
        float: left;
    }
    .div2 p{
        width: 100px;
        height: 120px;
        background-color: burlywood;
        margin: 5px;
        float: left;
    }
   </style>
</head>
<body>
   <div class="div1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
   <div class="div2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
</body>
</html>

使用height属性清除浮动影响只适用于父子都是固定高度的；

清除浮动方法二：clear属性

css有个clear属性，专门清除浮动元素带来的影响；
属性值：
left：清除前面左浮动的影响；
right：清除前面右浮动的影响；
both：清除前面所有浮动的影响；

对盒子设置clear:both;

clear属性可以解决当前盒子的浮动影响；
缺点：父盒子还是不能被内部元素撑高，父盒子之间的margin显示有问题

清除浮动方法三：隔墙法；

方法：利用clear属性和height属性，制作一堵墙，将两个有浮动的元素父亲隔离起来；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    .div1{
        width: 1200px;
        border:red 5px solid;
    }
    .div2{
        width: 1200px;
        border:blue 5px solid;
    }
    .div1 p{
        width: 100px;
        height: 120px;
        background-color: aqua;
        margin: auto 5px;
        float: left;
    }
    .div2 p{
        width: 100px;
        height: 120px;
        background-color: burlywood;
        margin: auto 5px;
        float: left;
    }
    .div3{
        clear:both;
        height: 10px;
    }
   </style>
</head>
<body>
   <div class="div1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
   <div class="div3"></div>
   <div class="div2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
</body>
</html>

解决的问题：父元素位置稳定了，需要的上下间距也解决了；
缺点：子盒子还是不能撑满父盒子的高度；

清除浮动方法四-内墙发

就是将外墙放到具有浮动元素的同级的父级元素里面；
方法：通过隔墙法演变而来，将墙放在了两个受影响父元素内部，所有的子元素最后，设置一堵内墙法，设置属性clear属性；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    .div1{
        width: 1200px;
        border:red 5px solid;
    }
    .div2{
        width: 1200px;
        border:blue 5px solid;
    }
    .div1 p{
        width: 100px;
        height: 120px;
        background-color: aqua;
        margin: auto 5px;
        float: left;
    }
    .div2 p{
        width: 100px;
        height: 120px;
        background-color: burlywood;
        margin: auto 5px;
        float: left;
    }
    .div3{
        clear:both;
    }
   </style>
</head>
<body>
   <div class="div1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="div3"></div>
   </div>
   
   <div class="div2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="div3"></div>
   </div>
</body>
</html>

清除浮动影响的方法五-伪类

css选择器的一种（后面我们css3课程中会学习）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    .div1{
        width: 1200px;
        border:red 5px solid;
    }
    .div2{
        width: 1200px;
        border:blue 5px solid;
    }
    .div1 p{
        width: 100px;
        height: 120px;
        background-color: aqua;
        margin: auto 5px;
        float: left;
    }
    .div2 p{
        width: 100px;
        height: 120px;
        background-color: burlywood;
        margin: auto 5px;
        float: left;
    }
    .div3::after{
        content: '';
        height: 0;
        visibility: hidden; /* 设置为隐藏 */
        clear:both; /* 设置清除浮动影响 */
        display: block; /* 设置块级元素 */
    }
   </style>
</head>
<body>
   <div class="div1 div3">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
   
   <div class="div2 div3">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
</body>
</html>

清除浮动影响六-overflow

overflow属性清除浮动影响是一个小偏方，值必须是hidden，可以解决浮动的所用问题；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    .div1{
        width: 1200px;
        border:red 5px solid;
    }
    .div2{
        width: 1200px;
        border:blue 5px solid;
    }
    .div1 p{
        width: 100px;
        height: 120px;
        background-color: aqua;
        margin: auto 5px;
        float: left;
    }
    .div2 p{
        width: 100px;
        height: 120px;
        background-color: burlywood;
        margin: auto 5px;
        float: left;
    }
    .div3{
        overflow: hidden;
    }
   </style>
</head>
<body>
   <div class="div1 div3">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
   
   <div class="div2 div3">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
   </div>
</body>
</html>

通过overflow属性解决浮动影响的原因：overflow属性有BFC特性，BFC特性有一个特点，设置是该属性的元素就拥有被内部元素撑高的特点；
实际工作中，使用内墙法或者overflow属性去解决浮动的影响；

四、css-background属性

a标签的伪类

a标签的伪类概念
a标签可以根据用户的不同行为的触发，从而实现四种状态的样式，这四种状态是可以设置的，我们称这四种状态为伪类；

 a:link{
        color: red;
    }
    a:visited{
        color: blueviolet;
    }
    a:hover{
        color: goldenrod;
    }
    a:active{
        color: skyblue;
    }

其中：link表示访问前的状态
visited表示访问后的状态
hover表示鼠标悬停状态
active表示鼠标点击状态
普通元素，非超级链接，也可以设置伪类状态，此时只有两种状态使用，分别是hover和active
伪类选择器：规定一定要先设置好需要的选择器，推荐使用class类名，不会引起冲突，或者使用后代选择器精确匹配，以防打乱页面的布局状态；
伪类的权重和普通选择器的权重是一样的；

伪类的书写顺序
a标签有时有2-3个触发状态，一定按照书写顺序去执行；
书写顺序：link、visited、hover、active
所有的伪类中，最常用的是hover

实际应用
一个实际的页面中，为了保持页面的统一状态，此时会将a标签的访问前和访问后的状态进行统一设置；

可以设置任何属性；

background-color属性

background-color:green
作用：给盒子添加背景颜色；

背景颜色的覆盖范围：width、height、padding、border
属性值：颜色名、颜色值；
颜色值：rgb模式、十六进制模式、rgba模式；
rgba模式是rgb模式的一种拓展，拓展的是透明度，a(alpha)就代表的是透明度，取值(0-1)之间，0表示完全透明，1表示纯色；

background-image-背景图片
作用：给标签的盒子显示区域添加背景图片
渲染范围和背景颜色一样：width、height、padding、border
图片默认是有重复平铺状态的；
属性值：url(图片地址)
url是统一资源资源定位符，后面必须要跟一对小括号，括号内部是图片的引入地址，可以是相对路径和绝对路径；

background-repeat
如果不需要背景图进行重复渲染；
作用:设置背景图渲染状态；
根据属性值的不同，背景会显示三种状态；
repeat：背景重复渲染，默认值；
no-repeat：背景图片不进行重复渲染；
repeat-x：背景图片渲染水平线重复；
repeat-y：背景图片渲染垂直线重复渲染；

background-position-背景定位
作用：设置背景图（常用于设置不重复的背景图）在盒模型中的加载位置；
属性值：单词表示法、像素表示法、百分比表示法；
无论哪一种表示方法，都是两个值进行设置，中间用空格隔开；
第一个属性值：描述的是背景图在盒子中水平方向的位置；
第二个属性值：描述的是背景图在盒子中垂直方向的位置；

单词表示法：
两个属性都是使用单词表示定位的方向
第一个属性的可选值：left、center、right，分别表示图片在水平方向居左、居中、居右
第二个属性的可选值：top、center、bottom，分别表示图片在垂直方向居上、居中、居下
书写时，可以在两个方向中挑选进行组合；

像素表示法
背景定位的两个属性值是以px为单位的数值；
第一个属性值：表示水平方向，图片距离盒子左上角border以内的顶点距离；
第二个属性值：表示垂直方向，图片距离盒子左上角border以内的顶点距离；
像素值可以为负数；
正数：表示图片从左上顶点为参考点向右、下进行移动；
负数：表示图片从左上顶点为参考点向左、上进行移动；

百分比表示法：
百分表示法两个属性值都是百分比
水平方向 100%=（盒子的width）-图片的宽度
垂直方向100%=（盒子的height）-图片的高度

background-attachment--背景附着
attachment附着，附着物的意思；
作用：设置背景图是否随着页面滚动而滚动；
属性值：scroll 滚动的，默认值，表示会和页面一起滚动走；

属性值：fixed，表示是固定的，表示图片会固定在浏览器左上顶点，随着页面滚动图片会保持状态，不会向下滚动；

综合属性：
关于background六个单独属性组成一个综合属性；
属性值：可以为1-5个，值之间可以使用空格隔开，顺序可以颠倒；

五、css定位

定位
定位就是将盒模型按照指定位置加载；
相对定位不脱离标准流，绝对定位和固定定位是脱离标准流的；
position
作用：设置盒子针对某个参考元素进行位置偏移设置；
属性值：
relative: 相对定位
absolute: 绝对定位
fixed: 固定定位；

如果定位的元素想要发生位置偏移，必须搭配偏移量属性进行设置；
水平方向设置：left、right
垂直方向设置：top、bottom

相对定位
属性值：relative，相对的意思；
参考元素：自身盒子的原始位置；

相对的定位的性质：是不脱离标准流状态的，不会让出原始位置，盒子会在新的指定位置加载；

需要注意的是：
偏移量属性值是有正负之分的
正数：表示偏移方向和属性名正好相反；
负数：表示偏移方向和属性名正好相同；

在水平方向不能同时设置left和right属性，如果同时设置，只会加载left属性，垂直方向如果top和bottom同时设置，只会加载top属性；

提示：使用偏移量的时候，从水平和垂直方向各挑选出一个属性进行组合；

相对定位的参考位置是自身元素，此时就会有不同的参考点；
left、top：使用的是偏移之前的左上顶点作为参考点；
left、bottom：使用的偏移前的左下顶点作为参考点；
right、top：使用偏移前的右上顶点作为参考点；
right、bottom：使用偏移前的右下顶点作为参考点；

说明一下：后面这里没有机械能截图和代码只是进行了说明，后面在补上；

在说明一个：投资一定要把主动权拿在自己手上；

林梦梵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java程序员之-css基础

我睡了，你也睡了！　　我哭了，你却笑了！　　世界总是那么狭小，却突然变得那么大，那么小是因为我们相遇，突然变得那么大是因为世分两地！　　我想你，而你却没有那么想我，其实我不会太惆怅，因为你还不懂我！　　所以我笑了，你哭了！　　我笑了，是因为我太自恋了，以为你知道我的爱！　　你哭了，是因为我对于你重要了！　　如果我重要了，我还爱着你，那么就在一起吧！　　我笑了，你哭了！　　我高兴的笑了，你激动得哭了！　　如果你没有离开，怎么会发现我的存在！　　如果我毅然挽留，怎么会让你自由！ css根据使用场
复制链接

扫一扫