第50天学习打卡（CSS 圆角边框 盒子阴影 定位）
4.4圆角边框
圆角边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
边框border:左上 右上 右下 左下：顺时针方向
圆圈：圆角=半径 + 边框
-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 20px;
}
</style>
</head>
<body>
<!--div是空标签 可以设置宽高-->
<div></div>
</body>
</html>
4.5盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--margin: 0 auto
使用的前提条件：要有块元素，块元素有固定的宽度
-->
<style>
img{
border-radius: 50px;
box-shadow:10px 10px 100px yellow;
}
</style>
</head>
<body>
<div style="width: 500px; height: 1000px; display: block;text-align: center">
<img src="data:images/12.jpg" alt="">
</div>
<div> </div>
</body>
</html>
推荐网站：模板之家 vue-element-admin 飞冰（阿里）
5浮动
5.1标准文档流
块级元素：独占一行
h1~h6 p div 列表
行内元素：不独占一行
span a img strong ...
行内元素可以 包含在块级元素中，反之，则不可以
5.2 display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
block:块元素
inline 行内元素
inline-block:即是行类元素也是块元素 保持块的形状写成一行
none:消失
-->
<style>
div{
width:100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width:100px;
height: 100px;
border: 1px solid red;
display:inline-block ;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
1.这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
5.3float
1.左右浮动float
div{
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: left;
clear: both;
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: right;
clear: both;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float:right;
clear: both;
}
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="data:images/2.jpg" alt=""></div>
<div class="layer02"><img src="data:images/3.jpg" alt=""></div>
<div class="layer03"><img src="data:images/5.jpg." alt=""></div>
<div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含区域另一个浮动盒子为止</div>
</div>
</body>
</html>
5.4父级边框塌陷的问题
clear:
/*
clear:right; 右侧不允许有浮动元素
clear:left;左侧不允许有浮动元素
clear:both;两侧不允许有浮动元素
clear:none;可以浮动
*/
解决方案：
1.增加父级元素的高度
#father {
border: 1px #000 solid;
height: 2800px;
}
2.增加一个空的div 标签，清楚浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="data:images/2.jpg" alt=""></div>
<div class="layer02"><img src="data:images/3.jpg" alt=""></div>
<div class="layer03"><img src="data:images/5.jpg." alt=""></div>
<div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含区域另一个浮动盒子为止</div>
<div>class="clear"</div>
</div>
</body>
</html>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3.overflow
在父级元素中增加一个overflow:hidden (里面没有高度是被内容元素所覆盖的，最后的高度是根据内容元素来的)
4.父类中添加一个伪类：after
#father:after{
content: '';
display: block;
clear: both;
}
小结：
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类中添加一个伪类：after（推荐使用）
写法稍微复杂一点，但是没有副作用，推荐使用
5.5对比
display：
方向不可以控制
float:
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
6定位
默认情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
}
#first{
background-color: #9e1818;
border: 1px dashed #e03f3f;
}
#second{
background-color: #bdd412;
border: 1px dashed #9aa833;
}
#third{
background-color: #e78d07;
border: 1px dashed #de9322;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位
相对于自己原来的位置进行偏移
-->
<style>
div{
margin: 20px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
}
#first{
background-color: #9e1818;
border: 1px dashed #e03f3f;
/* relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其它元素的布局*/
position: relative;/*相对定位：上下左右*/
top:-20px;
left: 20px;
}
#second{
background-color: #bdd412;
border: 1px dashed #9aa833;
}
#third{
background-color: #e78d07;
border: 1px dashed #de9322;
position: relative;
bottom: -20px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位：position :relative;
相对于原来的位置，进行指定的偏移,相对定位的话，它任然在标准文档流中，原来的位置会被保留。
top:-20px;
left: 20px;
bottom: -20px;
right: 20px;
练习
<!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: #b470b4;
line-height: 100px;
text-align: center;
color: white;
/*display: block;把类元素变成为块元素*/
display: block;
}
a:hover{
background: deepskyblue;
}
.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绝对定位
定位：基于xxx定位，上下左右
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative;
}
#first{
background-color: #9e1818;
border: 1px dashed #e03f3f;
}
#second{
background-color: #bdd412;
border: 1px dashed #9aa833;
position: absolute;
left: 100px;
}
#third{
background-color: #e78d07;
border: 1px dashed #de9322;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3固定定位fixed
<!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){
/*fixed 固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4 z-index
图层
z-index:默认是0，最高无限
<!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 src="data:images/2.jpg" alt=""></li>
<li class="tipText">学习微服务，找狂神</li>
<li class="tipBg"></li>
<li>时间:2099-01-02</li>
<li>地点:1022星球一号基地</li>
</ul>
</div>
</body>
</html>
opacity: 0.3;背景透明度
#content{
width: 1000px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
/*去标题的小黑点*/
list-style: none;
}
/*父级元素相对对位 子级元素可以进行绝对定位了*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 1000px;
height: 25px;
top: 770px;
}
.tipText{
color: white;
/*z-index: 999;*/
}
.tipBg{
background: #000;
/*opacity: 0.3;!*背景透明度*!*/
filter: opacity(0.2);
}
第50天学习打卡（CSS 圆角边框 盒子阴影 定位）的更多相关文章
- css标签样式 边框 盒子模型 定位 溢出 z-index 透明度
目录 一.CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色(3种表示方法) 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换 二.盒子模型 ...
- css圆角边框
一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
- DIV+CSS圆角边框
简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,. ...
- CSS学习系列1 - CSS中的盒子模型 box model
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距. 盒子模型有一个属性box-sizing属性来说明是否包括 ...
- 第50天学习打卡（JavaScript）
前端三要素 HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容. CSS(表现):层叠样式表(Cascading Style Sheets) ...
- css3神奇的圆角边框、阴影框及其图片边框
css3圆角,建议IE10以上 如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状 如果border-radius 为50%,则为椭圆:当宽高一致时, ...
- CSS进阶内容—盒子和阴影详解
CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...
- [css]《css揭秘》学习（四）-一个元素实现内圆角边框
如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...
- 重新学习html和css
当初学习前端的时候,属于快速入门那种,没有好好深入学习html和css.如今,在空闲时间重新拿起基础书学习,都会写到一些新的知识. 1.css实现圆角.渐变功能.使用border-radius以及li ...
随机推荐
- 【STM32】串口
一. 串口中断使能问题 错误: 串口只能接收一次数据,从串口助手发第二个数据时接收不到. 分析: 在UART_Receive_IT(huart)函数里,回调函数的上面有如下代码: 这几行代码的作用是关 ...
- Scrambled Polygon POJ - 2007 极角排序
题意: 给你n个点,这n个点可以构成一个多边形(但是不是按顺序给你的).原点(0,0)为起点,让你按顺序逆序输出所有点 题解: 就是凸包问题的极角排序 用double一直Wa,改了int就可以了 // ...
- Codeforces Round #633 div2 A~C
A. Filling Diamonds 题意:给你n个菱形方块,问能构成图示形状的有多少种 题解:自己画几个不难发现答案是n 代码: 1 #include <iostream> 2 #in ...
- Medium Free
fetch(window.location.href,{credentials:"omit",redirect:"follow",mode:"no-c ...
- 1.nginx安装和基本配置
作者 微信:tangy8080 电子邮箱:914661180@qq.com 更新时间:2019-07-10 20:56:10 星期三 欢迎您订阅和分享我的订阅号,订阅号内会不定期分享一些我自己学习过程 ...
- vue中获取元素并控制相应的dom
1 在标签中使用ref="xxx" 2 在methods中调用this.$refs.xxx this.$refs.xxx.$el获取dom 注意1:大多数情况下为了复用方法,将xx ...
- cs实时系统之网关设计
今天给大家讲一下client-server系统(cs)设计,基本结构 1.client 客户端,插件式开发,负责对应ui的展示 2.gateway 网关层,管理客户端通信连接,负载后端集群服务 3.s ...
- Java 对象的哈希值是每次 hashCode() 方法调用重计算么？
对于没有覆盖hashCode()方法的对象 如果没有覆盖 hashCode() 方法,那么哈希值为底层 JDK C++ 源码实现,实例每次调用hashcode()方法,只有第一次计算哈希值,之后哈希值 ...
- php foundation knowledge！
php foundation knowledge! 1 <?php 2 $p = "PII"; 3 define("XPI",3.1415926); 4 ...
- 如何在没有显示器的情况下，查看 Raspberry Pi 3的 IP 信息（Raspberry Pi 3 ，IP Address）
1. 如何在没有显示器的情况下,查看 Raspberry Pi 3的 IP 信息(Raspberry Pi 3 ,IP Address) 1 IP Address Any device connect ...