第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 ...
随机推荐
- Codeforces Round #627 (Div. 3) E - Sleeping Schedule（递推）
题意: 每天有 h 小时,有一序列 an,每次可以选择 ai 或 ai - 1 小时后睡觉,问从 0 次 0 时开始,最多在 l ~ r 时间段入睡多少次. 思路: 如果此时可达,计算此时可达的时间点 ...
- SPOJ1812 LCS2 - Longest Common Substring II【SAM LCS】
LCS2 - Longest Common Substring II 多个字符串找最长公共子串 以其中一个串建\(SAM\),然后用其他串一个个去匹配,每次的匹配方式和两个串找\(LCS\)一样,就是 ...
- 整体算力提升40% 芯片级安全防护 | 阿里云发布第七代ECS云服务器
2 月 8 日,阿里云宣布推出第七代 ECS 云服务器产品家族,基于最新的神龙架构,相较于上一代整体算力提升 40%,容器部署密度最大可提升 6 倍,是最佳的云原生载体,此外全量搭载安全芯片,实现&q ...
- Linux虚拟机封装成模板
对安装在VMware上的CentOS7.X进行封装,是为了后续的实验环境需要,可以批量去生成Linux系统.通过虚拟机模版来创建一台CentOS系统,跟原来机器一样,去掉了唯一性,而通过克隆出来的虚拟 ...
- 设计模式（二十二）——状态模式（APP抽奖活动+借贷平台源码剖析）
24.1 APP 抽奖活动问题 请编写程序完成 APP 抽奖活动 具体要求如下: 1) 假如每参加一次这个活动要扣除用户 50 积分,中奖概率是 10% 2) 奖品数量固定,抽完就不能抽奖 3) 活动 ...
- 牛客网多校第3场 C-shuffle card 【splay伸展树】
题目链接:戳这里 转自:戳这里 关于splay入门:戳这里 题意:给n个数,进行m次操作,每次都从n个数中取出连续的数放在最前面. 解题思路:splay的区间操作. 附代码: 1 #include&l ...
- C# 类 (5)
Static 静态成员 创建一个类,实例化它,然后使用实例的各种方法或者属性 然而有时候我们不想实例化这个类,难道我们就没法用他里面的成员了吗?比如计算矩形的面积,就是长*宽,万年不变 当然可以,用s ...
- 硬盘测试工具fio用法总结
一 fio介绍 linux下的一种常用的磁盘测试工具,支持裸盘和文件形式进行测试 二 硬盘测试常用名词 延迟:io的发起到返回写入成功的时间成为延迟,fio中延迟分为lat,slat,clat ...
- 全球最好 css3 website
http://www.awwwards.com/ http://www.revolution.pn/ http://www.bestcss.in/ http://www.csswinner.com/ ...
- TCP 协议三次握手过程分析
TCP 协议三次握手过程分析 TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: ...