CSS基础(二)
作者：互联网
溢出(overflow)
- 值解析
- visible: 溢出的值会在容器之外显示(默认)
- hidden: 溢出的值会被隐藏
- scroll: 溢出的内容会被提供滚动条,方便用户显示
- auto: 有溢出就提供滚动条,没有就不提供滚动条
- inherit: 继承父容器的overflow属性
- overflow-x: x轴溢出
- overflow-y: y轴溢出
- 实例1
<style>
div {
width: 200px;
height: 200px;
background-color: yellow;
overflow: hidden; # 多余的部分剪掉
}
</style>
......
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, quia, tempora. Accusantium ad aperiam cupiditate distinctio dolorum earum error est excepturi nam, possimus quidem temporibus unde ut. Atque, incidunt, molestiae.
</div>
- 实例2
<style>
div {
width: 200px;
height: 200px;
background-color: yellow;
overflow-y: auto; # y轴方向自动适应
overflow-x: hidden; # x轴方向隐藏
}
</style>
......
<div>很多文字</div>
块级元素(block)/行内元素(inline)
- 依据所占据的空间区分
- 块级元素:独占一行
- 行内元素:有多少就占多少
- 宽度和高度区分
- 块级元素:可以对其设置宽高
- 行内元素:不可以对其设置宽高
- 行内块元素(inline-block):同时具有块级元素和行内元素的特征
- 常见的块级元素:
- div/p/ul/ol/li/dl/dt/dd/h1~h6
- 常见的行内元素:
- a/b/em/i/span/strong
行内块元素
- 常用的两个
- img
- input
- 实例: <img> 即可以设置宽高,也可以和 <span>在一块
<style>
img {
width: 100px;
height: 100px;
}
</style>
......
<body>
<span>111111111111111</span>
<img src="pretty.png" alt="">
</body>
- 注意:对于'行内元素',边距只能设置左右,无法设置上下,实例
<style>
span {
background-color:yellow;
margin:100px;
}
</style>
......
<body>
<span>111111111111111</span> # span效果上,只有左右边距,没有上下
</body>
- <a>标签与<div>之间样式问题
- 当<a>标签设置内边距的时候,div的内容会渗透进来
解决办法: <a>标签变成'行内块'元素即可解决
- 实例
<style>
a {
background-color:black;
color:white;
padding:10px; # 设置内边距
}
</style>
......
<body>
<a href="">链接一</a>
<a href="">链接二</a>
<a href="">链接三</a>
<a href="">链接四</a>
<div>111111111</div> # 内容会渗透进去
</body>
- 解决:加一句即可: display:inline-block;
- display:none 隐藏内容
- 基础示例
<style>
.hide {
display: none; # 隐藏显示,页面上什么都没有
}
</style>
......
<body>
<div class="hide">111111111</div>
</body>
- 实例:鼠标移动到特定位置,才显示内容;否则就隐藏内容
<style>
div {
width:200px;
height:200px;
background-color:yellow;
}
p {
display:none; # 正常状态下,隐藏内容
}
div:hover p {
display: block; # 鼠标移动过来,就显示内容
}
</style>
......
<body>
<div class="container">
<p>测试内容测试内容测试内容测试内容</p>
</div>
</body>
- 选择器之间用'空格',表示"后代选择器"
- 选择器之间用'>',表示"子代选择器"(只有'亲儿子'才会生效)
- 二级菜单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0; # 清除所有的边距
margin: 0;
}
.box {
width: 300px;
margin: 0 auto;
}
ul {
list-style: none;
}
.box .item {
float: left;
/*width: 150px;*/ 有边框的话,宽度会变大,有一个会被挤下去
width: 148px;
text-align: center;
border: 1px solid blue;
background-color: blue;
color: white;
line-height: 40px;
}
.item:hover {
background-color: lightblue;
}
.item ul {
display: none;
background-color: white;
color: black;
}
.item:hover ul {
display: block;
}
.item li:hover {
color: blue;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">视频教程
<ul>
<li>全部视频教程</li>
<li>Python教程</li>
<li>Java教程</li>
<li>Go教程</li>
</ul>
</li>
<li class="item">认证考试
<ul>
<li>英语认证考试</li>
<li>C++认证考试</li>
</ul>
</li>
</ul>
<script>
</script>
</body>
</html>
- 二级菜单练习:自己的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue2.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width:100%;
height:50px;
background-color: #018dd6;
}
.list {
list-style: none;
width: 300px;
margin: 0 auto;
}
.item {
float: left;
width:148px;
text-align: center;
line-height:50px;
border:1px solid white;
}
.item:hover {
background-color:navajowhite;
}
.list-son {
list-style: none;
background-color:greenyellow;
display:none;
}
.item:hover ul {
display:block;
}
.item ul li:hover {
color:red;
}
</style>
</head>
<body>
<div class="container">
<ul class="list">
<li class="item">菜单一
<ul class="list-son">
<li class="item-son">子菜单一</li>
<li class="item-son">子菜单一</li>
<li class="item-son">子菜单一</li>
</ul>
</li>
<li class="item">菜单二
<ul class="list-son">
<li class="item-son">子菜单二</li>
<li class="item-son">子菜单二</li>
<li class="item-son">子菜单二</li>
</ul>
</li>
</ul>
</div>
<script>
</script>
</body>
</html>
position 位置
- 重要参数
- static: 默认值
- absolute: 绝对定位
- 当没有父元素/父元素没有定位,参照物是浏览器窗口的'第一屏'
- 有父元素且父元素有定位,参照父元素
- relative: 相对定位
- 参照 自己本身的 初始位置
- fixed: 固定定位
- 固定在浏览器窗口
- sticky: 粘性定位
- 可以做出'吸顶效果'(兼容性不好)
- 四个值:
- left/right/top/bottom
- 其他值
- z-index: 值越大,该元素越往上
position 实例
- 实例1:三个色块盒子,static(静态)演示
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: yellow;
position: static; <!--默认值-->
top:100px; <!--无效果-->
}
.box2 {
background-color: red;
}
.box3 {
background-color: blue;
}
</style>
......
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
- 实例2: relative演示,相对于自身
效果: box2色块位置虽然空出来,但是其他两个色块并没有趁机占空间,还是在原来的位置
......
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: yellow;
}
.box2 {
background-color: red;
position: relative; <!--相对于自身移动位置-->
top: 100px; <!--设定要移动的像素-->
left: 100px;
}
.box3 {
background-color: blue;
}
</style>
- 注意事项: top/left 也可以使用负值,比如写成'-100px'
- 实例3: absolute演示,当没有父元素/父元素没有定位的时候,参考窗口
.....
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
position: absolute; <!--相对与浏览器窗口,左/上各移动了100px-->
left: 100px;
top:100px
}
</style>
......
<body>
<div class="box"></div>
</body>
- 此时若再来一个div块,里面填充很多文本,box颜色块依然会'浮动'在文本上面,脱离文档流..
- 当有父元素,但是父元素没有定位的时候,依旧是参考浏览器
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 500px;
height: 500px;
background-color: blue;
margin: 0 auto; <!--父元素没有定位-->
}
.child {
width: 200px;
height: 200px;
background-color: red;
position: absolute; <!--依旧参考浏览器-->
left: 100px;
top: 100px;
}
</style>
......
<div class="parent">
<div class="child"></div>
</div>
- 当父元素也有定位的时候(一般设置成 relative,但是不设置left/top),子元素就会参考父元素的位置
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 500px;
height: 500px;
background-color: blue;
margin: 0 auto;
position: relative; <!--父元素有定位,一般不设置 left/top -->
}
.child {
width: 200px;
height: 200px;
background-color: red;
position: absolute; <!--依旧参考浏览器-->
left: 100px;
top: 100px;
}
</style>
......
<div class="parent">
<div class="child"></div>
</div>
- 注意事项:若此时 父元素 position 修改为: absolute,margin居中的效果会消失
容器移动到浏览器的左上角(默认效果),子容器依然会距离父元素100px
即父元素变了,但子元素不会变
fixed 永远固定在指定的位置
- 两个色块(一个设置很高的高度,另一个充当'广告位')
<style>
* {
padding: 0;
margin: 0;
}
.box {
width:100%;
height:1500px;
background-color: yellow;
}
.ad {
width:200px;
height: 100px;
background-color:red;
position: fixed; /*位置固定,且必须指定固定的位置,这里如果修改成 absolute,那么当滚动到下方的时候,'广告位'就消失了*/
right: 0; /*永远固定在右上角*/
top: 0;
}
</style>
......
<body>
<div class="box"></div>
<div class="ad"></div>
</body>
sticky 粘性定位
- 三个色块(菜单栏,小块的导航条,大块内容部分)
当鼠标滚动下来时,固定住'导航条'(需指示固定的位置)
<style>
* {
padding: 0;
margin: 0;
}
.header {
height: 100px;
background-color:yellow;
}
.nav {
width: 500px;
height: 50px;
background-color:red;
margin: 0 auto;
position: sticky; /*粘性定位*/
top:0; /*与顶部没有边距*/
}
.body {
height: 1000px;
background-color:green;
}
</style>
......
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="body"></div>
</body>
- 是否脱离文档流
- fixed/absolute 会脱离文档流,其他均不会脱离
案例:容器里面,图片的定位
......
<style>
.container { /*外层容器设置宽,高度,居中背景色显示*/
width:500px;
height:500px;
margin:0 auto;
background-color: yellow;
}
.box { /*里层容器设置宽,高度,边框,并设置'相对定位',用来定位图片*/
width:275px;
height:275px;
border:6px solid red;
position:relative;
}
.box .pic { /*大图片占满整个'里层容器'*/
width:100%;
height:100%;
}
.box .icon { /*小图片设置'绝对定位',并设置图片的'不透明度'*/
position:absolute;
left:7px;
bottom:7px;
opacity:0.5;
}
.box .greenicon { /*鼠标移动到'里层容器',小图片的'显示'和'不显示'*/
display:none;
}
.box:hover .greenicon {
display:block;
}
</style>
......
<div class="container">
<div class="box">
<img src="bg.jpg" alt="" class="pic">
<img src="1.png" alt="" class="icon greenicon">
</div>
</div>
标签：color,元素,基础,height,width,background,CSS,200px 来源： https://www.cnblogs.com/qinganning/p/16693857.html