前端技术（2）— CSS（超详解）
2024-07-02 05:01:05
文章目录
- 一、初识CSS
- 1.1 基本概念
- 1.2 发展史
- 1.3 快速入门
- 1.4 CSS优势：
- 1.5 导入方式
- 二、选择器
- 2.1 基本选择器
- 2.2 层次选择器
- 2.3 结构伪类选择器
- 2.4 属性选择器
- 三、美化网页
- 3.1 为什么要美化网页
- 3.2 字体样式
- 3.3 文本样式
- 3.4 阴影
- 3.5 超链接伪类
- 3.6 列表
- 四、盒子模型
- 4.1 content（内容区域）
- 4.2 padding（内填充）
- 4.3 border（边框）
- 4.4 margin（外边距）
- 4.5 阴影
- 五、浮动
- 5.1 标准文档流
- 5.2 块级元素与行内元素
- 5.3 父级边框塌陷的问题
- 六、定位
- 6.1 相对定位
- 6.2 绝对定位
- 6.3 固定定位
- 6.4 z-index
一、初识CSS
1.1 基本概念
CSS：（Cascading Style Sheet ） 层叠级联样式表，用于美化网页
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
1.2 发展史
- CSS 1.0
- CSS 2.0 DIV块+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
- CSS 2.1 浮动，定位
- CSS3.0 圆角，阴影，动画… 浏览器兼容性
1.3 快速入门
1.4 CSS优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利于SEO，容易被搜索引擎收录
1.5 导入方式
分为三种：内部样式、外部样式、行内样式
优先级：就近原则，以下面为例，距离h1最近就选择谁，本例h1颜色选择blue
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--内部样式--><style>h1{color: blueviolet;}</style><!--外部样式--><link rel="stylesheet" href="css/style.css">
</head>
<body><!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: blue">标题</h1>
</body>
</html>
外部样式两种写法，一种是上面的链接式，还有一种导入式，不过不建议
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--导入式--><style>@import "css/style.css";</style>
</head>
<body>
<h1>RS与CV的奇幻之旅</h1>
</body>
</html>
链接式与导入式的区别：
- link属于HTML标签，而@import是CSS提供的;
- 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
- import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
- link方式的样式的权重 高于@import的权重.：在
link标签引入的 CSS 文件中，使用@import时需注意，如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link标签引入的样式权重大于@import引入的样式这样的直观效果。
二、选择器
2.1 基本选择器
标签选择器：会选择到页面上所有这个标签的元素。
格式：标签{}
类选择器：选择所有class属性一致的标签，可以跨标签，复用
格式： .class的名称{}
id选择器：id必须保证全局唯一
格式：#id名称{}
三种选择器优先级：id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*id选择器：id必须保证全局唯一#id名称{}不遵循就近原则，固定的id选择器>class*/#ai{color: #ffb61e;}.style1{color: blueviolet;}h1{color: blue;}</style>
</head>
<body><h1 class="style1" id="ai">人工智能:AI</h1>
<h1 class="style1">推荐系统:RS</h1>
<h1 class="style1">计算机视觉:CV</h1>
<h1>自然语言处理:NLP</h1>
</body>
</html>
2.2 层次选择器
1.后代选择器：在某个元素后面
/*后代选择器*/
body p{background: #ffb61e;
}
2.子选择器：一代
/*子选择器*/
body>p{background: blue;
}
3.相邻兄弟选择器（相邻后面一个产生效果）
/*兄弟选择器*/
.active + p{background: aqua;
}
4.通用选择器：选择当前选中元素的向下的所有兄弟元素
/* 通用兄弟选择器*/
.active~p{background: bisque;
}
【代码演示】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*后代选择器*//*body p{*//* background: #ffb61e;*//*}*//*!* 子选择器*!*//* body>p{*//* background: blue;*//* }*//* 兄弟选择器*//* .active + p{*//* background: aqua;*//* }*//* 通用兄弟选择器，选择当前选中元素的向下的所有兄弟元素*/.active~p{background: bisque;}</style>
</head>
<body><p>p1</p><p class="active">p2</p><p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul><p>p7</p>
</body>
</html>
2.3 结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*ul的第一个子元素*/ul li:first-child{background: #ffb61e;}/*ul的最后一个子元素*/ul li:last-child{background: blue;}/*选中p1:定位到父元素，选择父元素下的相应元素，并且选择到的和当前需要选中是同类元素才生效，顺序选择*/p:nth-child(1){background: blueviolet;}/*选中父元素下的相应元素，类型选择*/p:nth-of-type(1){background: chocolate;}</style>
</head>
<body><p>p1</p><p>p2</p><p>p3</p><ul><li>p4</li><li>p5</li><li>p6</li></ul><p>p7</p>
</body>
</html>
2.4 属性选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius:10px ;background: #ffb61e;text-align: center;color: lightslategray;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/*属性：=绝对等于*=包含等于^=以这个开头$=以这个结尾选择存在id属性的元素，class中有first的元素，完全等于link*/a[id]{background: blueviolet;}a[class=link]{background: aqua;}a[class *=first]{background: bisque;}a[href$=png]{background: blueviolet;}</style>
</head>
<body><p class="demo"><a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="" class="link item active" target="_blank" title="test">2</a><a href="images/123.html" class="link">3</a><a href="images/123.png" class="link item">4</a><a href="images/123.jpg" class="link item">5</a><a href="abc" class="link item">6</a><a href="/a.pdf" class="link item">7</a><a href="/abc.pdf" class="link item">8</a><a href="abc.doc" class="link item">9</a><a href="abcd.doc" class="link item last">10</a></p></body>
</html>
三、美化网页
3.1 为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮，才能吸引用户
- 凸显页面主体
- 提高用户体验
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#title1{font-size: 20px;}</style>
</head>
<body>
欢迎学习<span id="title1">JAVA</span>
</body>
</html>
3.2 字体样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--font-family:字体font-size:字体大小font-weight:字体的粗细color:颜色--><style>body{font-family:"Arial Black" ,楷体;font-size: 20px;color: #47a7ff;}h1{font-size: 30px;}.p1{font-weight: bold;}.p2{font: oblique bold 16px "华文楷体";}</style>
</head>
<body>
<h1>符文之地与魔法</h1>
<p class="p1">在符文之地，魔法就是一切。</p>
<p class="p2">在这里，魔法不只是一种神秘莫测的能量概念。它是实体化的物质，可以被引导、成形、塑造和操作。符文之地的魔法拥有自己的自然法则。源生态魔法随机变化的结果改变了科学法则。</p>
<p>符文之地有数块大陆，不过所有的生命都集中在最大魔法大陆——瓦洛兰。瓦洛兰大陆居于符文之地中心，是符文之地面积最大的大陆。
</p>
<p>被祝福的符文之地上有大量源生态魔法能量，而此地居民可以触及其中的能量。符文之地的中心区域集中了数量巨大的源生态魔法能量，这些地方都是水晶枢纽的理想位置。水晶枢纽可以将源生能量塑形为自身实体化的存在。此外，水晶枢纽还可以成为能量车间，为需要魔法能量的建筑供能。水晶枢纽遍布符文之地，但最大的水晶枢纽都坐落在瓦洛兰大陆
</p><p>League of Legends
</p>
</body>
</html>
3.3 文本样式
主要包括：颜色、文本对齐方式、首行缩进、行高、装饰、文本图片水平对齐
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--
text-align:排版，居中
text-indent: 2em 首行缩进height: 50px;
line-height: 50px;
行高和块高一致，就可以上下居中text-decoration: underline:下划线vertical-align: middle:水平对齐
--><style>h1{color: rgba(0,0,255,0.9);text-align: center;}.p1{text-indent: 2em;}.p2{background: #ffb61e;height: 50px;line-height: 50px;}.p3{text-decoration: underline;}img,span{vertical-align: middle;}</style>
</head>
<body>
<h1>滕王阁序</h1>
<p class="p1">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
</p>
<p class="p2">时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
</p>
<p class="p3">披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦
</p><p>遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？
</p>
<p>嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！
</p>
<p>勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？
</p><p><img src="data:images/twg.jpg" alt=""><span>呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：</span>
</p>
</body>
</html>
3.4 阴影
text-shadow 属性
h1
{text-shadow: 2px 2px #ff0000;
}
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
3.5 超链接伪类
伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
a标签有4种伪类（即对应四种状态）。如下：
:link“链接”：超链接点击之前:visited“访问过的”：链接被访问过之后:hover“悬停”：鼠标放到标签上的时候:active“激活”： 鼠标点击标签，但是不松手时。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*默认颜色*/a{text-decoration: none;color: #000000;}/*鼠标悬停颜色*/a:hover{color: cornflowerblue;font-size: 30px;}/*鼠标按住未释放*/a:active{color: chocolate;}/*阴影：*/#price{text-shadow: blueviolet 10px 10px 2px;}</style>
</head>
<body>
<a href="#"><img width="200" src="data:images/围城.png" alt="">
</a>
<p><a href="#">围城</a>
</p>
<p><a href="#">作者:钱钟书</a>
</p>
<p id="price">￥99
</p></body>
</html>
3.6 列表
list-style-type 属性设置
| 值 | 描述 |
|---|---|
| none | 无标记。 |
| disc | 默认。标记是实心圆。 |
| circle | 标记是空心圆。 |
| square | 标记是实心方块。 |
| decimal | 标记是数字。 |
| decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
| cjk-ideographic | 简单的表意数字 |
| hiragana | 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
| katakana | 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
| hiragana-iroha | 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
| katakana-iroha | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
【HTML代码】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title><link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li><li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li><li><a href="#">电脑</a> <a href="#">办公</a></li><li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li><li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li><li><a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li></ul></div></body>
</html>
【HTML代码】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title><link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li><li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li><li><a href="#">电脑</a> <a href="#">办公</a></li><li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li><li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li><li><a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li></ul></div></body>
</html>
【CSS代码】
#nav{width: 300px;/*渐变*/background-color: #0093E9;background-image: linear-gradient(208deg, #0093E9 0%, #80D0C7 100%);}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: orange url("images/d.jpg") 270px 10px no-repeat;background-size: 15px;
}
/*
list-style:none :去掉原点circle:空心圆decimal :数字square:正方形*/
ul{background-color: #0093E9;background-image: linear-gradient(208deg, #0093E9 0%, #80D0C7 100%);}
ul li{height: 30px;list-style: none;text-indent: 1em;background-image: url("images/10.png");background-size:10px ;background-repeat: no-repeat;background-position: 236px 2px ;
}
a{text-decoration: none;font-size: 14px;color: #000000;
}
a:hover{color: #47a7ff;text-decoration: underline;
}
【效果】
四、盒子模型
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。
盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如图所示
4.1 content（内容区域）
盒子的内容，显示文本和图像。CSS中的width和height属性直接作用的区域。
width：指的是内容的宽度，而不是整个盒子真实的宽度。
height：指的是内容的高度，而不是整个盒子真实的高度。
4.2 padding（内填充）
padding即内边距，padding的区域是有背景颜色的。且背景颜色和内容区域的颜色一致。
1.padding有四个方向，所以能够分别描述四个方向的padding。
2.padding描述方法分两种：（1）小属性；（2）综合属性（空格隔开）
注意：padding不支持负值
/* 小属性设置 控制每个方向上的宽度*/
padding-top: 30px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 30px;
/* 综合属性，用空格隔开 顺时针方向 上右下左*/
padding: 20px 30px 40px 50px/*只设置了三个值：上 左右 下*/
padding: 20px 30px 40px;/*只设置两个值：上下 左右*/
padding: 35px 45px;/*只设置一个值：上下左右*/
padding: 20px;
4.3 border（边框）
border是边框的意思，边框有三要素：粗细、线性、颜色。
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
三要素的特性：
border: 5px solid blue;
1.如果颜色不写（blue），默认是黑色；
2.如果粗细不写（5px），默认是不显示的。
3.如果只写了线性样式（solid），默认上右下左3px的宽度，默认是黑色。
注意：设置border样式有两种方法：按照三要素、按照方向。
/*1.按照3要素*/
border-width: 5px;
border-style: solid;
border-color: red;/*3要素进阶*/
border-width: 5px 10px; /* 上下：5px 左右：10px */
border-style: solid dotted double dashed; /* 顺时针：上:实线边框 右:点状虚线 下:双线 左:矩状虚线 */
border-color: red green yellow; /*上:红 左右:绿 下:黄*//*2.按照方向去分，这块也可以简写*/
/*上*/
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
/*右*/
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
/*下*/
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
/*左*/
border-left-width: 10px;
border-left-color: red;
border-left-style: solid;
4.4 margin（外边距）
margin： 外边距，指的是元素与元素之间的距离。
margin特性：
1）margin 的4个方向
2）margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，但是也属于盒子的一部分
3)margin是添自身的,如果哪个想要改变自己的位置，就给谁添加margin html的部分标签自带margin padding p body ul
margin垂直方向塌陷问题及解决：
当两个兄弟盒子设置垂直方向的margin时，以较大的margin值为准，这种现象称为“塌陷”。
4.5 阴影
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影 |
向 div 元素添加 box-shadow：
div
{box-shadow: 10px 10px 5px #888888;
}
【代码演示】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 50px;margin: 30px;background: #ffb61e;border-radius: 50px 50px 0 0 ;box-shadow: 10px 10px 100px yellow;}img{img: 0 auto;border-radius: 50px;width: 100px;height: 100px;box-shadow: 10px 10px 150px gold;}</style>
</head>
<body>
<div></div>
<div1 style="width: 500px; display: block;text-align: center"><img src="data:images/02.jpg" alt="">
</div1></body>
</html>
【效果】
五、浮动
5.1 标准文档流
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
5.2 块级元素与行内元素
块级元素
特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
2.元素的高度、宽度、行高和顶底边距都是可以设置的。
3.元素的宽度如果不设置的话，默认为父元素的宽度。
常见的块级元素：div、p、h1、h6、ol、ul、dl、table、address、blockquote 、form
行级元素
特点：1.可以和其他元素处于一行，不用必须另起一行。
2.元素的高度、宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
display:inline将块级元素设为行级元素
display:block将行级元素设为块级元素
display:inline-block将元素设置为行级-块级元素；可以设置高度、宽度、行高以及顶和底边距，又可使元素处于一行
【代码演示】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;border: 1px solid rebeccapurple;display: inline-block;}span{width: 100px;height: 100px;border: 1px solid rebeccapurple;}</style></head>
<body>
<div>div元素</div>
<span>span元素</span>
</body>
</html>
5.3 父级边框塌陷的问题
clear 定义和用法
clear 属性规定元素的哪一侧不允许其他浮动元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
解决方案：
1.增加父级元素高度
简单，元素假设有了固定的高度，就会被限制
#father{border: 1px #000000 solid;height: 800px;
}
2.在最后一个子元素后加一个空的div，给他添加样式clear，清除两侧浮动；
这种方法也很有效，但是加了一个空的div，造成代码的冗余。
<div class="clear"></div>.clear{clear: both;margin: 0;padding: 0;}3.父级元素添加overflow：hidden；
overflow是溢出管理的意思，但是有一点不好，在有下拉菜单的时候，下拉菜单会显示不出来
overflow: hidden;
4.父类添加after伪类【推荐】
#father:after{content: '';display: block;clear: left;
}
【代码演示-HTML+CSS】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father"><div class="layer01"><img style="width: 100px" src="data:images/11.jpg" alt=""> </div><div class="layer02"><img style="width: 150px" src="data:images/12.jpg" alt=""> </div><div class="layer03"><img style="width: 200px" src="data:images/13.jpg" alt=""> </div><div class="layer04">前不见古人，后不见来者。念天地之悠，独怆然而涕下。</div>
<!-- 方案2: <div class="clear"></div>--></div>
</body>
</html>
div{margin: 10px;padding: 5px;
}#father{border: 1px #000000 solid;/*方案一:height: 800px;*//*方案三:overflow: hidden;*/
}
/*方案四*/
#father:after{content: '';display: block;clear: left;
}.layer01{border: 1px #F00 dashed;display: inline-block;float: left;
}
.layer02{border: 1px #0F0 dashed;display: inline-block;float: left;
}
.layer03{border: 1px #00F dashed;display: inline-block;float: left;
}
.layer04{border: 1px #666 dashed;display: inline-block;font-size: 12px;line-height: 23px;
}
/*方案二*/
/*.clear{*/
/* clear: both;*/
/* margin: 0;*/
/* padding: 0;*/
/* }*/
【代码效果】
六、定位
| 属性 | 描述 |
|---|---|
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 |
| clip | 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 |
| vertical-align | 设置元素的垂直对齐方式。 |
| z-index | 设置元素的堆叠顺序。 |
6.1 相对定位
相对定位元素的定位是相对其正常位置，元素仍保持其未定位前的形状，它原本所占的空间仍保留。
position: relative;
top:-20px;
left: 5px;
【代码演示】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{padding: 20px;}div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #ffb61e;padding: 0;}#first{border: 1px dashed #59ff18;background: #0093E9;position: relative;top:-20px;left: 5px;}#second{border: 1px dashed #222bff;background: #e98727;}#third{border: 1px dashed #e615ff;background: #5ee9c8;position: relative;bottom:-20px;}</style>
</head>
<body>
<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>
【练习代码】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;padding: 10px;border: 2px solid red;}a{width: 100px;height: 100px;text-decoration: none;background: #e615ff;line-height: 100px;text-align: center;color: white;display: block;}a:hover{background: #0093E9;}.a2,.a4{position: relative;left: 200px;top: -100px;}.a5{position: relative;left: 100px;top: -300px;}</style>
</head>
<body>
<div id="box"><a class="a1" href="#">链接1</a><a class="a2" href="#">链接2</a><a class="a3" href="#">链接3</a><a class="a4" href="#">链接4</a><a class="a5" href="#">链接5</a>
</div>
</body>
</html>
【效果】
6.2 绝对定位
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
性对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
6.3 固定定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{height: 1000px;}div:nth-of-type(1){/*绝对定位*/width: 100px;height: 100px;background: red;position: absolute;right: 0;bottom: 0;}div:nth-of-type(2){/*固定定位*/width: 100px;height: 50px;background: #0093E9;position: fixed;right: 0;bottom: 0;}</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4 z-index
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div id="content"><ul><li><img width="200" src="data:images/02.jpg" alt=""></li><li class="tipText"> Taylor Swift</li><li class="tipBg"></li><li>出生：1989-12-13</li><li>地点:美国宾夕法尼亚州</li></ul>
</div>
</body>
</html>
#content{width: 198px;padding: 0px;margin: 0px;overflow: hidden;font-size: 12px;line-height: 25px;border: 1px solid #000000;
}
ul,li{padding: 0px;margin: 0px;list-style: none ;
}
/*父级元素相对定位*/
#content ul{position: relative;
}
.tipText,.tipBg{position: absolute;width: 200px;height: 25px;top: 150px;
}
.tipText{color: white;z-index: 2;
}
.tipBg{background: #000;opacity: 0.3;/*背景透明度!*/
}
【效果】
前端技术（2）— CSS（超详解）相关推荐
- 【响应式Web前端设计】CSS 定位详解
文章目录 1 position 属性的作用 2 static 属性值 3 relative,absolute,fixed 3.1 relative 属性值 3.2 absolute 属性值 3.3 f ...
- Mybatis案例超详解
Mybatis案例超详解 前言: 本来是想像之前一样继续跟新Mybatis,但由于种种原因,迟迟没有更新,快开学了,学了一个暑假,博客也更新了不少,我觉得我得缓缓,先整合一些案例练练,等我再成熟点理解 ...
- CSS基本操作详解及截图演示
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- css名词解析,小说CSS样式详解
CSS格式详解 字体格式(font) 字体 表格题目位置 once:只朗读一次(默许值): always:多次朗读: inherit:启当: 文字年夜小 font-size: xx-small | x ...
- 专科计算机ppt论文,计算机应用技术专业毕业论文PPT详解.ppt
计算机应用技术专业毕业论文PPT详解 第五章 管理员界面 * 5.1 注册用户管理界面 当注册用户在首页的导航栏里点击"注册用户注册"时,系统跳转至此页. * 5.2 新闻信息管理 ...
- [转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇
前端-chromeF12 谷歌开发者工具详解 Sources篇 原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 cons ...
- VINS技术路线与代码详解
VINS技术路线 写在前面:本文整和自己的思路,希望对学习VINS或者VIO的同学有所帮助,如果你觉得文章写的对你的理解有一点帮助,可以推荐给周围的小伙伴们,当然,如果你有任何问题想要交流,欢迎随时探 ...
- 消息队列超详解（以RabbitMQ和Kafka为例，为何使用消息队列、优缺点、高可用性、问题解决）
消息队列超详解(以RabbitMQ和Kafka为例) 为什么要用消息队列这个东西? 先说一下消息队列的常见使用场景吧,其实场景有很多,但是比较核心的有3个:解耦.异步.削峰. 解耦:现场画个图来说明一 ...
- JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
- Android vector标签 PathData 画图超详解
此文章来源于https://www.cnblogs.com/yuhanghzsd/p/5466846.html点击打开链接 Android vector标签 PathData 画图超详解 SVG是一种 ...
最新文章
- java 正则 捕获_Java通过正则表达式捕获组中的文本
- qnx efs文件系统binary修复
- MFC一一添加WM_USER自定义消息
- Python 按坐标进行文字剪裁
- 若依集成aj-captcha实现滑块验证码（单体版）
- 不同芯片的 Mac 电脑，差距会逐渐拉大吗？
- vue、cnpm不是内部文件_选购办公室钢制文件柜花都文件柜厂家为我们全面解读这一块的知识...
- 安装autocad2006出错
- 第二章 马原刷题（1）
- 明朝经典战役\明朝挽救历史狂澜\于谦人生最高点\北京保卫战
- 用树莓派组装了一台电脑
- 使用PHPstudy在Windows服务器下部署PHP系统
- pip 查看要安装的包的所有版本的方法
- Outlook邮件创建的规则失效，可能的原因
- Maven依赖版本号不生效
- PDF转WORD工具 Solid Converter PDF v9.1.6744
- 设计*** 得到远程主机的注册表
- python中年大叔学编程_中年大叔学编程-Python环境安装
- 外包以小时计算金额的费用_嘉德集团外包费测算表(2016版)
- 微信公众号阅读10万+的文章其实充满套路