如何加深对CSS盒子和阴影的使用,要点有哪些
Admin 2022-08-25 群英技术资讯 468 次浏览
在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章
首先我们先来了解CSS的三大特点,以便于我们下面知识点的讲解
CSS三大特性包括:
当相同的选择器设置相同的样式,却含有不同的样式值时,此时一个样式就会覆盖掉另一个冲突的样式,层叠性就是为了解决这个问题
层叠性原理:
下面给出代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠性</title>
<!-- 对于下方div我们给出两个div的css设置 -->
<style>
/* 下面这种情况,颜色就出现了层叠性,因就近原则,这里div呈blue色 */
/* 同时,font-size因未发生冲突,不产生层叠性 */
div{
color: black;
}
div{
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
CSS中的继承:
下面给出代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承性</title>
<!-- 当我们不设置p属性仅设置div属性时,p会继承div的属性 -->
<style>
div{
color: pink;
}
</style>
</head>
<body>
<div>
<p>123321</p>
</div>
</body>
</html>
继承中的特殊属性-行高:
下面给出代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承性</title>
<!-- 我们可以直接设置行高为字体大小的倍数,以便于后来的开发 -->
<style>
div{
color: pink;
font: 12px/1.5;
}
</style>
</head>
<body>
<div>
<p>123321</p>
<p>123321</p>
</div>
</body>
</html>
当一个元素指向多种选择器时,会产生优先级
每种选择器都具有一定的权重:
选择器 | 选择器权重 |
---|---|
继承或* | 0.0.0.0 |
元素选择器 | 0.0.0.1 |
类选择器,伪类选择器 | 0.0.1.0 |
ID选择器 | 0.1.0.0 |
行内样式 | 1.0.0.0 |
!important 重要的 | 无穷大 |
注意:
权重叠加:
盒子模型是我们网络布局的最基础元素
网络布局过程:
盒子模型由四部分组成:
边框border可以设置元素的边框,边框由三部分组成:边框宽度,边框样式,边框颜色
语法:
border-color:边框颜色
border-width:边框宽度
border-style:边框款式(solid实线,dashed虚线)
border:颜色 宽度 款式(可以简化一起设置)
边框是可以分别设置的:
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
当我们只希望改变一条边框时,可以先定义全边框,再定义特别边框,这样css就会利用层叠性实现效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子边框</title>
<style>
div {
height: 30px;
width: 50px;
/* 我们先定义全边框 */
border: 1px black dashed;
/* 随后定义特殊边框,采用层叠性覆盖所需边框的原本边框设计 */
border-top: 2px red solid;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意:当两侧都具有边框时,边框会汇聚在一起导致边框效果大打折扣
所以css提供了border-collapse:collapse来合并边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小说排名案例</title>
<!-- 接下来我们对表格进行边框设计 -->
<style>
table{
/* 对table设置一个范围大小 */
height: 240px;
width: 500px;
}
table,th,td {
/* 对全部设置一个边框以及字体设置 */
border: 1px solid black;
/*
合并相邻的边框
当两侧都具有边框时,中间边框会变成两侧边框之和(边框相聚)
我们需要采用border-collapse: collapse来合并边框
*/
border-collapse: collapse;
/* 我们稍微设置一下字体以及对齐 */
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>上升</td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>上升</td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>上升</td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>上升</td>
<td>456</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</table>
</body>
</html>
注意:边框会影响盒子实际大小
所以我们在设计盒子时需要保留边框粗细大小
例如:
padding属性用来设计内边距,即边框与内容之间的距离
主要分为四个内边距:
内边距也存在简写方法:
/* 全部内边距 */
padding: 5px
/* 上下和左右 */
padding: 5px 10px
/* 上和左右和下 */
padding: 5px 10px 15px
/* 上和右和下和左 */
padding: 5px 10px 15px 20px
注意:padding也会影响盒子的大小
当存在padding时,盒子大小也会相应增加相对大小
所以我们在设计盒子时,同样也需要留下padding距离的大小
案例:巧妙利用padding设计导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>padding应用于导航栏</title>
<style>
.nav {
/* 首先给大导航栏设计好高度和边框和底板颜色,设置line-height使文字始终居中 */
height: 41px;
border-top: 3px orange solid;
border-bottom: 1px #edeefe solid;
background-color: #edeefea2;
line-height: 41px;
}
a{
/* 需要先变成行内块元素才可以具有高度,我们需要高度来形成一个框架,使整个框架都是超链接 */
display: inline-block;
height: 41px;
font-size: 12px;
text-decoration: none;
color:#4c4c4c;
/* 我们采用padding方法控制超链接之间的距离,使其相隔一段距离且不受字体长短影响 */
padding: 0 20px;
}
a:hover{
/* 我们希望在鼠标滑动在链接上时有明显显示 */
background-color: bisque;
color:red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">设为首页</a>
<a href="#">新浪客户端</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>
特定情况:当盒子没有设置height或者width时,padding不会撑开盒子
margin用来设置外边距,即控制盒子与盒子之间的距离
主要分为四个外边距:
外边距和内边距的简写方法也与padding完全相同:
/* 全部内边距 */
margin: 5px
/* 上下和左右 */
margin: 5px 10px
/* 上和左右和下 */
margin: 5px 10px 15px
/* 上和右和下和左 */
margin: 5px 10px 15px 20px
外边距典型应用:使块级盒子水平居中
要求:
下面给出代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素居中</title>
<!-- 给盒子设置宽度且盒子的左右margin为auto -->
<style>
.nav{
background-color: pink;
height: 200px;
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="nav"></div>
</body>
</html>
接下来我们也稍微介绍一下对于行内块/行内元素居中的方法:
下面给出代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级元素居中</title>
<!-- 给盒子设置宽度且盒子的左右margin为auto -->
<style>
.nav{
background-color: pink;
height: 200px;
width: 500px;
margin: 0 auto;
/* 在这里设置text-align即可使内部元素居中 */
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<span>123</span>
</div>
</body>
</html>
嵌套块元素垂直外边距塌陷问题:
解决方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距塌陷问题</title>
<!-- 当父类和子类都具有外边距时,父类会以较大的外边距为主进行移动 -->
<!-- 如下所示,父亲的外边距为100px,儿子仍旧紧贴父亲 -->
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
注意:因为网页很多元素都带有内外边距,且在各浏览器中标准不同,所以我们通常清除内外边距
我们常常把这行代码作为css内容的第一行
* {
padding: 0;
margin: 0;
}
稍微提一句:行内元素尽量只设置左右内外边距
让我们通过HTML和CSS还原下面这个网页排版
图片:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例</title>
<!-- 正常情况来说,我们分HTML和CSS两部分书写,但为了讲解简单,我们放在同一HTML中书写 -->
<style>
/* 第一步,去除内外边距 */
* {
padding: 0;
margin: 0;
}
/* 第二步,设置框架大盒子 */
.box {
/* 数据都是采用PS测量,以后你们做项目时也会给出相应值或自己测量 */
height: 415px;
width: 298px;
background-color: rgba(255, 255, 255, 0);
/* 我们希望把盒子居中显示 */
margin: 100px auto;
}
/* 第三步:我们设置图片和盒子一样宽 */
.box img {
width: 100%;
}
/* 第四步:设置第一行小字 */
.review {
font-family: 微软雅黑;
font-size: 14px;
/* 注意:设置整体高度,使无论多少文字,底部都是对齐的 */
height: 70px;
padding: 0 28px;
margin-top: 30px;
}
/* 第五步:设置第二行小字 */
.appraise {
font-family: 微软雅黑;
font-size: 12px;
color: #b0b0b0;
padding: 0 28px;
margin-top: 28px;
}
/* 第六步:设置最后一行小字,我们分几部分设置 */
.info {
font-size: 14px;
padding: 0 28px;
margin-top: 15px;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
.info .price {
color: #ff6700;
}
</style>
</head>
<body>
<div class="box">
<!-- 首先我们放入照片 -->
<img src="案例照片/1.png" alt="图片">
<!-- 放入第一行文字 -->
<p class="review">快递牛,整体不错,蓝牙都可以秒连</p>
<!-- 放入第二行文字 -->
<p class="appraise">来自1923134的评价</p>
<!-- 最后一行文字 -->
<p class="info"><span class="name">Redmi AirDots真无线蓝...</span><em>|</em><span class="price">99.9元</span></p>
</div>
</body>
</html>
在这里插上一句:(因为我自己第一次做时出现了问题所以想向你们提醒一下)
除了正常的布局改善,我们也可以通过其他方法获得好看的图形样式
例如圆角边框和阴影,就会为我们的Web页面起到美化的作用
border-radius就是用来控制图形四角的曲度
div {
/*
border-radius:length;里面设置的边角圆的半径,也可也设置百分比
如果你想获得一个圆形,需要把高度宽度设置一致且length设置成图形直径的一半即可();
如果你想获得一个圆角矩形,只需把length设置为高度的一半即可
注意:这里的角仍旧可以单独设置
当两个值时顺序分别是左上和右下,右上和左下
当四个值时顺序分别是左上,右上,右下,左下
*/
border-radius:length;
}
box-shadow用来设置盒子阴影
box-shadow通常有六个内部设置,一般直接简写:
下面我们给出代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style>
/* 可以直接设置框架 */
div {
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
margin: 100px auto;
}
/*
也可以设置在当移动上才可显示
div:hover {
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
margin: 100px auto;
}
*/
</style>
</head>
<body>
<div></div>
</body>
</html>
text-shadow用来设置盒子阴影
box-shadow通常有四个内部设置,一般直接简写:
好的,CSS进阶内容—盒子和阴影我们就讲到这里,你是否全部了解了呢?
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
下面小编就为大家带来一篇html的footer置于页面最底部的简单实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
CSS中的border边框属性,一些朋友可能会遇到这方面的问题,对此在下文小编向大家来讲解一下,内容详细,易于理解,希望大家阅读完这篇能有收获哦,有需要的朋友就往下看吧!
location指示了其所连接对象的url位置。Document和window对象中都有location属性,可以通过window.location和document.location访问。注意如果想要获得当前文档的完整url字符串,有四种方式document.location
我们提到CSS响应布局的,就会想要使用Grid和Flexbox来实现,其实它们也有一些局限性。像瀑布流布局这种,就无法用它们来简单实现。这其中的原因就是瀑布流一般来说都是宽度一致,但
这篇文章我们来了解CSS中translate函数的相关内容,translate用于定义元素的平移转换,是比较使用的一个元素,在实现动画效果的时候,经常会使用到,因此本文就给大家来介绍一下translate函数的用法,有需要的朋友可以参考,接下来就跟随小编来一起学习一下吧!
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008