标签：color 元素 基础 height width background CSS 200px
溢出(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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。