单词类型
属性值说明normal默认值，定义标准的字体bold定义粗体字体，b、strong标签的默认值bolder定义更粗的字体light定义更细的字体 .p1 { font-weight: normal; } .p2 { font-weight: bold; } .p3 { font-weight: bolder; } .p4 { font-weight: lighter; } <p class="p1"> 标准的字体，默认的字体 </p> <p class="p2"> 粗体 </p> <p class="p3"> 更粗的文字 </p> <p class="p4"> 细体 </p> <b> 这是 b 标签的默认文字 </b> <br> <strong> 这是 strong 标签的默认文字 </strong>数字类型
100-900 之间的整百数字数字越大，文字显示越粗其中 400 等价于 normal，700 等价于 bold .p1 { font-weight: 400; } .p2 { font-weight: 700; }最常用的是 normal、bold 两个字体
属性值
属性值说明normal设置正规的字体，大多数标签的默认值italic设置斜体的文字，主要针对为英文、要求英文以字体中的斜体样式显示oblique设置倾斜的文字，知识将文字倾斜显示，与字体无关 .p1 { font-style: normal; } .p2 { font-style: italic; } .p3 { font-style: oblique; }实际应用中，更多的斜体效果习惯使用 italic 属性值
**属性值属性值
属性值说明px 的像素设置的行高的具体像素值百分比值设置的本身字号像素值的百分比 div{ font-size: 14px; /* 设置文字的行高 */ /* line-height: 26px; line-height: 200%; */ }写法1
font 进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序 p { font: 16px "楷体"; }写法2
font 属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用 / 进行分隔 p { font: 16px / 32px "楷体"; }写法三
如果 font 属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能更改位置 p { font: italic bold 16px / 32px "楷体"; }属性值
属性值left居左对齐，大部分标签的默认值center居中对齐right居右对齐 p { width: 300px; height: 100px; background-color: aqua; } .p1 { text-align: left; } .p2 { text-align: center; } .p3 { text-align: right; } <p class="p1"> 这是一段居左文字 </p> <p class="p2"> 这是一段居中文字 </p> <p class="p3"> 这是一段居右文字 </p>属性值
属性值说明none没有修饰，大部分标签的默认值overline上划线line-through中划线、删除线，<del>标签的默认值underline下划线，<a> 标签的默认值 .none { text-decoration: none; } .overline { text-decoration: overline; } .through { text-decoration: line-through; } .underline { text-decoration: underline; } <p class="none"> 没有修饰 </p> <p class="overline"> 上划线 </p> <p class="through"> 删除线 </p> <p class="underline"> 下划线 </p> <del> del 标签 </del> <br> <a href=""> a 标签 </a> <br> <a href="" style="text-decoration: none;"> 去掉 a 标签的下划线 </a>属性值
属性值说明auto默认值，浏览器可计算出实际的高度px像素定义的高度百分比(%)定义参考父级元素宽度 height 的百分比高度实际工作中，最长使用 em 为单位的属性值。 属性值区分正负，正数表示向右缩进，负数表示向左缩进
div { width: 300px; height: 200px; background-color: aqua; } .p1 { text-indent: 30px; } .p2 { text-indent: 2em; } .p3 { text-indent: 20%; } .p4 { text-indent: -30px; }常见盒模型区域
盒模型的属性中，根据不同属性的效果，可以划分区域：
书写元素内容区域：width + height盒子可以实体化的区域：width + height + padding + border盒子实际占位的位置：width + height + padding + border + margin盒模型图
学会查看浏览器控制台中的盒模型图 (浏览器 F12 打开控制台)
属性值
属性值说明auto默认值，浏览器可计算出实际的宽度px像素定义的宽度百分比（%）定义参考父级元素宽度 width 的百分比宽度 .box { width: 300px; background-color: coral; } .p1 { width: 150px; background-color: darkturquoise; } .p2 { width: 40%; background-color: deepskyblue; } <div class="box"> <p class="p1"> px 定义的宽度 </p> <p class="p2"> % 定义的宽度 </p> </div>特殊应用
如果一个元素不添加 width 属性，默认属性值为 auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如 <div> 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域，如果是 <span> 元素等不需要独占一行的，其 width属性的值是内部元素内容自动撑开的宽度<body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度 .box { width: 300px; height: 200px; background-color: coral; } .p1 { background-color: darkturquoise; } .s { background-color: deepskyblue; } <div class="box"> <p class="p1"> 不定义宽度撑满 </p> <span class="s"> 文字有多少就有多大 </span> </div>属性值
属性值说明auto默认值，浏览器可计算出实际的高度px像素定义的高度百分比（%）定义参考父级元素宽度 width 的百分比高度 .box { /* 宽度 */ width: 300px; /* 高度 */ height: 200px; background-color: coral; } .p1 { width: 150px; height: 100px ; background-color: darkturquoise; } .p2 { height: 30%; background-color: deepskyblue; }特殊应用
如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度单一属性
书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左
.p1 { width: 150px; height: 100px ; background-color: darkturquoise; padding-top: 20px; padding-right: 30px; padding-bottom: 40px; padding-left: 50px; }简写
有时为了化简书写，一般习惯将四个方向的单一属性进行合写成 padding 属性
padding 属性值：可以有 1- 4 个值，值之间用空格进行分隔，根据四个方向属性值不同，padding 有多种值的书写表示方法，根据 padding 的属性值的个数不同，区分了四种表示法:
四值法
设置四个属性值，分配方向上、右、下、左 .p1 { padding: 20px 30px 40px 50px; }三值法
设置三个值分配给上、左右、下 .p1 { padding: 20px 30px 50px; }二值法
设置两个值，分配给上下、左右 .p1 { padding: 20px 50px; }单值法
设置属性值只有一个，分配方向上右下左，四边的值相同 .p1 { padding: 20px; }案例
制作三边内边距相同，一边不同
方法1：使用四值法、三值法，进行属性值设置 .p1 { /* padding: 10px 10px 10px 20px; */ padding: 10px 10px 20px; } 方法2：利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现单一属性层叠综合属性的一部分 .p1 { padding: 10px; padding-left: 20px; }其中第二种用法更加灵活，推荐使用，使用过程中注意书写顺序，单一属性必须书写在后，才能层叠掉综合属性中重复的部分
按照属性值的类型划分
线宽：border-width
作用：设置边框线的宽度属性值：常用 px 形式的数值，四个方向都有边框，属性值类似于 .box{ border-width: 10px 20px 30px 40px; }线型：border-style
作用：设置边框的线条形状属性值：形状的单词，总体也是类似 padding 的综合属性写法属性值的单词可能性: 属性值说明none定义无边框solid定义实线dashed定义虚线，在大多数浏览器中呈现为实线dotted定义点状边框，在大多数浏览器中呈现为实现double定义双线，双线的宽度等于 border-width 的值groove定义 3D 凹槽边框，效果取决于 border-color 的值ridge定义 3D 垄状边框，效果取决于 border-color 的值inset定义 3D 内容凹陷边框，效果取决于 border-color 的值outset定义 3D 内容凸出边框，效果取决于 border-color 的值border-style: dashed;颜色：border-color
作用：设置边框的颜色属性值：颜色名或颜色值，整体类似 padding 综合属性写法 .box { /* 宽度 */ width: 300px; /* 高度 */ height: 200px; background-color: coral; border: 10px solid red; border-style: dashed none solid dotted; border-color: sandybrown blue red orange; }根据边框的方向划分
上边框：border-top右边框：border-right下边框：border-bottom左边框：border-left每个单一属性都必须与复合属性 border 一致，设置三个属性值 .box { /* 宽度 */ width: 300px; /* 高度 */ height: 200px; background-color: coral; border-top: 10px solid red; border-right: 10px solid blue; }根据方向和类型，进一步细分
类似 border-top 的单一方向属性，也可以根据属性值类型继续进行单一属性划分单一属性写法：border - 方向 - 类型注意：细分时必须先写方向划分再写类型划分，否则属性名错误 .box { /* 宽度 */ width: 300px; /* 高度 */ height: 200px; background-color: coral; border: 10px solid red; border-top-color: darkgreen; }大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响, 为了避免默认样式对整体布局效果造成影响，一定要清除默认样式
盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除
ul 和 ol 两种列表有默认的列表前缀：清除 list–style 属性
a 标签的默认样式，顺带设置页面中常用的a的公共样式：设置 color 和 text- decoration
清除默认加粗效果：设置font-weight
* { margin: 0; padding: 0; } ul { list-style: none; /* 清除列表前边的 点 */ } a { color: red; text-decoration: none; /* 清除超级链接的下划线 */ } h1,h2,h6,b { font-weight: normal; /* 清除默认加粗效果 */ } <div> 这是 div </div> <h1> 这是一级标题 </h1> <h2> 这是一级标题 </h2> <p> 这是一个段落 </p> <ul> <li>列表1</li> <li>列表2</li> </ul> <a href="https://www.lagou.com/"> 拉勾网 </a> 还可以给 <body> 标签设置整体文字样式，让大部分后代标签全部去继承 /* 公共样式 */ body { color: orange; font-size: 24px; font-family: "楷体"; }必须设置高度
设计图中盒子高度占位是固定的，后面同级元素在高度下面加载自身盒子内部内容过多会溢出盒子区域 div { width: 200px; height: 200px; border: 5px solid red; }overflow 属性
设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置 属性值说明visible默认值，可见的可视的，溢出部分显示的hidden溢出部分直接隐藏，隐藏超过边框范围的内容scroll溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条auto自动的，如果没有溢出就正常显示，如果有溢出，溢出方向出现滚动条 div { width: 200px; height: 200px; border: 5px solid red; overflow: auto; /* 溢出自动出现滚动条 */ }必须不设置高度
要求盒子高度必须自适应内部内容的高度，或者设置 height 的属性值是自动的 div { width: 200px; height: auto; /* 高度根据文本自适应 */ border: 5px solid red; }文本水平居中
水平居中：text-align属性，不论单行或多行都可以设置 div { width: 200px; height: 200px; border: 5px solid red; /* 边框 */ text-align: center; /* 水平居中 */ }文本垂直居中
单行文本垂直居中：让文字行高 line-height 等于盒子高度 height div { width: 200px; height: 200px; border: 5px solid red; /* 边框 */ text-align: center; /* 水平居中 */ line-height: 200px; /* 单行文本垂直居中 */ } 多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同 div { width: 200px; border: 5px solid red; /* 边框 */ text-align: center; /* 水平居中 */ padding: 20px 0; }元素垂直居中
一个元素内部嵌套的子元素，在父元素中居中垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距 .box { width: 200px; border: 1px solid red; padding: 20px 0; } .demo { background-color: orange; width: 100px; height: 100px; }元素水平居中
针对类似 <div> 样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中 .box { width: 200px; border: 1px solid red; padding: 20px 0; } .demo { background-color: orange; width: 100px; height: 100px; margin: 0 auto; }示例
.box { width: 500px; border: 1px solid red; padding: 20px 0; } .demo { background-color: orange; width: 400px; /* height: 100px; */ padding: 20px 0; margin: 0 auto; text-align: center; } <div class="box"> <div class="demo"> 水平和垂直居中 </div> </div>错误示例
*{ margin: 0; padding: 0; } .box { margin-left: 50px; margin-top: 50px; width: 600px; height: 100px; /* 边框 */ border: 1px solid red; } .box p { float: left; /* 向左浮动， 先做测试用 */ background-color: salmon; width: 200px; height: 100px; /* 右边距 */ margin-right: 10px; } .box2 { float: left; width: 200px; height: 200px; border: 5px solid red; } .box2 p { width: 200px; height: 200px; border: 5px dashed blue; } <div class="box"> <p> 1 </p> <p> 2 </p> <p> 3 </p> </div> <div class="box2"> <p> 5 </p> </div>解决方法
计算或量取尺寸时一定要计算准确，一像素都不能偏差特殊情况
父子盒模型中，只有一个子元素，且子元素是类似 <div> 标签必须占一行的不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸子元素所有的水平方向的位置所有属性的加和等于父元素的 width .box2 p { /* width: 190px; */ height: 190px; border: 5px dashed blue; }同级元素塌陷
上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值 *{ margin: 0; padding: 0; } .box1 { width: 100px; height: 100px; background-color: blue; margin-bottom: 50px; /* 向下间距 */ } .box2 { width: 100px; height: 100px; background-color: burlywood; margin-top: 100px; /* 向上间距 */ }父子元素塌陷
父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷 .box3 { width: 100px; height: 100px; background-color: burlywood; margin-top: 100px; /* 向上间距 */ } .box3 p { margin-top: 30px; width: 40px; height: 40px; background-color: darkcyan; } 本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来 .box3 { width: 100px; height: 100px; background-color: burlywood; } .box3 p { margin-top: 30px; width: 40px; height: 40px; background-color: darkcyan; }解决 margin 塌陷问题的方法
同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分 .box1 { width: 100px; height: 100px; background-color: blue; /* margin-bottom: 50px; 向下间距 */ margin-bottom: 100px; } .box2 { width: 100px; height: 100px; background-color: burlywood; /*margin-top: 100px; 向上间距 */ } 父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开，更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来 .box3 { width: 100px; height: 70px; background-color: burlywood; padding-top: 30px; margin-top: 100px; /* 向上间距 */ } .box3 p { /* margin-top: 30px; */ width: 40px; height: 40px; background-color: darkcyan; }另外注意：水平方向的 margin 没有塌陷现象
标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化
HTML就是一种标准文档流文件
HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级
理解标准文档流的特点
微观现象元素等级微观现象
空白折叠现象文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果 <span> 这是一段文字 </span> <a href=""> 超级链接 </a> <input type="text" name="" id=""> <img src="lagou_small.jpg" alt=""> 自动换行，元素内一行内容写满元素的 width 时会自动进行换行 /*设置一个 div 框 把内容放在一个固定的宽度中以便观察*/ div { width: 200px; border: 1px solid red; }元素等级
在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。块级元素：大部分容器级标签包括 p 标签都是块级元素，比如 <div> 、<h1> 等行内元素：大部分的文本级标签，比如 <span>、<a>、<b> 等行内块元素：比如 <img>、<input> 等各种等级的元素有自己的加载特点块级元素
块级元素可以设置宽高，在浏览器中正常加载块级元素必须独占一行，不能与其他任何标签并排一行块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度行内元素
行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题行内元素可以与其他的行内或行内块元素并排一行显示行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开 div { width: 200px; border: 1px solid red; } span { width: 200px; height: 50PX; background-color: salmon; border: 2PX solid red; padding: 10px; margin: 10px; }行内块元素
行内块元素可以设置宽度和高度行内块元素可以与其他的行内或行内块并排一行显示行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开行内块依旧具有标准流的微观性质，例如空白折叠现象 .imgl { width: 50px; height: 50px; } <input type="button" value=""> <input type="button" value="普通按钮"> <img src="lagou_small.jpg" alt="" class="imgl">属性值
属性值作用block表示元素要以块级元素模式加载，具备块级特点inline表示元素要以行内元素模式加载，具备行内特点inline-block表示标签要以行内快模式加载，具备行内块特点none表示标签及内部内容直接隐藏，让出原有标准流的位置 div, span { width: 200px; height: 100px; } div { background-color: rosybrown; } span { background-color: sandybrown; } .s1 { display: block; } .box2 { display: inline; } .s2 { display: block; } .box3, .s3 { display: inline-block; } .box4 { display: none; }脱离标准流
display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位示例图
注：中间的间隙是设置了 margin，以便于更好的观察
浮动的元素脱离标准流
标准文档流特点：区分行块 块级元素：可以设置宽高，必须独占一行行内元素：不能设置宽高，可以并排一行 浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开浮动的元素依次贴边
浮动属性值：left、right
浮动方向设置不同，进行布局时，加载位置方向不同
以 left 为例
父元素宽度足够，所有子元素会按照 HTML 书写顺序，依次向左进行贴边，父元素左边 ← 子元素 1 ← 子元素 2 ← 子元素 3 ← 子元素 4 * { margin: 0; padding: 0; } .box { width: 400px; height: 200px; border: 1px solid #000; /* 设置这两个是留点间隙方便截图 */ margin-left: 20px; margin-top: 20px; } .box p { float: left; width: 100px; height: 100px; } .box .p1 { background-color:red; } .box .p2 { background-color: royalblue; } .box .p3 { background-color: slateblue; } .box .p4 { background-color: tomato; }父元素宽度如果不够，例如不能放下一个子元素 4，那么子元素 4 在贴边时，会跳过上一个子元素 3，向更上一个子元素 2 进行贴边，如果子元素 2 后面位置不够，继续跳过子元素 2 向前面的子元素 1 进行贴边
如果子元素 4 在跳过子元素 3 向更前面的子元素 2 贴边时，子元素 2 的高度不高于子元素 3，子元素 2 没有延伸出一个高度的边让子元素 4 贴边，那么子元素 4 就会跳过子元素 2 向子元素 1 进行贴边 如果贴边的这个子元素 4 宽度小于子元素 2，子元素 2 的高度低于子元素 1和子元素 3，形成一个凹陷，子元素 4 会受前面子元素 3 高度影响，不会出现钻空现象 如果子元素 1 后面的距离也放不下子元素 4，子元素 4 最终会贴到父元素左边，如果子元素 4 的宽度超过了父元素，只会出现溢出现象右浮动与左浮动贴边效果是一致的，只是贴边方向不同，按照 HTML 书写顺序依次向右向上一个元素贴边，第一个元素贴父元素的右边
案例：利用浮动依次贴边的性质，用列表结构模拟平均分布的表格布局结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 案例 </title> <style> * { margin: 0; padding: 0; } ul { /* 清除前缀 点 */ list-style: none; width: 408px; height: 156px; padding-top: 2px; padding-left: 2px; background-color: #000; } ul li { float: left; width: 100px; height: 50px; margin-right: 2px; margin-bottom: 2px; background-color: royalblue; } </style> </head> <body> <ul> <li>👈1</li><li>👈2</li><li>👈3</li><li>👈4</li><li>👈5</li><li>👈6</li> <li>👈7</li><li>👈8</li> <li>👈9</li><li>👈10</li><li>👈11</li><li>👈12</li> </ul> </body> </html>边框效果是通过调适间距进行实现
注意：同一个盒子中，可以有左浮动和右浮动的子盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况贴边性质应用
利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如： 上述平均分布表格效果导航栏效果常见的电商或企业网站布局练习
做个如图的分布代码地址
浮动的元素没有margin塌陷
浮动的元素让出标准流位置
元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素 在 IE6 、 7浏览器中，会出现兼容问题 由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动字围现象
与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载 * { margin: 0; padding: 0; } .box { width: 400px; border: 1px solid #000; margin: 20px; } .box img { float: left; width: 150px; margin: 5px; } .box p { width: 400px; background-color: aqua; }浮动的问题1
标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高，如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的!
浮动的问题2
父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边以上的问题需要被解决，解决方法是清除浮动带来的影响
清除浮动一：height
给标准流的父元素强制给一个合适的高度 .box { width: 1000px; height: 100px; border: 2px solid red; margin: 20px; } 解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现清除浮动二：clear属性
clear，清除作用：清除标签元素自身受到的前面的浮动元素的影响属性值：
属性值作用left清除前面左浮动带来的影响right清除前面右浮动带来的影响both清除前面所有浮动带来的影响 给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置 .box { width: 1000px; /* height: 100px; */ border: 2px solid red; margin: 20px; clear: both; } 解决：浮动元素影响后面元素标准流位置和贴边问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确清除浮动三：隔墙法
外墙法：在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear 属性 .cl { clear: both; } 解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离问题：父元素没有高度自适应内墙法：在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高度为 0，添加 clear 属性 <div class="box"> <p></p> <p></p> <p></p> <p></p> <div class="cl"></div> </div>清除浮动四：伪类
本质是使用伪类方法利用 css 代码书写一堵内墙
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置:after：这个伪类表示选中的是某个标签内部的最后的位置书写方法：前面必须加普通的选择器，后面连续书写伪类名称将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个 clearfix 的类名 .cleasrfix:after { content: "1"; /* 文字内容 */ display: block; /* 转换为块级 */ height: 0; /* 设置为 0 ，不会撑高父盒子 */ clear: both; /* 清除前边的浮动 */ visibility: hidden; /* 隐藏文字，会保留位置 */ } <div class="box cleasrfix"> <p></p> <p></p> <p></p> <p></p> </div>解决了父元素高度自适应，浮动影响后面的元素位置和贴边
清除浮动五：溢出隐藏
小偏方：给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题 .box { width: 1000px; /* height: 100px; */ border: 2px solid red; margin: 20px; /* clear: both; */ overflow: hidden; }overflow属性
元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏 .demo { width: 100px; height: 100px; border: 1px solid red; overflow: hidden; } 元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度 .demo { width: 100px; border: 1px solid red; overflow: hidden; } 高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边如果父元素高度是固定的，建议使用 height 属性解决 如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题
如果图片不重复，从 border 以内开始加载
背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背 景颜色
使用像素值作为背景定位的属性值
第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离
background-position: 50px 50px;像素值区分正负，正负代表位移方向不同：
正数：表示图片针对盒子的原点向右、向下移动负数：表示图片针对盒子的原点向左、向上移动百分比表示法使用百分比数字作为属性值
100% 代表的数值：水平方向，等价于盒子的 border 以内的背景区域宽度减去图片的宽度垂直方向，等价于盒子的 border 以内的背景区域高度减去图片的高度注意事项
注意1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载
background: pink;注意2：如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠
body { background: url(images/bj.jpg) no-repeat center top #666; background-attachment: scroll; }背景图替换插入图方法
如果想解决 SEO 问题，可以将 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> * { margin: 0; padding: 0; } h1 { width: 200px; height: 100px; } h1 a { display: block; width: 200px; height: 100px; background: url(images/lagou_small.jpg) no-repeat; } </style> </head> <body> <h1> <a href=""> 拉钩|招聘|教育|666 </a> </h1> </body> </html>文字隐藏方法
1、将字号设置为 0。IE8 及以上或高版本 浏览器可以隐藏文字，但是 IE7 及以下有 兼容问题 font-size: 0; 2、可以设置给标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏 h1 a { display: block; width: 200px; height: 100px; background: url(images/lagou_small.jpg) no-repeat; /* font-size: 0; */ text-indent: -20em; overflow: hidden; }在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用 padding 挤出位置
四个方向的 padding 都可能用于添加背景图
.list { width: 300px; padding-left: 10px; border: 1px solid #000; margin: 10px; list-style: none; font: 16px/32px "楷体" } .list li { padding-left: 25px; background: url(images/tubiao.png) no-repeat left center ; }当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时， 服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）
css 精灵
CSS 精灵是一种处理网页背景图像的方式它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来通常情况下，这个由很多小的背景图像合成的大图被称为精灵图css 精灵的技术依据
将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片利用背景定位技术，将精灵图的每个小图片加载到对应的标签上制作精灵图的注意事项
精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放精灵图的宽度取决于最宽的那个背景图片的标签宽度精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白， 保证背景图片加载到一个标签内部时，不能出现多余内容在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图可以通过网上的在线进行制作精灵图
在线制作精灵图
同样， 可以给文字和边框透明，都是 rgba 的格式来写
color: rgba(0,0,0,0.5); border: 1px solid rgba(0,0,0,0.5);通过 background-size 设置背景图片的尺寸，就像我们设置 <img> 的尺寸一样，在移动 Web 开发中做屏幕适配应用非常广泛
属性值说明px 值1 - 2个像素值，只设置 1 个值，垂直方向等比例拉伸，设置2个值，按照设置值 加载百分比同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性cover自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，如有溢出部分则会被隐藏contain自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背景区域 .box1 { background-size: 50px 50px; } .box2 { background-size: 50% 50%; } .box3 { background-size: cover; } .box4 { background-size: contain; } <div class="box1"> px 值 </div> <div class="box2"> 百分比 </div> <div class="box3"> cover </div> <div class="box4"> contain </div>定位属性 position
属性名：position
属性值：
relative 相对定位absolute 绝对定位fixed 固定定位作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移
偏移量属性
定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置
水平方向：left、right垂直方向：top、bottom属性值：常用 px 为单位的数值，或者百分比相对定位的性质
性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置元素显示效果上，原位留坑，形影分离注意事项
①、偏移量属性的值是区分正负的 正数：表示偏移方向与属性名方向相反负数：表示偏移方向与属性名方向相同 .box .para { position: relative; left: -100px; top: -100px; background: yellowgreen; } ②、同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性建议：书写时从水平方向和垂直方向各挑一个属性进行组合 .box .para { position: relative; left: -50px; top: -50px; right: -50px; bottom: -50px; background: yellowgreen; } ③、由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的 正值等价于 bottom 的负值为了方便记忆，可以选择只使用 left、top 组合
实际应用
由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后 期绝对定位的参考元素，就是所说的子绝父相情况相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调代码地址
绝对定位的性质
性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合， 会导致绝对定位元素的参考点不同，具体位移效果不同注意2：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值 .box .para { position: absolute; /* left: 100px; */ top: 100px; right: 100px; background: yellowgreen; }<body> 为参考元素的参考点
以 <body> 为参考元素时，参考点的确定与偏移量方向有关第一，如果有 top 参与的定位，参考点就是 页面的左上顶点和右上顶点。自 身的对比点是盒子的所有盒模型属性最外面的左上角或右上角第二，如果有 bottom 参与的绝对定位，参考点是页面首屏的左下顶点或 右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角实际应用中，如果以 <body> 为参考元素，不同分辨率的浏览器中，绝对定位的元 素位置是不同的，所以较少使用 <body> 作为参考元素
祖先级为参考元素
如果祖先级中有定位的元素，就不会去参考 <body>参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先根据绝对定位的参考元素的定位类型不同，有三种定位组合 方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖 先级位置更稳定，大多使用子绝父相的情况
祖先元素参考点
如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点, 绝对定位的元素只关心对比点和参考点之间的距离，会忽视 参考元素的 padding 区域left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角固定定位的性质
性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量 属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上
定位 position 根据属性值不同有三种类型的定位效 果，其中绝对定位和固定定位的元素会脱离标准流,， 三种定位在页面中有各自的使用场景
压盖效果
所有的定位类型都可以实现压盖效果由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖 .box p { position: absolute; /* 绝对*/ top: 100px; left: 100px; width: 100px; height: 100px; background-color: coral; } <div class="box"> <img src="images/lagouwang.jpg" alt=""> <p> </p> </div>居中
定位的元素，如果想在参考元素中居中显示，有自己的居中方法： 第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致 图片的左顶点移动到参考元素的中心位置 百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度 第二步：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值 为负的自身宽度的一半 .box p { position: absolute; /* 绝对*/ left: 50%; top: 50px; width: 100px; height: 100px; margin-left: -50px; background-color: coral; }扩展应用
①、解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中
.box1 p { position: relative; width: 600px; height: 100px; margin-left: -100px; background-color: sandybrown; }②、浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法
实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的
默认压盖顺序
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位因此，书写代码时，需要注意压盖效果，必须合理设置 HTML 元素的书写顺序自定义压盖顺序
如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性属性值：数字 /* 给灰色设置 z-index */ z-index: 1;自定义压盖顺序注意事项
属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的如果属性值相同，比较HTML书写顺序，后写的压盖先写的z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分： 父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”静态轮播图
代码地址
