CSS
一、CSS是什么
CSS3就是css语言，数字3是该语言的版本号；css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表 （Cascading Style Sheet），也属于标记语言。
二、CSS的书写位置
css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。
2.1 行间式
css样式书写在标签的style全局属性中，一条样式格式为 样式名: 样式值 单位;，可以同时出现多条样式
<!-- 关键代码 --> <!-- 给div标签设置宽高背景颜色 --> <div style="width: 200px; height: 200px; background-color: orange;"></div>
2.2 内联式
css样式书写在head标签内的style标签中，样式格式为 css选择器 { 样式块 }，样式块由一条条样式组成
<!-- 关键代码 --> <head> <style> /* css语法下的注释语法 */ /* 设置页面中所有h2标签宽高背景颜色 */ h2 { width: 50px; height: 50px; background-color: orange; } /* 设置页面中所有h3标签宽高背景颜色 */ h3 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <h2></h2> <h2></h2> <h3></h3> <h3></h3> </body>
2.3 外联式
css样式的写法同内联式，但样式书写在css文件中，在html页面中用link标签引入css文件（建议在head标签中引入）
2.3.1 css文件夹下的my.css
/* html文件会引入该css文件，设置所有引入了html文件中的所有p标签宽高背景颜色 */ p { width: 50px; height: 50px; background-color: orange; }
2.3.2 根目录下的first.html
<!-- 关键代码 --> <head> <!-- rel="stylesheet"：引入的是层级样式表，也就是css文件 type="text/css"：引入文件采用的是css语法书写文本类型代码 href="css/my.css"：采用相当路径引入目标css文件 --> <link rel="stylesheet" type="text/css" href="css/my.css"> </head> <body> <!-- 该页面中的p标签样式都被my.css文件控制 --> <p></p> <p></p> </body>
2.3.2 根目录下的second.html
<head> <link rel="stylesheet" type="text/css" href="css/my.css"> </head> <body> <!-- 该页面中的p标签样式也都被my.css文件控制 --> <p></p> <p></p> </body>
2.4 总结
行间式控制样式最直接，但是样式多了直接导致页面可读性变差，且样式相同的标签样式也需要各自设置，复用性差；
外联式将css样式移到外部css文件中，不仅避免项目开发下html文件的臃肿问题，同时具有一套代码块控制多个标签，一个css样式文件服务于多个html两种复用性的好处，但是在学习阶段代码量不大时，样式不需要服务于多个html页面时，前面两种方式显然显得更便利。
在行间式中，写在标签内部的样式自然是用来控制该标签的样式，那写在内联式和外联式中的样式又是通过什么样的联系来控制对应页面中标签的样式呢？答案就是用于建立css与html之间联系的css选择器。
三、CSS的选择器
ss选择器本质就是css与html两种语法建立关联的特定标识符：
就是在css语法中，通过html中标签的某种名字，与html具体的标签建立关联，从而使写在对应css选择器后的css样式能控制html中关联的标签或标签们
3.1 基础选择器
3.1.1 通配选择器
/* 特定标识符 星号(*) -- 可以表示页面所有标签的名字 */ /* 通配选择器控制页面中所有的标签(不建议使用) */ * { /* 样式块 */ }<!-- 页面中所有标签都能被匹配 --> <html></html> <body></body> <div></div> <p></p> <i></i>
3.1.2 标签选择器
/* 特定标识符 标签名 */ /* 标签选择器控制页面中标签名为标签选择器名的所有标签*/ div { /* 控制页面中所有div标签的样式 */ /* 样式块 */ }<!-- 页面中所有的div标签都能被匹配 --> <div></div> <div class="sup"> <div id='inner'></div> </div>
3.1.3 class选择器
/* 特定标识符 点(.) */ /* class选择器控制页面中标签全局属性class值为class择器名的所有标签*/ .box { /* 控制页面中所有标签全局属性class值为box标签的样式 */ /* 样式块 */ }<!-- 页面中class属性值为box的标签都能被匹配 --> <div class="box"></div> <p class="box"> <i class="box"></i> </p>
3.1.4 id选择器
/* 特定标识符 井号(#) */ /* id选择器控制页面中标签全局属性id值为id择器名的唯一标签*/ #box { /* 控制页面中唯一标签全局属性id值为box标签的样式 */ /* 样式块 */ }<!-- 页面中id属性值为box的唯一标签备匹配，id具有唯一性：一个页面中所有标签的id属性值不能重名 --> <div id="box"></div>
3.1.5 基础选择器的优先级
在一个页面中，难免会出现页面中的某一个标签的某一个样式被不同的选择器下的样式同时控制，也就是出现了多种方式下对目标标签的同一样式出现了重复控制，那到底是哪种选择器下的样式最终控制了目标标签，一定会有一套由弱到强的控制级别规则，这种规则就叫做优先级，下面的例子就很好的解释了各种基础选择器的优先级关系：
/*优先级：按作用域大小区分，作用域越小优先级越高*/ /* !important > 行间式 > id > class > 标签 > 统配 */ /*重点： class选择器 - 单类名 多类名 */<style> * { width: 50px; height: 50px; background-color: red; color: pink; } div { width: 60px; height: 60px; background-color: orange; } .box { width: 70px; height: 70px; } #ele { width: 80px; } </style><div class="box" id="ele">文字内容</div><!-- 1. 四种选择器都控制目标标签的宽度，最终目标标签宽度为80px，所以id选择器优先级最高 2. 三种选择器都控制目标标签的高度，最终目标标签宽度为70px，所以class选择器优先级其次 3. 二种选择器都控制目标标签的背景颜色，最终目标标签背景颜色为orange，所以标签选择器优先级再次 4. 只有一种选择器控制目标标签的字体颜色，目标标签字体颜色一定为pink 优先级：通配选择器 < 标签选择器 < class选择器 < id选择器 -->
3.2 高级选择器
3.2.1 群组选择器
/* 连接标识符 逗号(,) */ /* 群组选择器就是一套样式块同时控制用逗号连接(,)的所有目标标签 */ div, p, .box, #ele { /* 样式块 */ }<!-- 页面中所有div标签、所有p标签、所有class属性值为box、唯一id属性值为ele的标签都能被匹配 --> <div> <div></div> </div> <p></p> <p></p> <i class="box"></i> <span class="box"></span> <b id="ele"></b>
3.2.2 后代选择器
/* 连接标识符 空格( ) */ /* 后代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ body .box i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/ /* 样式块 */ }<!-- body标签内部的class属性值为box内部的i标签们都能被匹配，所以只匹配i标签，其他都是修饰 --> <body> <div class='box'> <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，能被匹配 --> </div> <div> <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，能被匹配 --> </div> </body> <!-- 标签的嵌套结构形成父子代标签，后代选择器可以匹配直接父子关系或间距父子关系形成的层次，所以两个i标签均能被匹配 -->
3.2.3 子代选择器
/* 连接标识符 大于号(>) */ /* 子代选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ body>.box>i { /*最后置位的选择器为i标签选择器，前置位body标签选择器、class值为box的class选择器都是修饰*/ /* 样式块 */ }<!-- body>.box>i：同理body和.box都是修饰位，i才是目标匹配位 --> <body> <div class='box'> <span><i></i></span><!-- body与.box是直接父子关系，.box与i是间接父子关系，不能被匹配 --> </div> <div> <span class='box'><i></i></span><!-- body与.box是间接父子关系，.box与i是直接父子关系，不能被匹配 --> </div> <div class='box'> <i></i><!-- body与.box是直接父子关系，.box与i是直接父子关系，能被匹配 --> </div> </body> <!-- 子代选择器只能匹配直接父子关系，所以只能匹配最后一个i标签 -->
3.2.4 兄弟选择器
/* 连接标识符 波浪号(~) */ /* 兄弟选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ #ele~div~i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/ /* 样式块 */ }<!-- #ele~div~i：同理#ele和div都是修饰位，i才是目标匹配位 --> <h3 id="ele"></h3> <div></div><!-- #ele与div是直接兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <div></div><!-- #ele与div是间距兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <!-- 标签的上下结构形成兄弟标签，兄弟选择器可以匹配直接兄弟关系或间距兄弟关系形成的层次，所以两个i标签均能被匹配 -->
3.2.5 相邻选择器
/* 连接标识符 加号(+) */ /* 相邻选择器控制的是最后置的选择器位匹配到目标标签(们)，前置位的所有选择器都是修饰 */ #ele+div+i { /*最后置位的选择器为i标签选择器，前置位id值为ele的id选择器、div标签选择器都是修饰*/ /* 样式块 */ }<!-- #ele+div+i：同理#ele和div都是修饰位，i才是目标匹配位 --> <h3 id="ele"></h3> <div></div><!-- #ele与div是直接兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，能被匹配 --> <div></div><!-- #ele与div是间距兄弟关系 --> <i></i><!-- div与i是直接兄弟关系，不能被匹配 --> <!-- 相邻选择器只能匹配直接兄弟关系，所以只能匹配第一个i标签 -->
3.2.6 交叉选择器
/* 连接标识符 紧挨着(没有任何连接符) */ /* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */ div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/ /* 样式块 */ }<!-- 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开 <!-- class属性拥有多个值时，多个值之间用空格隔开 --> <div class="box tag" id="ele"></div>
3.2.7 选择器优先级
1. 复杂选择器的种类并不会影响优先级 -- 后代：div #ele | 兄弟：div~#ele | 交叉：div#ele 优先级一样 2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级 -- 三层标签选择器后代：body div i 大于 两层标签选择器后代：div i | body i 3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器 -- id选择器：#i 大于 n层class选择器：.box .i -- class选择器：.box 大于 n层标签选择器：body div
3.3 伪类选择器
3.3.1 基础伪类选择器
/* 1.()内填的是编号，因此需要从1开始 2.伪类选择器可以单独出现，相当于省略了统配 3.:nth-child先匹配层级位置，再匹配你标签 4.:nth-of-type先匹配标签类型，再匹配层级位置 */ :nth-child(1) { /* :前省略了类名，相当于通配所有的类*/ color: orange; } i:nth-child(4) { /* 先匹配位置4，再匹配类型i*/ color: red; } i:nth-of-type(1) { /* 先匹配类型i,再匹配第一个位置*/ color: blue; } /* 匹配2的倍数，即2n偶数 2n-1|2n+1奇数 3n最后一列 3n+1|3n-2第一列 3n-1中间列*/ .pp:nth-child(3n-1) { color: orange; }<i class="i3">iiii1</i> <p class="p3">pppp</p> <div class="div3">dddd</div> <div class="div3">dddd</div> <i class="i3">iiii2</i> <div> <i class="i3">iiii1</i> <p class="p3">pppp</p> <div class="div3">dddd</div> <i class="i3">iiii2</i> </div> <a class="a1 a2" href="https://www.baidu.com">前往百度</a> <div class="box"> <p class="pp p1">p1</p> <p class="pp p2">p2</p> <p class="pp p3">p3</p> <p class="pp p4">p4</p> <p class="pp p5">p5</p> <p class="pp p6">p6</p> <p class="pp p7">p7</p> <p class="pp p8">p8</p> <p class="pp p9">p9</p> </div>
3.3.2 a标签的四大伪类选择器
/* 链接的初始状态*/ a:link { color: deepskyblue; } /* 链接的悬浮状态*/ a:hover { color: blue; cursor: pointer; /* 当鼠标进入超链接的范围内，会自动变成小手指的状态*/ } /* 链接的激活状态*/ a:active { color: deeppink; } /* 链接的已访问状态 */ a:visited { color: yellow; } body { /* 文本不能被选择 */ user-select: none; } .btn { width: 80px; height: 40px; background-color: cornflowerblue; border-radius: 5px; text-align: center; line-height: 38px; color: white; } .btn:hover { cursor: pointer; background-color: deepskyblue; } .btn:visited{ background-color: red; }<a href="https://www.baidu.com">前往百度</a> <div class="btn">按钮</div>
四、具体的样式设置
4.1 文字样式
/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/ font-family: "STSong", "微软雅黑";
/*字体大小*/ font-size: 40px;
/*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/ font-weight: 900;
/*行高: 字体文本默认在行高中垂直居中显示*/ line-height: 200px;
/*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线) */ text-decoration: overline;
/*字间距*/ letter-spacing: 2px;
/*词间距*/ word-spacing: 5px;
/*首行缩进：1em相当于一个字的宽度*/ text-indent: 2em;
/*字体颜色*/ color: red;
/* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) */ text-align: center;
4.2 背景样式
/*背景图片：url函数可以链接网络或本地图片*/ background-image: url('https://www.baidu.com/favicon.ico'); /* 背景定位 x轴(left center right) y轴(top center默认 bottom) */ background-position: center bottom; /*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺) background-repeat: no-repeat; /*x轴背景图片位置偏移：正值往右偏移，负值往左偏移*/ background-position-x: 10px; /*指定尺寸移动*/ background-position: 100px 100px; /*y轴背景图片位置偏移：正值往下偏移，负值往上偏移*/ background-position-y: 10px; /* 背景颜色*/ background-color: red;
4.3 边界圆角
.box { width: 400px; height: 200px; background-color: red; } .box { /*border-radius: 50%;*/ /*左上是第一个角，顺时针编号，不足找对角，只有一个值同时控制4个角*/ /*border-radius: 10px 20px 30px 40px;*/ /*border-radius: 10px 20px 30px;*/ /*border-radius: 10px 20px;*/ /*border-radius: 100px;*/ /* 横向 / 纵向 */ /*border-radius: 50% / 50px;*/ /* 横向1,2,3,4 / 纵向13,24 */ border-radius: 10px 20px 30px 40px / 50px 100px; border-radius: 200px 200px 0 0 / 200px 200px 0 0; }<div class="box"></div>
4.4 显示样式
/* block：1.可以手动设置宽高 2.自带换行 3.支持所有css样式 inline：1.宽高只能由文本内容撑开，不能手动设置 2.不带换行 3.支持部分css样式 inline-block：1.可以手动设置宽高 2.不带换行 3.支持所有css样式 */ /* 嵌套关系 block：可以嵌套block、inline、inline-block div、li搭架构的，可以任意嵌套 h1~h6、p 建议只嵌套inline，就是用来转文本的 inline：只用来嵌套inline span、i、b、em、strong a一般都会修改其display为block inline-block：不建议嵌套任何 img input系统都设计成了单标签 none：没有显示方式，就会在页面中隐藏 */ /* 开发时：修改display的情况 - 要支持宽高，要更改位置(水平排列还是垂直排列) */ div { display: block; width: 100px; height: 100px; background-color: red; } span { display: inline; width: 100px; height: 100px; background-color: orange; } wangyong{ display: inline-block; width: 100px; height: 100px; background-color: pink; } a { display: block; width: 100px; background-color: brown; border: 1px solid black; } img { width: 100px; } p { text-align: center; }<div>divdivdiv</div> <div>divdivdiv</div> <span>spanspanspan</span> <span>spanspanspan</span> <wangyong>wangyong</wangyong> <wangyong>wangyong</wangyong> <a href="https://www.baidu.com"> <img src="img/bd_logo.png" alt=""> <p>前往百度</p> </a>
4.5 盒模型
标签其实除了宽(width)和高(height)，还拥有内边距(padding)、边框(border)以及外边局(margin)的，这些由内到外组件在一起，就相当于一个盒子，所以我们有把页面中显示的标签称之为盒模型。
4.5.1 盒模型的四大区域
/* 去除系统默认样式对我们学习的干扰，body标签系统默认提供了外边局，且外边局的上右下左四个方位的值都是默认8px，
我们写margin: 0;的意思是同时将四个方位的初始值都设置为0，这样我们可以只用关心class值为box的div盒模型的变化，从而更好的学习盒模型的四个区域 */ body { margin: 0; } /* 填写盒模型四个区域的样式代码块 */ /* content区域 */ /* 效果：在最左上角显示一个100*100区域面积的橘色正方形 */ .box { width: 100px; height: 100px; background-color: orange; } /* content区域就是width x height的面积区域，是用来显示标签内容的区域 */ /* padding区域 */ /* 效果：在content区域设置的基础上，再设置padding的四个方位值，就会在最左上角显示一个200*200区域面积的橘色正方形 */ .box { padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px; } /* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */ /* border区域 */ /* 效果：在padding区域设置的基础上，再设置border的样式、颜色及宽度，最左上角显示一个橘色正方形外会接着多出20px宽度的红色区域 */ .box { /*solid:实线 | dashed:虚线 | dotted:点状线*/ border-style: solid; border-color: red; border-width: 20px; } /* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */ /* margin区域 */ /* 效果：在至少所有设置的基础上，再设置margin的四个方位值，橘色正方形就会出现在居屏幕上方150px，屏幕左侧150px地方显示 */ /* 而且修改margin-top的值，盒模型就会上下改变位置，修改margin-left的值，盒模型就会左右改变位置，当出现负值时，盒子会溢出屏幕边缘 */ .box { margin-top: 150px; margin-right: 150px; margin-bottom: 150px; margin-left: 150px; } /* padding区域控制着盒模型的内边距，是内容显示区域往外的留白区域，同样可以显示背景颜色的 */<div class="box"></div>
4.5.2 存在问题
在盒模型除了修改margin-right与margin-bottom的值时，盒模型都会出现显示效果的上的改变，而修改margin-right与margin-bottom的值时，盒模型的并没有任何改变，那margin-right与margin-bottom又是怎样控制着盒模型的呢？
margin-bottom是控制默认上下显示的两个盒模型之间的间距
<!doctype html> <html> <head> <meta charset='utf-8' /> <title>margin-bottom案例</title> </head> <body> <div style="margin-bottom: 100px">上下显示的【上】盒模型</div> <div>上下显示的【下】盒模型</div> <!-- 显示效果：两个div上下间距100px --> </body> </html>margin-right是控制默认zzu左右示的两个盒模型之间的间距
<!doctype html> <html> <head> <meta charset='utf-8' /> <title>margin-right</title> </head> <body> <span style="margin-right: 100px">左右显示的【左】盒模型</div> <span>上下显示的【右】盒模型</span> <!-- 显示效果：两个span默认初始左右是有间距的，增加margin-right后，间距在原来基础上扩大了100px --> </body> </html>
4.6 浮动
4.6.1 浮动的出现
多个可以手动设置宽高的盒模型如何快速的左右排列显示？
display：inline;下的盒模型，不支持手动设置宽高，pass
display: inline-block;下的盒模型，支持手动设置宽高，且左右排列显示，但是之间有默认间距，且这个间距存在浏览器间的适配问题，不可控，pass
display: block;下的盒模型，支持手动设置宽高，但默认上下排列显示，于是我们想到了采用margin-left与margin-top两个可以改变位置的盒模型属性帮我们完成，显然是可以达到左右排列显示的，但是很明显是一个非常庞大的布局任务量
/* 清除body默认外边距带来的影响 */ body { margin: 0 } /* 浮动布局的开始 */ .red { background-color: red } .blue { background-color: blue } .box { width: 50px; height: 50px; } /* 以上设置后，红蓝正方形从左上角依次上下排列显示 */ .box { float: right; } /* 以上设置后，红蓝正方形依次从右上角(从右往左)左右排列显示 */ .box { float: left; } /* 以上设置后，红蓝正方形依次从左上角(从左往右)左右排列显示 */ .wrapper { width: 150px; } /* 以上设置后，父级提供的显示宽度为150px，所以一行最多能显示三个 box，所以从左往右依次排列成了两行 */<body> <div class="wrapper"> <div class="box red">1</div> <div class="box blue">2</div> <div class="box red">3</div> <div class="box blue">4</div> <div class="box red">5</div> <div class="box blue">6</div> </div> </body><!-- 总结： 1. 浮动样式布局就是设置float属性的值，可以快速让默认上下显示的盒模型左右排列显示 2. float可以设置left与fight两个值，决定了起始排列的位置与方向 3. 父标签的宽度决定了一行可以排列的子标签个数 -->
4.6.2 清浮动
清浮动就是让父标签在子标签浮动的情况下，根据子标签整体所需最大的显示高度，为父级设置固定格式的样式属性，系统就会默认提供给父标签这个所需最大的显示高度，具体格式如下：
/*清浮动固定格式样式代码*/ .wrapper:after { content: ""; display: block; clear: both; } /* 测试修改父级标签的宽度，让子标签以不同行数来显示，查看子标签与ele标签之间还会不会出现显示区域的重叠？显然不会了 */ .wrapper { width: 150px; /* 子标签两行显示 */ width: 100px; /* 子标签三行显示 */ width: 50px; /* 子标签六行显示 */ } /*总结：以后哪个标签的子标签采用了浮动样式布局，一定要为该标签提供清浮动操作*
4.7 定位
需求2：父标签已经规定死了宽和高，多个子标签之间不相互影响位置布局，每个子标签自身相对于父级宽高提供的显示区域进行独立的位置布局
4.7.1 固定定位：解决需求1
/* 页面滚动的样式准备 */ body { height: 3000px; } .tag { width: 120px; height: 240px; background-color: orange; } /* position: fixed; 代表采用固定样式定位进行对tag位置的布局操作 */ /* 设置完成后，tag就相对于页面屏幕左侧30px屏幕上侧200px位置静止，不会随着屏幕的滚动而滚动 */ /* 定位样式布局下，不仅可以采用top、left进行布局的位置调整，还可以采用bottom、right进行布局的位置调整，大家可以自我尝试一下，进入固定定位布局总结 */ .tag { position: fixed; top: 200px; left: 30px; }<div class="tag"></div><!-- 总结： 1. 固定定位的盒模型参照页面屏幕四个边缘进行位置布局，top、right、bottom、left分别控制着距离页面屏幕上右下左四个边缘的距离 2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果 3. 固定定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠（因为页面滚动，固定定位盒子的位置相对于页面永远是静止的），固定定位的盒模型会在上方显示 -->
4.7.2 绝对定位：与相当定位一同解决需求2
/* 清除body默认外边距带来的影响 */ body { margin: 0 } /* 根据需求2，优先设置好outer的显示区域 */ .outer { width: 400px; height: 400px; background-color: yellow; } /* 所有的inner采用一样的大小，绝对样式定位进行布局 */ .inner { width: 150px; height: 150px; position: absolute; } /* 想让box1在outer的左上角显示 */ .box1 { background-color: red; top: 0px; left: 0px; } /* 想让box2在outer的正中央显示 */ .box2 { background-color: green; top: 125px; left: 125px; } /* 想让box3在outer的右下角显示 */ .box3 { background-color: green; bottom: 0px; right: 0px; }<div class="outer"> <div class="inner box1"></div> <div class="inner box2"></div> <div class="inner box3"></div> </div><!-- 结果： 进行上方布局设置后，并没有达到预期的显示效果，子标签我们已经采用了绝对样式定位完成了指定的布局，那么父标签又需要做什么样的定位样式布局处理呢？ -->
4.7.3 相对定位：辅助绝对定位解决需求2
.outer { /* 父标签设置完相对样式布局后，再观察绝对定位中的案例显示效果 */ position: relative; /* 如果父标签也需要改变自身位置，也可以修改left、top或是margin-left、margin-top来完成 */ } /* 总结： 1. 父标签采用相对定位(relative)来辅助于子标签绝对定位(absolute)布局，这样每一个子标签都独立参考父标签的四个边缘进行位置布局，top、right、bottom、left分别控制着距离父标签的上右下左四个边缘的距离 2. top与bottom两个方位布局同时存在时，只有top属性值有布局效果，同理left与right同时出现，只有left属性值有布局效果 3. 绝对定位的盒模型可能会与页面上其他的盒模型发生显示区域重叠，一般都是布局所需，不用处理；但是同时采用绝对定位的标签们之间也可能发生重叠，此时往往需要处理谁在上在下显示，z-index属性就是解决这样的问题 */
4.7.4 z-index：接着需求2的案例
z-index的属性值为大于0的任意正整数，值大的标签显示区域就会覆盖值小的标签显示区域来显示
.box1 { /* 显示层级中等 */ z-index: 10; } .box2 { /* 显示层级最高 */ z-index: 100; } .box3 { /* 显示层级最低 */ z-index: 1; } /* 总结： 1. z-index属性值不需要从1依次叠加，随意设置 2. z-index属性值越大显示层级越高，显示层级不同的发生显示区域重叠时，显示层级高的显示区域覆盖显示层级低的显示区域 */
4.8 overflow属性
/* 1、规定了标签的宽高，标签的内容超出范围 2、规定了标签的宽高，标签内的子标签显示区域更大，超出范围 如何让父级宽高限制内容和子集 */ .box { width: 200px; height: 200px; background-color: orange; /*内容超出，都会以 hidden 处理影藏，如果想显示全内容，采用子页面*/ /*hidden：影藏超出内容 scroll：以滚动显示超出内容 auto：有超出内容才滚动显示*/ overflow: hidden; } .sup { width: 200px; height: 200px; background-color: red; overflow: hidden; } .sub { width: 300px; height: 300px; background-color: pink; }<div class="box">汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字</div> <div class="sup"> <div class="sub"></div> </div>
浙公网安备 33010602011771号