CSS基础篇

CoderXiong
102 阅读23分钟

CSS基础篇

1. CSS重要概念

CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

CSS的使用主要分为两步：

1、怎么找到标签（选择器）

2、如何操作标签对象（element）

1.1 CSS的4种引入方式

1、行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<p style="background-color: rebeccapurple">hello yuan</p>

2、嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3、链接式

将一个.css文件引入到HTML文件中，在<head></head>标签中引入 自闭合的link标签（rel 必须有表示是一个css文件格式，type属性可有可无），引入css文件数量没有限制

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

4、导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，标记也是写在标记中，使用的语

法如下，引入css文件数量有限

<style type="text/css">
	@import"mystyle.css"; 此处要注意.css文件的路径
</style>　

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。建议使用链接式、嵌入式

1.2 block元素和inline元素

  • block元素（也叫做块级元素）

block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。

block元素可以设置width、height、margin、padding属性；

  • inline元素（也叫做内联元素、行内元素）

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

  • 常见的块级元素举例

    • div
    • form
    • table
    • p
    • pre
    • h1～h5
    • dl
    • ol
    • ul

  • 常见的内联元素举例

    • span
    • a
    • strong
    • em
    • label
    • input
    • select
    • textarea
    • img
    • br

1.3 文档流

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

只有绝对定位absolute和浮动float才会脱离文档流

部分无视和完全无视的区别？

需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以

说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)

2. CSS选择器

“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

2.1 基础选择器

*  ：通用元素选择器，匹配任何元素                   
	* { margin:0; padding:0; }

E  ：标签选择器，匹配所有使用E标签的元素               
	p { color:green; }

.info 和 E.info: class选择器，匹配所有class属性中包含info的元素   

	.info { background:#ff0; }    
	p.info { background:blue; }
	div.weather1{}　　<div class="weather1">这是div标签</div>

#info和E#info  id选择器，匹配所有id属性等于footer的元素         
	#info { background:#ff0; }   
	p#info { background:#ff0; }

2.2 组合选择器

  • E,F : 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔

div,p { color:#f00; }

  • E F : 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

li a { font-weight:bold;

  • E > F 子元素选择器，匹配所有E元素的子元素F(只找直接子代)

div > p { color:#f00; }

  • E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

div + p { color:#f00; }

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1>p{
            background-color: aqua;
            color: deeppink;
        }

        .main2>div{
            background-color: blueviolet;
            color: chartreuse;
        }
    </style>
</head>
<body>

      <div class="div1">hello1
          <div class="div2">hello2
              <div>hello4</div>
              <p>hello5</p>
          </div>
          <p>hello3</p>
      </div>
      <p>hello6</p>

		<hr>

     <div class="main2">1
       <div>2
           <div>
           </div>
       </div>
       <div>
           </div>
     </div>
</body>
</html>

2.3 属性选择器

  • E[att]

匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）

p[title] { color:#f00; }

  • E[att=val]

匹配所有att属性等于“val”的E元素

div[class=”error”] { color:#f00; }

  • E[att~=val]

匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

td[class~=”name”] { color:#f00; }

  • E[attr^=val]

匹配属性值以指定值开头的每个元素

div[class^="test"]{background:#ffff00;}

  • E[attr$=val]

匹配属性值以指定值结尾的每个元素

div[class$="test"]{background:#ffff00;}

  • E[attr*=val]

匹配属性值中包含指定值的每个元素

div[class*="test"]{background:#ffff00;}

2.4 伪类组合选择器(Pseudo-classes)

CSS伪类是用来给选择器添加一些特殊效果。

**anchor伪类：**专用于控制链接的显示效果

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

格式: 标签:伪类名称{ css代码; }

伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

a:link {color: #FF0000} 	/* 未访问的链接 */

a:visited {color: #00FF00} 	/* 已访问的链接 */

a:hover {color: #FF00FF} 	/* 鼠标移动到链接上 */

a:active {color: #0000FF} 	/* 选定的链接 */

举例：

<style type="text/css">
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }
</style>
</head>
<body>
    <a href="01-hello-world.html">hello-world</a>
</body>
</html>

before after伪类 ：

:before

p:before 在每个

元素之前插入内容

:after

p:after 在每个

元素之后插入内容

p:before{content:"hello";color:red}

p:after{ content:"hello"；color:red}

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer:hover .right{color: red}
    </style>
</head>
<body>
<div class="outer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>

2.5 CSS优先级

CSS优先级:

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
      1 内联样式表的权值最高       style=""  -------------------1000；
　　 2 统计选择符中的ID属性个数。    #id      －－－－－－－－－－－－－100
　　3 统计选择符中的CLASS属性个数。 .class    －－－－－－－－－－－－－10
 4 统计选择符中的HTML标签名个数。     p       －－－－－－－－－－－－－-1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

举例：

<style>
    #p{
        color: rebeccapurple;
    }
    .p{
        color: #2459a2;
    }
    p{
        color: yellow;
    }
</style>
<p id="p" class="p" style="color: deeppink">hello yuan</p>

2.6 CSS的继承性

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用

于它的后代。例如一个 body标签 定义了的color颜色值也会应用到段落的文本中（如果在它的子标签中没有再定义color）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            color: red;
        }
        div{
            color: green;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>

这段文字都继承了由body {color:red;}样式定义的颜色。

然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

上述例子中div标签文字颜色最终为 green

此外，继承是CSS重要的一部分，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

div{
  border:1px solid #222
}

<div>hello 
    <p>yuan</p> 
</div>

附加说明:

文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。

  • 有 !important 声明的规则高于一切。
  • 如果 !important 声明冲突，则比较优先权。
  • 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
  • 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

3. CSS的常用属性

3.1 颜色属性style

<div style="color:blueviolet">ppppp</div>
 
<div style="color:#ffee33">ppppp</div>
 
<div style="color:rgb(255,0,0)">ppppp</div>
 
<div style="color:rgba(255,0,0,0.5)">ppppp</div>

3.2 字体属性font

font-size: 20px/50%/larger
 
font-family:'Lucida Bright'
 
font-weight: lighter/bold/border/
 
<h1 style="font-style: oblique">老男孩</h1>

3.3 背景属性backgroud

developer.mozilla.org/zh-CN/docs/…

语法：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
值说明CSS
background-color指定要使用的背景颜色1
background-position指定背景图像的位置1
background-size指定背景图片的大小3
background-repeat指定如何重复背景图像1
background-origin指定背景图像的定位区域3
background-clip指定背景图像的绘画区域3
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1
background-image指定要使用的一个或多个背景图像1

示例：

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

#简写：
<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；

另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。

举例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background-color: antiquewhite;
            
        }
        body{
            width: 100px;
            height: 600px;
            background-color: deeppink;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>

</body>
</html>

举例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        span{
            display: inline-block;
            width: 18px;
            height: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 -100px;
        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>

3.4 文本属性

font-size: 10px;

text-align: center;   横向排列

line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效


text-indent: 150px;   首行缩进
letter-spacing: 10px;　　　　　　//文字间距
word-spacing: 20px;
text-transform: capitalize;　　首字母大写

思考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer .item {
            width: 300px;
            height: 200px;
            background-color: chartreuse;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="item" style="vertical-align: top">ll</div>
        <div class="item"></div>
    </div>
</body>
</html>

3.5 边框属性border

border-style: solid;
 
border-color: chartreuse;
 
border-width: 20px;
 
简写：border: 5px solid red;　　边框5像素 实线 红色

#控制框左边线类型
border-left-width: 5px;
border-left-style: dashed;
border-left-color: blue;　

3.6 列表属性ul

ul,ol{   
    list-style: decimal-leading-zero;    以0x开头的数字
    list-style: decimal;      数字1 2 3 ...
    list-style: none;    li前面啥都不显示
　　 list-style: circle;   li前面显示空心小圆圈
    list-style: upper-alpha;   A B C D ...
    list-style: disc; }      实心黑圆圈
}

3.7 dispaly属性

  • none
  • block
  • inline
  • inline-block
  • inherit

重点！flex(弹性布局)

display:inline-block 可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：

#outer{
	border: 3px dashed;
	word-spacing: -5px;
}

3.8 外边距和内边距

  • margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
  • padding: 用于控制内容与边框之间的距离；
  • Border(边框) 围绕在内边距和内容外的边框。
  • Content(内容) 盒子的内容，显示文本和图像。

元素的宽度和高度:

重要:

当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下  右左
margin:10px;    ---------------------上右下左

下面的例子中的元素的总宽度为300px：

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

练习： 300px300px的盒子装着100px100px的盒子，分别通过margin和padding设置将小盒子 移到大盒子的中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
           <div class="div2"></div>
       </div>
</body>
</html>

思考1:

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

>>>>解决方法：

body{
    margin: 0;
}

思考2：

margin collapse（边界塌陷或者说边界重叠）

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段 落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。又比如停车场

兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

父子div

​ if 父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content 中的其中一个，然后按此div 进行margin ；

4. float属性

1.3 浮动的表现

m.php.cn/article/477…

什么是浮动（float)？

浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）

浮动（float)语法

float:left或者right或者none或者inherit;

left：让元素向左浮动

right：让元素向右浮动

none：让元素不浮动

inherit：让元素从父级继承浮动属性

浮动的特性

1.支持所有的css样式

2.内容撑开宽高

3.多个元素设置浮动，会排在一排

4.脱离文档流

5.提升层级半级

也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围

注意：不管是什么属性的元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素

浮动的具体表现

1、如果三个元素为block元素，在未设置浮动前

<!--html样式：-->
<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>

<!--css样式为：-->
.class1{width:100px;height:100px;background:palegreen;}

.class2{width:120px;height:130px;background:gold;}

.class3{width:160px;height:180px;background:red;}

浏览器显示的结果为：

image-20220613200607098.png

如果给第一个元素设置向左浮动：

<!--html样式：-->
<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>

<!--css样式为：-->
.class1{width:100px;height:100px;background:palegreen;float:left;}

.class2{width:120px;height:130px;background:gold;}

.class3{width:160px;height:180px;background:red;}

浏览器显示的结果为：

image-20220613200705230.png

结论：

1）没有设置浮动的元素会填充浮动元素留下来的空间

2）浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面

3）使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围

2、如果一个块级元素和一个行内元素（或者是一个内敛块级元素）

<!--html样式：-->
<div class="a">我是块级元素，没有设置float</div>
<span class="b">我是行内元素，没有设置float</span>

<!--css样式为：-->
.a{width:320px;height:230px;background:gold;}

.b{background:red;}

浏览器显示的结果为：

image-20220613200834502.png

如果给第一个元素设置向左浮动：

<div class="a">我是块级元素，没有设置float</div>
<span class="b">我是行内元素，没有设置float</span>

.a{width:320px; height:230px; background:gold;float:left;}
.b{background:red;}

浏览器显示的结果为：

img

结论；

后面的元素会紧跟在前面的元素后面，且后面的元素会根据自身元素的特点来决定是否需要换行

3、如果前面的元素为行内元素，后面的为块级元素

<span class="c">我是行内元素，没有设置float</span>
<div class="d">我是块级元素,没有设置float</div>

.c{width:320px;height:230px;background:gold;}

.d{width:350px;height:280px;background:red;}

浏览器显示的结果为：

img

如果给第一个元素设置浮动

<span class="c">我是行内元素，并且设置float</span>
<div class="d">我是块级元素,没有设置float</div>

.c{width:320px; height:230px; background:gold;float:left;}
.d{width:350px; height:280px;background:red;}

浏览器显示的结果为：

img

总结：

1）行内元素设置了浮动，该元素则变成了内敛块级标签，可以设置宽高

2）脱离了文档流，原有的空间被后面没有设置浮动的元素占据

4、如果两个都是行内标签

<span class="e">我是行内元素，没有设置float</span>
<span class="f">我是行内元素，没有设置float</span>

.e{width:320px;height:230px;background:gold;}
.f{width:350px;height:280px;background:red;}

浏览器显示的结果为：

img

如果给第一个设置了浮动：

<span class="e">我是行内元素，且设置了float</span>
<span class="f">我是行内元素，没有设置float</span>

.e{width:320px; height:230px; background:gold;float:left;}
.f{width:350px; height:280px;background:red;}

浏览器显示的结果为：

img

总结：

后面的元素会紧跟在前面元素的后面，后面的元素会根据自身元素的特点来决定是否需要换行

浮动的具体细节

1）浮动元素不会在其浮动方向上溢出父级的包含块

也就是说元素左浮动，其左外边距不会超过父级的左内边距，元素右浮动，其右外边距不会超过父级的右内边距

2）浮动元素的位置受到同级同向浮动元素的影响

也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面

<div id="wrap2">
   <div class="class1"></div>
   <div class="class2"></div>
   <div class="class3"></div>
   <div class="class4"></div>
</div>

#wrap2{width:550px;height:600px;border:3pxsolid red;}
.class1{width:200px;height:400px;background: blue;float:left;}
.class2{width:200px;height:200px;background: yellow;float:left;}
.class3{width:200px;height:200px;background: fuchsia;float:left;}
.class4{width:200px;height:200px;background: chartreuse;float:left;}

3）浮动元素不会与不同方向的浮动元素相重叠

4）如果父级中的浮动元素的高度大于父级的高度，则该浮动元素会溢出该父级元素

<p id="wrap3">
   <p class="class5"></p>
   <p class="class6"></p>
   <p class="class7"></p>
   <p class="class8"></p>
</p>

#wrap3{width:350px;height:600px;border:3pxsolid red;}
.class5{width:200px;height:200px;background: blue;float:left;}
.class6{width:200px;height:200px;background: yellow;float:right;}
.class7{width:200px;height:200px;background: fuchsia;float:left;}
.class8{width:200px;height:200px;background: chartreuse;float:right;}

清除浮动

blog.csdn.net/weixin_4363…

为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

举例如下:

给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。

在这里插入图片描述

当我给内部两个盒子加上float属性的时候

底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了

在这里插入图片描述

清除浮动的方法（最常用的4种）

（1）额外标签法：给谁清除浮动，就在其后额外添加一个空白标签

优点：通俗易懂，书写方便。（不推荐使用） 缺点：添加许多无意义的标签，结构化比较差。

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>

.clear{
        clear:both;
    }

（2）父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点： 简单、代码少、浏览器支持好

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）

(3）使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点： 由于IE6-7不支持：after，使用zoom：1

在这里插入图片描述

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

（4）使用before和after双伪元素清除浮动：（较常用推荐）**

在这里插入图片描述

<style>
    .father{
        border: 1px solid black;
        *zoom: 1;
    }
    .clearfix:after,.clearfix:before{
        content: "";
        display: block;
        clear: both;
    }
    .big ,.small{
        width: 200px;
        height: 200px;
        float: left;
    }
    .big{
        background-color: red;
    }
    .small{
        background-color: blue;
    }
</style>

<div class="father clearfix">
    <div class="big">big</div>
    <div class="small">small</div>
</div>
<div class="footer"></div>

优点：代码更简洁

5. position(定位)

position有5个值，分别为 static，relative，absolute，fixed，sticky

static

static是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响。

relative

relative相对定位的元素会较正常文档流中的位置进行偏移，受top，bottom，left，right的影响。就是元素还在文档流中像static一样占着位置，但视觉上会有偏移，多用于absolute绝对定位的父元素。

absolute绝对定位

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位父元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

fixed

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而

其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知

识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

sticky

sticky粘性定位需要指定 top，right，bottom，left 四个阈值其中之一才会生效。

阈值为此元素在可视区域中与边界的距离，跨越特定阈值前为相对定位（relative），当页面滚动导致此元素跨越阈值则变为固定定位（absolute）。 注：此属性兼容性不是特别好，请根据业务场景进行选择。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <div>title</div>
    <div class="stickyBar">stickyBar</div>
    <p>this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a
        paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a
        paragraph!this is a paragraph!this is a paragraph!this is a paragraph!</p>
</div>
</body>
</html>
<style>
    div.box {
        height: 2000px;
    }

    div.stickyBar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 5px;
        background-color: #cae8ca;
        border: 2px solid #4CAF50;
        width: 200px;
    }

    div p {
        width: 200px;
    }
</style>

效果：

GIF 2022-6-13 20-31-13.gif

6. flex布局

www.ruanyifeng.com/blog/2015/0…

语法

父级：
    display:flex;
(兼容绝大部分浏览器)：-webkit-     真实工作下使用postCss插件-自动添加浏览器兼容
display: -webkit-flex; /* Safari */
display: flex;
*如果使用了弹性布局，子元素不需要使用浮动float

父级身上的常用属性：
    justify-content：    子元素水平排列
        flex-start（默认）    从左开始
        flex-end    从右开始
        center    居中！！
        space-between    两端对齐
        space-around    子元素张开手分布
    
    align-items        子元素垂直排列
        flex-start（默认）    从上开始
        flex-end    从下开始
        center    居中！！
        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
        baseline: 项目的第一行文字的基线对齐
    
    align-content        多行子元素垂直排列
        flex-start：        与交叉轴的起点对齐。
        flex-end：            与交叉轴的终点对齐。
        center：            与交叉轴的中点对齐。    
        space-between：     与交叉轴两端对齐，轴线之间的间隔平均分布。
        space-around：        每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
        stretch（默认值）：    轴线占满整个交叉轴。
    
    flex-flow（基本不用，面试可能会提到）    
        flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
        flex-flow: <flex-direction> <flex-wrap>;
        举例：flex-flow:column wrap;
    
    flex-direction    子元素排列方向
        row（默认值）：主轴为水平方向，起点在左端。
        row-reverse：主轴为水平方向，起点在右端。
        column：主轴为垂直方向，起点在上沿。
        column-reverse：主轴为垂直方向，起点在下沿。
        
    flex-wrap        子元素一行排不下如何换行
        nowrap（默认）：不换行
        wrap：换行，第一行在上方
        wrap-reverse：换行，第一行在下方
        
子集身上的属性：
    flex    是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
        将行分为定义比例的几份
        *子元素在划分父元素宽度，先刨除固定宽度
    
    align-self        允许单个子元素有与其他项目不一样的垂直对齐方式，可覆盖align-items属性
        .item {
            align-self: auto | flex-start | flex-end | center | baseline | stretch;
                }
        
    flex-grow        定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大
        .item {
            flex-grow: <number>;     /* default 0 */        <number>只代表缩放系数
                }
                
    order        定义子元素的排列顺序。数值越小，排列越靠前，默认为0
        .item {
              order: <integer>;
            }

案例

举例1：均匀排列的按钮

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局案例-淘宝底部导航栏</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .footer-nav{
            width: 100%;
            height: 60px;
            background-color: grey;
            display: flex;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .footer-nav .tab{
            width: 20%;
            box-sizing: border-box;
            border-left: 1px solid red;
            flex: 1;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            color: white;
        }
        .footer-nav .tab .tab-icon{
           height: 30%;
        }
    </style>
</head>
<body>
<div class="footer-box">
<div class="footer-nav">
    <span class="tab">
        <span class="tab-icon glyphicon glyphicon-home"></span>
        <p class="text">首页</p>
    </span>
    <span class="tab">
        <span class="tab-icon glyphicon glyphicon-shopping-cart"></span>
        <p class="text">购物车</p>
    </span>
    <span class="tab">
        <span class="tab-icon glyphicon glyphicon-list-alt"></span>
        <p class="text">订单列表</p>
    </span>
    <span class="tab">
        <span class="tab-icon glyphicon glyphicon-user"></span>
        <p class="text">我的淘宝</p>
    </span>
    <span class="tab">
        <span class="tab-icon glyphicon glyphicon-option-horizontal"></span>
        <p class="text">更多</p>
    </span>
    <span class="tab">
        <span class="tab-icon glyphicon glyphicon-grain"></span>
        <p class="text">欢度清明</p>
    </span>
</div>
</div>
</body>
</html>

举例2：弹性均匀排布的网格

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/flex-1.css">
    <style>
        *{
    margin: 0;
    padding: 0;
    list-style: none;
}
.outer{
    width: 500px;
    height: 500px;
    border: 1px solid red;
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
}
.item{
    width: 125px;
    border: 1px solid #ff1bbe;
    background-color: #0D47A1;
    height: 125px;
    box-sizing: border-box;
    font-size: 32px;
    color: white;
    line-height: 125px;
    text-align: center;
    align-content: flex-start;
}
    </style>
</head>
<body>
    <div class="outer">
        <div class="item div1">1</div>
        <div class="item div2">2</div>
        <div class="item div3">3</div>
        <div class="item div4">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>
</body>
</html>

举例3：

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .outer {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 30px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .item {
            border: 1px solid #ff1bbe;
            background-color: #0D47A1;
            height: 125px;
            box-sizing: border-box;
            font-size: 32px;
            color: white;
            line-height: 125px;
            text-align: center;
        }
        .div1{width: 80px}
        .div2{flex: 1}
        .div3{flex: 2}
    </style>
</head>
<body>
    <div class="outer">
        <div class="item div1">1</div>
        <div class="item div2">2</div>
        <div class="item div3">3</div>

    </div>
</body>
</html>

7.Grid 网格布局

www.ruanyifeng.com/blog/2019/0…

8. 经验之谈

8.1 一行文字超出部分显示省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
avatar
文章
阅读
粉丝