第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 ...
随机推荐
- Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2) E. Let Them Slide（数据结构+差分）
题意:问你有n个长度总和为n的数组 你可以移动数组 但不能移出长度为w的矩形框 问你每一列的最大值是多少? 思路:只有一次询问 我们可以考虑差分来解决 然后对于每一行数组 我们可以用数据结构维护一下 ...
- Codeforces Round #585 (Div. 2) E. Marbles(状压dp)
题意:给你一个长度为n的序列 问你需要多少次两两交换 可以让相同的数字在一个区间段 思路:我们可以预处理一个数组cnt[i][j]表示把i放到j前面需要交换多少次 然后二进制枚举后 每次选择一个为1的 ...
- 2019牛客多校 Round7
Solved:5 Rank:296 E Find the median (线段树) 题意:最开始一个空的数组 4e5次操作 每次把Li,Ri中的每个数插入进来 问当前的中位数 题解:把这n个区间离散化 ...
- codeforces 86D D. Powerful array
An array of positive integers a1, a2, ..., an is given. Let us consider its arbitrary subarray al, a ...
- AtCoder Beginner Contest 184 F - Programming Contest (双向搜索)
题意:有一个长度为\(n\)的数组,你可以从中选一些数出来使得它们的和不大于\(t\),问能选出来的最大的和是多少. 题解:\(n\)的数据范围是\(40\),直接二进制枚举贴TLE,之前写过这样的一 ...
- POJ 2195 & HDU 1533 Going Home(最小费用最大流)
这就是一道最小费用最大流问题 最大流就体现到每一个'm'都能找到一个'H',但是要在这个基础上面加一个费用,按照题意费用就是(横坐标之差的绝对值加上纵坐标之差的绝对值) 然后最小费用最大流模板就是再用 ...
- 7.PowerShell DSC之模式
DSC两种模式 DSC有两种模式,Push模式和Pull模式 Push模式 基本流程 写配置--编译生成mof--推送到目标服务器,由目标服务器LCM执行mof并进行指定的配置 优点 架构简单.成本低 ...
- MHA 高可用介绍
目录 MHA 介绍 MHA 简介(Master High Availability) MHA 工作原理(转载) MHA 架构 MHA 工具 Manager 节点 Node 节点 MHA 优点 MHA ...
- 从 MFC 移植程序到 wxWidgets 界面库 ——《定时执行专家 5.0》的界面实现
时隔十年的更新,最大的变化就是从 MFC 移植到 wxWidgets,界面也全部重现设计,图标也都进行了更换.wxWidgets(最新版 3.1.4,经典的开源.跨平台 C++ GUI类库)特有的 ...
- HDU - 4725 The Shortest Path in Nya Graph 【拆点 + dijkstra】
This is a very easy problem, your task is just calculate el camino mas corto en un grafico, and just ...