HTML基础--CSS样式表（二）
2024-04-26 06:09:27
1.元素显示类型
- 元素类型的分类，依据CSS的显示
- 块元素（block element）
- 行内（内联元素）
- 行内块元素
- 块元素
- A)块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域
- B)默认情况下，块状元素都会占据一行，默认情况下，块状元素会按顺序自上而下排列
- C)块状元素都可以定义自己的宽度和高度
- D)块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素。我们把这种容器比喻为一个盒子
- 例如：div p ul li ol dl dt dd h1-6等
- 行内（内联元素）
- A)内联元素的表现形式始终以行内逐个进行显示（横着排）
- B)内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据所包含的高度和宽度来确定，它的最小内容单元也会呈现矩形形状
- C)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效
- 例如: a b em i span strong等
- 行内块元素
- 行内块元素（inline-block）就是同时具备内联元素、块状元素的特点
- 例如：img input等
①.块元素
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: red;}</style>
</head><body><pre>块元素：display:block;display:list-item;</pre><div class="box"></div><ul><li>111</li><li>222</li><li>333</li></ul><!-- p标签里面只能放文本，不能放块级元素 --><p>1111111111</p><h1>title</h1></body>
②.行内元素与行内块元素
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 200px;height: 100px;}input {width: 50%;height: 60px;background-color: red;color: yellow;border: 2px solid blue;}</style>
</head><body><!-- display:inline --><b>111111111</b><em>22222222</em><span>33333333</span><a href="www.baidu.com">444444444</a><i>55555555555</i><strong>6666666</strong><!-- 行内块元素display:inline-block--><img src="../img/2056309.jpg" /><input type="text" /></body>
③盒子模型
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 100px;padding: 0;margin: 0;border: 1px solid red;}.span1 {/* span标签行内元素，只能设置左右边距，不能设置上下边距 */width: 1000px;height: 50px;background-color: yellow;padding: 10px;margin: 10px;border: 1px solid blue;}img {padding: 10px;margin: 10px;}</style>
</head><body><div class="box"></div><span class="span1">111111</span><img src="../img/2056309.jpg" alt="" />
</body>
④元素类型的转化
可以将display属性改成block\inline\inline-block
- 新闻导航案例
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {background-color: black;color: white;padding: 10px;display: inline-block;}a:hover {background-color: red;}.home {background-color: red;}</style></head><body><a href="" class="home">首页</a><a href="">国内</a><a href="">国际</a><a href="">军事</a><a href="">财经</a><div>111111</div>
</body>
⑤display:none
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.hide {display: none;}.box:hover ul {/* background-color: yellow; */display: block;}</style>
</head><body><div class="box">军事<ul class="hide"><li>111</li><li>222</li><li>333</li></ul></div>
</body>
2.二级菜单案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 300px;margin: 0 auto;}ul {list-style: none;}.box .item {width: 148px;float: left;text-align: center;border: 1px solid blue;background-color: blue;color: white;}.item:hover {background-color: rgba(128, 128, 250, 0.815);}.item ul {display: none;background-color: white;color: black;}.item:hover ul {display: block;}.item li:hover {color: lightblue;background-color: grey;}</style>
</head>
<body><ul class="box"><li class="item">视频教程<ul><li>全部视频教程</li><li>HTML5教程</li><li>JAVA视频教程</li><li>Python视频教程</li></ul></li><li class="item">认证考试<ul><li>pmp</li><li>红帽</li></ul></li></ul>
</body>
</html>
3.安利首页案例
* {padding: 0;margin: 0;
}ul {list-style: none;
}.con {width: 966px;margin: 0 auto;
}.header {height: 116px;background-color: white;}.logo {width: 265px;height: 110px;background-image: url(../img/2054377.jpg);background-size: cover;background-repeat: no-repeat;float: left;
}.headerright ul {height: 44px;margin-top: 10px;line-height: 44px;
}.headerright li {float: left;
}.headerright {float: right;
}.headerright li a {border-right: 1px solid #b2c7ea;padding: 0 13px;font-size: 13px;color: black;}.headerright .last {border: 0;padding-right: 0;}.headerright li .active {color: #eb6ca1;
}.search {float: right;width: 234px;height: 28px;border: 1px solid grey;
}.search input {border: 0;outline: none;
}.search .left {width: 196px;float: left;height: 28px;padding-left: 14px;/* box-sizing: border-box; */
}.search .right {float: right;width: 24px;height: 28px;background-image: url(../img/2054509.jpg);background-size: cover;background-repeat: no-repeat;background-position: left middle;
}.nav {height: 53px;line-height: 53px;border-top: 1px solid #657588;color: white;background-color: #0c345c;
}.nav li {float: left;font-size: 14px;margin-right: 75px;
}.banner {height: 379px;background-image: url(../img/2054783.jpg);background-size: cover;background-repeat: no-repeat;background-position: center;
}.list {height: 213px;background-color: white;margin-top: 51px;margin-bottom: 35px;
}.item {width: 305px;height: 211px;border: 1px solid #ccc;float: left;margin-right: 19px;
}.item img {width: 305px;height: 164px;display: block;}.item p {height: 47px;line-height: 47px;text-align: center;font-size: 16px;color: black;
}.list>.itemlast {margin-right: 0;
}.footer {border-top: 1px solid #ccc;width: 100%;height: 206px;/* background-image: url(../img/footer.jpg); */background-color: rgba(170, 170, 170, 0.548);background-repeat: repeat;}.footitems {padding-top: 30px;height: 84px;padding-bottom: 30px;border-bottom: 1px solid grey;line-height: 28px;}.footitems li {float: left;padding-left: 30px;width: 211px;font-size: 12px;color: #369;
}.footer p {height: 61px;line-height: 61px;padding-left: 30px;font-size: 12px;}.footer span {color: #0096da;
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>哔哩哔哩</title><link rel="stylesheet" href="../css/index.css"><!-- 版心--两边留白，通栏---占满宽度-->
</head><body><div class="header con"><div class="logo"></div><div class="headerright"><ul><li><a class="active">吸铁石</a></li><li><a>压力马斯内</a></li><li><a class="active">基尼太美</a></li><li><a>光翼展开</a></li><li><a>天动万象</a></li><li><a class="last active">你这背景太假了</a></li></ul><div class="search"><input type="text" placeholder="搜索" class="left" /><input type="submit" value="" class="right" /></div></div></div><div class="nav "><ul class="con"><li>114514</li><li>才不是什么应急食品</li><li>塞口你还铁鸭子大</li><li>转圈圈</li><li>最伟大的作品</li><li>这么说你很勇哦</li></ul></div><div class="banner"> </div><div class="list con"><div class="item"><img src="../img/2055030.jpg" alt="" /><p>诶嘿，定囊达哟</p></div><div class="item"><img src="../img/2055077.jpg" alt="" /><p>神里流水囿</p></div><div class="item itemlast"><img src="../img/2055093.jpg" alt="" /><p>风灵玉秀</p></div></div><div class="footer"><div class="con"><ul class="footitems"><li>半径20m的绿宝石水花</li><li>遇到困难睡大觉</li><li>当完美计划遇到变化时</li><li>绝区零</li><li>我将扭转万象</li><li>格蕾修梦游仙境</li><li>我刚提的新车</li><li>你充Q币吗</li><li>傻fufu</li><li>原来是用这种方式解决的吗</li><li>砸瓦鲁多</li><li>你可识的此阵</li></ul><p>我虽无意逐鹿，却知苍生苦楚。2022©HOMO-MiX®,备案号<span>1919180</span>号</p></div></div>
</body></html>
4.定位
- 定位：position
| 个数 | 书写语法 | 说明 | 文档流 | 偏移位置（top left right bottom）时候的参照物 |
|---|---|---|---|---|
| 1 |
position:static
|
默认值 | 默认 | 默认 |
| 2 |
position:absolute
|
绝对定位 | 脱离 | A)当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏 B)有父元素且父元素有定位，父元素 |
| 3 |
position:relative
|
相对定位 | 不脱离 | 自己的初始位置 |
| 4 |
position:fixed
|
固定定位 | 脱离 | 浏览器的当前窗口 |
| 5 |
position:sticky
|
粘性定位 | 可以做吸顶效果，粘性定位是CSS3.0新增的，兼容性不好 |
- 层叠顺序（z-index）
- z-index属性是不带单位的，并且可以给负值，没有z-index时，最后写的对象优先显示在上层，设置后，数值越大，层级越靠上
1.静态定位与相对定位
- 脱不脱离文档流指的是原本自己的位置是否还存在
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;}.box1 {background-color: red;}.box2 {background-color: yellow;position: relative;top: 100px;left: 100px;}.box3 {background-color: blue;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body></html>
2.绝对定位
- 子绝父相，一般来说父盒子设置成相对定位，子盒子设置成绝对定位
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background-color: yellow;position: absolute;top: 100px;left: 100px;}.father {width: 500px;height: 500px;background-color: red;margin: 0 auto;position: relative;top: 400px;}.child {width: 100px;height: 100px;background-color: blue;left: 20px;top: 100px;position: absolute;}</style>
</head><body><div>Lorem ipsum dolor sit, amet consectetur adipisicing elit.Deserunt doloremque est officiis a dignissimos fugaesse eaque?Quia optio aut tempore libero dolorum dolores porro,adipisci iste quae, a cumque.</div><div>Lorem ipsum dolor sit, amet consectetur adipisicing elit.Deserunt doloremque est officiis a dignissimos fugaesse eaque?Quia optio aut tempore libero dolorum dolores porro,adipisci iste quae, a cumque.</div><div>Lorem ipsum dolor sit, amet consectetur adipisicing elit.Deserunt doloremque est officiis a dignissimos fugaesse eaque?Quia optio aut tempore libero dolorum dolores porro,adipisci iste quae, a cumque.</div><div class="box"></div><div class="father"><div class="child"></div></div>
</body></html>
3.固定定位
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 100%;height: 1500px;background-color: yellow;}.ad {width: 10%;height: 400px;background-color: red;position: fixed;right: 0;bottom: 0px;}</style>
</head><body><div class="box"></div><div class="ad"></div>
</body></html>
4.粘性定位
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.header {background-color: red;width: 100%;height: 100px;}.nav {background-color: yellow;width: 500px;height: 50px;margin: 0 auto;position: sticky;/* top: 50px; */top: -30px;}.body {height: 1000px;background-color: blue;}</style>
</head><body><div class="header"></div><div class="nav"></div><div class="body"></div>
</body></html>
5.定位案例
-
opacity: 0.7;透明度
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.container {width: 912px;height: 600px;margin: 0 auto;background-color: white;}.box {width: 275px;height: 275px;border: 6px solid rgba(138, 137, 137, 0.527);position: relative;float: left;margin-right: 25px;margin-bottom: 25px;}.icon {position: absolute;bottom: 7px;left: 7px;width: 47px;height: 47px;}.pic {width: 100%;height: 100%;opacity: 1;}.selecticon {display: none;}.box:hover .selecticon {display: block;}.tip img {width: 47px;height: 47px;}.tip {position: absolute;top: 0;left: 0;color: white;display: none;padding: 7px 5px;}.box:hover .tip {display: block;}.box:hover .pic {opacity: 0.7;}.right {margin-right: 0px;}</style>
</head><body><div class="container"><div class="box"><img class="pic" src="../img/2054377.jpg" alt="" /><img src="../img/2054509.jpg" alt="" class="icon" /><img src="../img/2054783.jpg" alt="" class="icon selecticon" /><div class="tip"><img src="../img/2055077.jpg" alt="" style="float: left" /><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat libero illum rerumeaque veniam quae sed possimus ex error obcaecati sapiente, enim dolore, nostrum amet quasvoluptates quisquam culpa inventore.</p></div></div><div class="box"><img class="pic" src="../img/2055090.jpg" alt="" /><img src="../img/2054509.jpg" alt="" class="icon" /><img src="../img/2054783.jpg" alt="" class="icon selecticon" /><div class="tip"><img src="../img/2055077.jpg" alt="" style="float: left" /><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat libero illum rerumeaque veniam quae sed possimus ex error obcaecati sapiente, enim dolore, nostrum amet quasvoluptates quisquam culpa inventore.</p></div></div><div class="box right"><img class="pic" src="../img/2055093.jpg" alt="" /><img src="../img/2054509.jpg" alt="" class="icon" /><img src="../img/2054783.jpg" alt="" class="icon selecticon" /><div class="tip"><img src="../img/2055077.jpg" alt="" style="float: left" /><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat libero illum rerumeaque veniam quae sed possimus ex error obcaecati sapiente, enim dolore, nostrum amet quasvoluptates quisquam culpa inventore.</p></div></div><div class="box"><img class="pic" src="../img/2055094.jpg" alt="" /><img src="../img/2054509.jpg" alt="" class="icon" /><img src="../img/2054783.jpg" alt="" class="icon selecticon" /><div class="tip"><img src="../img/2055077.jpg" alt="" style="float: left" /><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat libero illum rerumeaque veniam quae sed possimus ex error obcaecati sapiente, enim dolore, nostrum amet quasvoluptates quisquam culpa inventore.</p></div></div><div class="box"><img class="pic" src="../img/2055095.jpg" alt="" /><img src="../img/2054509.jpg" alt="" class="icon" /><img src="../img/2054783.jpg" alt="" class="icon selecticon" /><div class="tip"><img src="../img/2055077.jpg" alt="" style="float: left" /><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat libero illum rerumeaque veniam quae sed possimus ex error obcaecati sapiente, enim dolore, nostrum amet quasvoluptates quisquam culpa inventore.</p></div></div><div class="box right"><img class="pic" src="../img/2055096.jpg" alt="" /><img src="../img/2054509.jpg" alt="" class="icon" /><img src="../img/2054783.jpg" alt="" class="icon selecticon" /><div class="tip"><img src="../img/2055077.jpg" alt="" style="float: left" /><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat libero illum rerumeaque veniam quae sed possimus ex error obcaecati sapiente, enim dolore, nostrum amet quasvoluptates quisquam culpa inventore.</p></div></div></div>
</body></html>
6.三角形案例
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 0px;height: 0px;/* border-top: 20px solid red;border-bottom: 20px solid transparent;border-left: 20px solid transparent;border-right: 20px solid transparent; */border: 20px solid transparent;border-top: 20px solid red;}body {background-color: blue;}</style>
</head><body><div></div>
</body>
7.定位里的层级
- z-index的值越大，层级越大，越靠上显示
- 可以设置成负值，没有单位
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;}.box1 {background-color: red;position: relative;top: 50px;left: 50px;/* 层级 */z-index: 1;}.box2 {background-color: yellow;position: relative;z-index: -1;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>
8.绝对定位的深入探索
1.父子关系的绝对定位
- 在父盒子中设置z-index无效，要在子盒子中设置z-index
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: yellow;position: relative;/* z-index: 100; */}.child {width: 100px;height: 100px;background-color: red;position: absolute;top: 10px;left: 10px;z-index: -1;}</style></head>
<body><div class="box"><div class="child"></div></div>
</body>
2.兄弟关系的绝对定位
- 可以直接使用z-index
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: yellow;position: absolute;top: 100px;left: 100px;z-index: 1;}.child {width: 100px;height: 100px;background-color: red;position: absolute;top: 10px;left: 10px;}</style>
</head>
<body><div class="box"></div><div class="child"></div>
</body>
3.绝对定位可以使内联元素转换为块级元素
- 转换为块级元素的方法：
- 1.display：block
- 2.absolute
- 3.float:left
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {width: 100px;height: 100px;background-color: red;/* display: block; */position: absolute;}</style>
</head><body><span>Hello</span>
</body>
9.定位控制元素水平垂直居中
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background-color: red;margin: 0 auto;position: relative;/* position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px; */}.child {width: 100px;height: 100px;position: absolute;background-color: yellow;top: 50%;left: 50%;/* 这里设置百分比的话会直接使用父盒子的百分比 */margin-left: -50px;margin-top: -50px;}</style>
</head><body><div class="box"><div class="child"></div></div>
</body>
10.定位与浮动的区别
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: red;/* float:半脱离position:absolute:全脱离，不会出现文字环绕效果 */float: left;/* position: absolute; */}.box2 {width: 300px;height: 300px;background-color: yellow;}</style>
</head><body><div class="box1"></div><div class="box2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde nisi aperiam temporibus nulla sit. Possimus omnisdolorem dignissimos voluptatem animi officia blanditiis reprehenderit mollitia beatae commodi, nihil nobiscupiditate repudiandae?</div>
</body>
11.锚点
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;position: fixed;right: 0px;top: 100px}li {width: 270px;height: 50px;line-height: 50px;text-align: center;border: 1px solid black;}div {width: 100%;height: 600px;border: 1px solid #ccc;}/* 锚点作用：页面不同区域的跳转，使用a链接<a href="#锚点名字"></a><div id="锚点名字"></div> */</style>
</head><body><ul><li><a href="#a">哼啊啊啊啊</a></li><li><a href="#b">达咩达咩</a></li><li><a href="#c">never gonna let you down</a></li><li><a href="#d">路还在闯，我还在创</a></li></ul><div id="a">哼啊啊啊啊</div><div id="b">达咩达咩</div><div id="c">never gonna let you down</div><div id="d">路还在闯，我还在创</div>
</body>
12.精灵图
CSS Sprits的原理（图片整合技术）（CSS精灵）/雪碧图
一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术
二、图片整合的优势：
1）通过图片整合来减少服务器的请求次数，从而提高页面的加载速度
2）通过整合图片来减小图片的体积
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 103px;height: 32px;float: left;margin: 3px;background: yellow url(../img/jidongtools.png);}.box1 {background-position: -205px 0px;}.box2 {background-position: -205px -37px;}.box3 {background-position: -205px -74px;}.box4 {background-position: -205px -111px;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div>
</body>
13.宽高自适应
自适应
- 网页布局中经常要自定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或者子元素自动调整，这就是自适
宽度自适应高度自适应
- （1）宽度自适应
- 元素的快读的默认值为auto，不写状态下默认撑满整个屏幕，或者auto都是宽度自适应
- （2）高度自适应
- 元素高度的默认值{height:auto;}
- （1）宽度自适应
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}div {/* width: 100px; */width: auto;height: 100px;background-color: red;}body {height: 500px;background-color: yellow;}</style>
</head><body><div></div>
</body>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.header,.footer {width: 100%;height: 50px;background-color: red;}.body {/* height: 500px; */background-color: yellow;min-height: 500px;/* max-width: ;max-height: ;min-width: none; */}li {height: 100px;}</style>
</head><body><div class="header"></div><div class="body"><ul><li>1111</li><!-- <li>111111111</li><li>1111111</li><li>11111111</li><li>1111111</li><li>1111111111</li> --></ul></div><div class="footer"></div>
</body>
14.浮动元素的高度自适应
父元素不写高度的时候，子元素写了浮动后，父元素会发生高度塌陷
方法1：给父元素添加声明
overflow：hidden;(缺点：会隐藏溢出的元素)方法2：在浮动元素下方添加空块元素，并且给钙元素添加声明：
clear:both;height:0;overflow:hidden;(缺点：在结构里增加了空的标签，不利于代码的可读性，且降低了浏览器的性能)方法3：万能清除浮动法：选择符
after{content:"";clear:both;display:block;height:0;visibility:hidden;/overflow:hiden}高度塌陷：（指的是因为浮动而隐藏下面 的元素）
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.left,.right {width: 100px;height: 100px;float: left;}.left {background-color: red;}.right {background-color: yellow;}.content {width: 200px;height: 200px;background-color: blue;}/* .box {1.如果浮动过多，换行，就出现问题height: 100px;} */.box {overflow: hidden;}</style>
</head><body><div class="box"><div class="left"></div><div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis asperiores recusandae mollitia eiusveniam beatae explicabo laudantium sint nesciunt illo tempora laboriosam ex, eaque expedita voluptatemvoluptate provident ipsa quas.</div><!-- 2.增加空标签，不利于代码可读性 --><!-- <div style="clear: both;"></div> --></div><div class="content"></div>
</body>
- 下面代码说明overflow:hidden的弊端
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 300px;margin: 0 auto;overflow: hidden;}ul {list-style: none;}.box .item {width: 148px;height: 40px;line-height: 40px;float: left;text-align: center;border: 1px solid blue;background-color: blue;color: white;}.item:hover {background-color: rgba(128, 128, 250, 0.815);}.item ul {display: none;background-color: white;color: black;position: absolute;left: 0;top: 40px;}.item:hover ul {display: block;}.item li:hover {color: lightblue;background-color: grey;}.content {height: 100px;background-color: green;}li {position: relative;width: 148px;}</style>
</head><body><ul class="box"><li class="item">视频教程<ul><li>全部视频教程</li><li>HTML5教程</li><li>JAVA视频教程</li><li>Python视频教程</li></ul></li><li class="item">认证考试<ul><li>pmp</li><li>红帽</li></ul></li></ul><div class="content">111111111</div>
</body>
- 万能清除浮动法
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 300px;margin: 0 auto;/* overflow: hidden; */}ul {list-style: none;}.box .item {width: 148px;height: 40px;line-height: 40px;float: left;text-align: center;border: 1px solid blue;background-color: blue;color: white;}.item:hover {background-color: rgba(128, 128, 250, 0.815);}.item ul {display: none;background-color: white;color: black;position: absolute;left: 0;top: 40px;}.item:hover ul {display: block;}.item li:hover {color: lightblue;background-color: grey;}.content {height: 100px;background-color: green;}li {position: relative;width: 148px;}.box::after {content: "";clear: both;display: block;width: 0;height: 0;visibility: hidden;}</style>
</head><body><ul class="box"><li class="item">视频教程<ul><li>全部视频教程</li><li>HTML5教程</li><li>JAVA视频教程</li><li>Python视频教程</li></ul></li><li class="item">认证考试<ul><li>pmp</li><li>红帽</li></ul></li></ul><div class="content">111111111</div>
</body>
15.伪元素
1):after(与content属性一起使用，定义在对象后的内容)
如：div:after{content:url(logo.jpg)}
div:after{content:"文本内容“}
2):before与content属性一起使用，定义在对象前的内容。
如:div:before{content:"在其前面放置内容"}
3):first-letter:定义对象内的第一个字符的样式
4):first-line"定义对象内第一行文本的样式
- 正规的伪元素写法是两个冒号
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 伪元素 */div::first-letter {font-size: 27px;color: red;}div::first-line {color: yellow;}div::before {content: "aaa";}div::after {content: "bbbb";}</style>
</head><body><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quibusdam natus totam harum quae iustocumque, impedit ex esse! A tempore sit vel pariatur facilis necessitatibus quidem perferendis minus ratione.</div>
</body>
有关隐藏
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 100px;height: 100px;background-color: red;/* 不占位隐藏 *//* display: none; *//* 占位隐藏： */visibility: hidden;}.box2 {width: 100px;height: 100px;background-color: yellow;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>
16.窗口自适应
设置方法：htm,body{height:100%}
17.两栏布局
calc函数：例子：width:calc(100% - 200px)
- 作用：用于动态计算长度值
- 需要注意的是运算符前后都需要保留一个空格
- 任何长度值都可以使用calc（）函数进行计算
- 支持加减乘除运算
- 使用标准的数学运算优先级原则
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box1 {width: 200px;height: 100%;background-color: red;float: left;}.box2 {/* width: 80%; */width: calc(100% - 200px);height: 100%;background-color: yellow;float: left;/* margin-left: 200px; */}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>
三栏布局
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.left {background-color: red;width: 200px;height: 100%;float: left;}html,body {height: 100%;}.center {width: calc(100% - 400px);background-color: yellow;height: 100%;float: left;}.right {width: 200px;background-color: blue;height: 100%;float: right;}</style>
</head><body><div class="left"></div><div class="center"></div><div class="right"></div>
</body>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.top,.bottom {width: 100%;height: 50px;background-color: yellow;}.middle {height: calc(100% - 100px);background-color: red;}.left,.right {width: 100px;height: 90%;background-color: blue;float: left;}.center {width: calc(100% - 200px);background-color: green;height: 100%;float: left;}</style>
</head><body><div class="top"></div><div class="middle"><div class="left"></div><div class="center"></div><div class="right"></div></div><div class="bottom"></div>
</body>
HTML基础--CSS样式表（二）相关推荐
- HTML基础--CSS样式表（一）
1.CSS内部样式 一般会写在<heaad>标签中 <!DOCTYPE html> <html lang="en"> <head>& ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- 前端基础 CSS 第十一章 使用CSS样式表 ----暑假学习第七、八天
第十一章 使用CSS样式表 通过CSS样式定义,可以将网页制作得更加绚丽多彩.采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其他效果实现更加精确地控制.用CSS不仅可以做出令浏览者赏心悦目 ...
- 前端基础 CSS 第十一章 使用CSS样式表 特效属性部分 ----暑假学习第九天
第十一章 使用CSS样式表 11.8 定位属性 使用定位属性可以控制元素的位置,包括相对定位和绝对定位两种方式.相对定位指允许元素在相对于文档布局的原始位置上进行偏移,而绝对定位是指允许元素与原始文档 ...
- 【HTML基础】CSS样式表
目录 1 CSS样式表简介 2 CSS与HTML的三种组合方式 2.1 内联样式 2.2 内部样式表 2.3 外部引用 3 总结 参考文献 1 CSS样式表简介 定义: CSS是Cascading S ...
- (原创分享，改进版)CSS样式表速成！
大话CSS样式表速成 程序和美工一直是相辅相成的,一个好的Web项目需要不仅仅是程序的完美,同样一个好的用户使用页面,也可以 吸引一大部分用户.往往在传统的概念里,程序和美工总是被分开来说.一方面,这 ...
- css样式表和选择器
CSS样式----图文详解:css样式表和选择器 主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...
- JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
最新文章
- 《剑指offer》调整数组顺序使奇数位于偶数前面
- jsencrypt加密同一值返回不同密文_密码学原语如何应用？解析密文同态性的妙用...
- oracle11g基目录和主目录,Red Hat Enterprise Linux4.0 安装oracle11g
- git tag和分支的区别_GIT常用命令大全
- python引入redis_实操演练解读非关系型数据库—Redis
- 随手记_搞科研怎样读论文
- 长虹电视+刷回android,【原创教程】长虹智能电视Q3T手动升级and刷机救砖教程
- js一键批量打印_轻松用Lodop实现批量打印功能
- Ribbon界面开发
- 记录ubuntu20.04成功编译安装opencv4 c++环境
- 企业网站建设教程：自己怎么建网站，做网站的步骤有哪些
- xp重启计算机的快捷键,xp电脑关机重启快捷键如何使用
- 在 Microsoft Visual Studio Team System 和 Microsoft Visual SourceSafe 之间选择
- C措辞教程第四章: 数组(8)
- python学习之自动化运维(一)：shell的使用
- 微信公众号开发踩坑指南（3）——公众号返回超链接点击跳转并自动关闭
- Hard resetting via RTS pin...
- web前端移动端项目测试的几种方法
- 我的世界java英文版,大量教程
- P7395 弹珠游戏（2021 CoE-I C）