CSS学习笔记5CSS的三大特性与盒子模型

news/2024/10/31 3:28:03/

CSS的三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级。

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一种冲突的样式。层叠性主要是解决样式冲突的问题

层叠性原则：

  1. 样式冲突，遵循的原则就是就近原则，哪个样式离结构近，就执行哪个样式
  2. 样式不冲突，不会层叠
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS层叠性</title><style type="text/css">div {color: red;font-size: 12px;}div {color: pink;}</style></head><body><div>XXXXX,XXXXX</div></body>
</html>

运行结果：XXX为粉色字体,大小12px

继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字母。简单的理解就是：子承父业。

  1. 恰当地使用继承可以简化代码，降低CSS样式的复杂性
  2. 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS继承性</title><style type="text/css">div {color: deeppink;font-size: 14px;}</style></head><body><div><p>龙生龙，凤生凤，老鼠的儿子会打洞</p></div></body>
</html>

运行结果：字体为粉色字体,大小14px

行高的继承

body{font:12px/1.5 Microsoft YaHei;
}
  1. 行高可以跟单位也可以不跟单位
  2. 如果子元素没有设置行高，则会继承父元素的行高1.5
  3. 此时子元素的行高是：当前子元素的文字大小*1.5
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>行高的继承</title><style type="text/css">body {color: deeppink;/* 字体大小/行高 字体 *//* font: 12px/24px 'Microsoft YaHei'; */font: 12px/1.5 'Microsoft YaHei';}div {/* 子元素继承了父元素body的行高1.5 *//* 1.5就是当前元素文字大小font-size的1.5倍 *//* 当前div的行高是21px */font-size: 14px;}p {/* 当前行高：1.5 * 16 = 24 */font-size: 16px;}/* li没有手动指定文字大小，则会继承父亲的文字大小，body 12px 所有li的文字大小为12px 当前li的行高：12 * 1.5 = 18px*/</style></head><body><div>粉红色的回忆</div><p>粉红色的回忆</p><ul><li>我没有指定文字大小</li></ul></body>
</html>

在这里插入图片描述

优先级

当同一个元素指定多个选择器，就会有优先级的产生

  1. 选择器相同，则执行层叠性
  2. 选择器不同，则根据选择器权重执行

选择器权重如下表所示

选择器选择器权重
继承或者*0,0,0,0
元素选择器0,0,0,1
类选择器，伪类选择器0,0,1,0
ID选择器0,1,0,0
行内样式表style1,0,0,0
!important 重要的无穷大
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS优先级</title><style type="text/css">div {color: deeppink !important;}.test {color: red;}#demo {color: green;}</style></head><body><div class="test" id="demo" style="color: purple;">你笑起来真好看</div></body>
</html>

运行结果：字体为粉色字体

权重叠加

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

  1. div ul li ------> 0,0,0,3
  2. .nav ul li ------> 0,0,1,2
  3. a:hover -----> 0,0,1,1
  4. .nav a ------> 0,0,1,1
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>权重的叠加</title><style type="text/css">/* 复合选择器会有权重叠加的问题 *//* 权重虽然会叠加，但是永远不会有进位的问题 *//* li的权重是0,0,0,1 */li {color: red;}/* ul li的权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */ul li {color: green;}/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */.nav li {color: deeppink;}</style></head><body><ul class="nav"><li>大猪蹄子</li><li>大肘子</li><li>猪尾巴</li></ul></body>
</html>

运行结果：字体为粉色字体

练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>权重练习</title><style type="text/css">.nav {color: red;}/* 继承的权重是0 */li {color: deeppink;}</style></head><body><ul class="nav"><li>人生四大悲</li><li>家里没宽带</li><li>网速不够快</li><li>手机没流量</li><li>学校没WiFi</li></ul></body>
</html>

运行结果：字体为粉色字体

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>权重练习</title><style type="text/css">.nav li {color: green;}/* 需求：把第一个小li颜色改为粉色并加粗 */.nav .pink {color: deeppink;font-weight: 700;}</style></head><body><ul class="nav"><li class="pink">人生四大悲</li><li>家里没宽带</li><li>网速不够快</li><li>手机没流量</li><li>学校没WiFi</li></ul></body>
</html>

在这里插入图片描述

盒子模型

网页布局的本质

网页布局过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子Box
  2. 利用CSS设置好盒子样式，然后摆放到相应的位置
  3. 往盒子里面装内容

网页布局的核心本质：就是利用CSS摆盒子

盒子模型组成

在这里插入图片描述

边框border

语法

border:border-width || border-style || border-color
属性作用
border-width定义边框粗细，单位是px
border-style边框的样式
border-color边框颜色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型之边框border</title><style type="text/css">div {width: 300px;height: 200px;/* border-width 边框的粗细，一般情况下都用px */border-width: 5px;/* border-style 边框的样式 solid 实线边框 */border-style: solid;/* border-color 边框的颜色 */border-color: deeppink;}</style></head><body><div></div></body>
</html>

在这里插入图片描述

/* border-style 边框的样式 dashed 虚线边框 */
border-style: dashed;

在这里插入图片描述

/* border-style 边框的样式 dotted 点线边框 */
border-style: dotted;

在这里插入图片描述

边框的复合写法

边框简写：

border:1px solid red; 没有顺序

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>边框的符合写法</title><style type="text/css">div {width: 300px;height: 200px;/* border-width: 5px;border-style: solid;border-color:deeppink; *//* 边框的复合写法 简写 */border: 5px solid deeppink;}</style></head><body><div></div></body>
</html>

边框分开写法：

border-top:1px solid red; /* 只设定上边框，其余同理 */

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>边框的符合写法</title><style type="text/css">div {width: 300px;height: 200px;border-top: 5px solid deeppink;border-bottom: 10px dashed purple;}</style></head><body><div></div></body>
</html>

在这里插入图片描述

练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>边框的练习</title><style type="text/css">/* 请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色 */div {width: 200px;height: 200px;/* border-top: 1px solid red;border-bottom: 1px solid blue;border-left: 1px solid blue;border-right: 1px solid blue; *//* border包含四条边 */border: 1px solid blue;/* 层叠性 只是层叠了上边框 *//* 若下面的语句在上面，上边框效果还是蓝色 */border-top: 1px solid red;}</style></head><body><div></div></body>
</html>

表格细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法

border-collapse:collapse;
  1. collapse单词是合并的意思
  2. border-collapse:collapse;表示相邻边框合并在一起

边框会影响盒子的实际大小

边框会额外增加盒子的实际大小，因此我们有两种方案解决

  1. 测量盒子大小的时候，不量边框
  2. 如果测量的时候包含了边框，则需要width/height减去边框宽度
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>边框会影响盒子的实际大小</title><style type="text/css">/* 我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框 */div {/* width: 200px; *//* height: 200px; *//* 宽度200px+左右各10px的边框=220px *//* 高度200px+上下各10px的边框=220px */width: 180px;height: 180px;background-color: pink;border: 10px solid red;}</style></head><body><div></div></body>
</html>

内边距

padding属性用于设置内边距，即边框与内容之间的距离

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型之内边距</title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;padding-left: 20px;}</style></head><body><div>哈哈哈哈哈哈哈哈哈呵呵呵呵呵呵呵呵噢噢噢噢噢噢噢噢哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div></body>
</html>

padding复合属性

值的个数表达意思
padding:5px;1个值，代表上下左右都有5像素内边距
padding:5px 10px;2个值，代表上下内边距是5像素，左右内边距是10像素
padding:5px 10px 20px;3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding:5px 10px 20px 30px;4个值，代表上是5像素，右是10像素，下是20像素，左是30像素，顺时针
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型之内边距</title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;/* padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px; *//* 内边距复合写法（简写） */padding: 20px;}</style></head><body><div>哈哈哈哈哈哈哈哈哈呵呵呵呵呵呵呵呵噢噢噢噢噢噢噢噢哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div></body>
</html>

在这里插入图片描述

内边距会影响盒子的实际大小

给盒子指定padding值之后，发生了2件事：

  1. 内容和边框有了距离，添加了内边距
  2. padding影响了盒子实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。

div {width: 200px;height: 200px;background-color: pink;padding: 20px;/*200+左右各20=240200+上下各20=240*/}

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可

div {width: 160px;height: 160px;background-color: pink;padding: 20px;}

案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>导航栏</title><style type="text/css">.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1xp solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {display: inline-block;height: 41px;padding: 0 20px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.nav a:hover {background-color: #eee;color: #ff8500;}</style></head><body><div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div></body>
</html>

在这里插入图片描述

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

margin简写方式代表的意义跟padding完全一致

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型之外边距</title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;}</style></head><body><div class="one">1</div><div class="two">2</div></body>
</html>

在这里插入图片描述

<style type="text/css">div {width: 200px;height: 200px;background-color: pink;}.one {margin-bottom: 20px;} </style>

在这里插入图片描述

<style type="text/css">div {width: 200px;height: 200px;background-color: pink;}/* .one {margin-bottom: 20px;} */.two {/* margin-top: 20px; *//* margin: 30px; */margin: 30px 50px;}</style>

在这里插入图片描述

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

  1. 盒子必须指定了宽度（width）
  2. 盒子左右的外边距都设置为auto
.header { width:96px;margin:0 auto; }

常见的写法，以下三种都可以：

  1. margin-left:auto; margin-right:auto;
  2. margin:auto;
  3. margin:0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外边距典型应用-块级盒子水平居中对齐</title><style type="text/css">.header {width: 900px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;}/* 行内元素或者行内块元素水平居中给其父元素添加text-align:center即可 */</style></head><body><div class="header"></div><div class="header"><img src="../img/1050135.jpg" ></div></body>
</html>

在这里插入图片描述

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

相邻块元素垂直外边距的合并

在这里插入图片描述

嵌套块元素垂直外边距的塌陷

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外边距合并-嵌套块元素垂直外边距塌陷</title><style type="text/css">.father {width: 400px;height: 400px;background-color: purple;}.son {width: 200px;height: 200px;background-color: pink;}</style></head><body><div class="father"><div class="son"></div></div></body>
</html>

在这里插入图片描述

		<style type="text/css">.father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/* 方案1border: 1px solid red;border: 1px solid transparent; *//* 方案2padding: 1px; *//* 方案3 */overflow: hidden;}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}</style>

在这里插入图片描述

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除一下网页元素的内外边距。

* {padding:0;	/*清除内边距*/margin:0;	/*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>清除内外边距</title><style type="text/css">/* 这句话也是我们css的第一行代码 */* {margin: 0;padding: 0;}span {background-color: pink;margin: 20px;}</style></head><body>123<ul><li>abc</li></ul><span>行内元素尽量只设置左右的内外边距</span></body>
</html>

PS基本操作

  1. 文件—>打开：可以打开我们要测量的图片
  2. Ctrl + R：可以打开标尺，或者试图—>标尺
  3. 右击标尺，把里面的单位改为像素
  4. Ctrl + 加号（+）可以放大视图，Ctrl + 减号（-）可以缩小视图
  5. 按住空格键，鼠标可以变成小手，拖动PS视图
  6. 用选区拖动可以测量大小
  7. Ctrl + D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

在这里插入图片描述

案例

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>产品模块</title><style type="text/css">* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 298px;height: 400px;background-color: #fff;/* 让块级的盒子水平居中对齐 */margin: 100px auto;}.box img {/* 图片的宽度和父亲一样宽 */width: 100%;}.review {height: 100px;font-size: 14px;/* 因为这个段落没有width属性，所有padding不会撑开盒子的宽度 */padding: 0 50px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 30px;}.info {font-size: 14px;margin-top: 15px;padding: 0 30px;}.info h4 {display: inline-block;font-weight: 400;font-size: 14px;}.info em {font-style: normal;}.info span {color: #FF6700;}</style></head><body><div class="box"><a href="#"><img src="../img/产品模块案例图.jpg" /></a><p class="review">一个充满个性的机械世界，2B裙子的摆动，让人沉迷其中无法自拔~</p><div class="appraise">来自于阿波的评价</div><div class="info"><h4><a href="#">游戏：《尼尔：机械纪元》</a></h4><em>|</em><span>199.9元</span></div></div></body>
</html>

在这里插入图片描述

案例2

新知识点：去掉li前面的项目符号（小圆点）

list-style:none;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}li {/* 去掉li前面的小圆点 */list-style: none;}.box {width: 248px;height: 163px;border: 1px solid #ccc;margin: 100px auto;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}.box ul li a {font-size: 12px;color: #666;text-decoration: none;}.box ul li a:hover{text-decoration: underline;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;}.box ul {margin-top: 7px;}</style></head><body><div class="box"><h3>游戏快报</h3><ul><li><a href="#">《双人成行》销量突破一百万</a></li><li><a href="#">生化危机8新预告“城堡”：探寻神秘城堡</a></li><li><a href="#">国产经营建造游戏《天神镇》试玩开放</a></li><li><a href="#">喜+1:地平线：零之曙光免费领取！</a></li><li><a href="#">《战国无双5》新公开4位登场武将</a></li></ul></div></body>
</html>

在这里插入图片描述


http://www.ppmy.cn/news/275712.html

相关文章

图形 4.2 SSAO算法 屏幕空间环境光遮蔽

图形 4.2 SSAO算法 屏幕空间环境光遮蔽

链接: SSAO算法 屏幕空间环境光遮蔽思维导图. SSAO算法 屏幕空间环境光遮蔽 SSAO介绍什么是AO SSAO原理详解SSAO介绍SSAO原理计算近似AO SSAO算法实现比较与分析拓展链接其他AO算法 SSAO介绍 什么是AO 链接: Unity Shader-Ambient Occlusion环境光遮蔽- puppet_master. 《尼…
阅读更多...
【Box3引擎摄像机扩展】Box3CameraSettings动画库

【Box3引擎摄像机扩展】Box3CameraSettings动画库

丨自定义Box3Camera 本文的灵感来源于UE中的弹簧臂组件&#xff0c;和样条组件。 弹簧臂组件参考&#xff1a;https://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UsingCameras/SpringArmComponents/ 样条组件参考&#xff1a;https://docs.unrealengine.com/4.…
阅读更多...
从摄影“鄙视链”说起，聊一聊XDR的安卓化之路

从摄影“鄙视链”说起，聊一聊XDR的安卓化之路

中二时期的我&#xff0c;是个cosplay爱好者&#xff0c;会穿着路人眼里的“奇装异服“去漫展&#xff0c;还会为心爱的角色筹备几个月只为出一套片。有圈子就有鄙视链&#xff0c;那种亮度极高、大光圈虚化的”糖水片”&#xff0c;会被圈内吐槽为——“视觉感受良好&#xff…
阅读更多...
【vue】vue网站设计----游戏导航网站

【vue】vue网站设计----游戏导航网站

1、引言 设计结课作业,课程设计无处下手&#xff0c;网页要求的总数量太多&#xff1f;没有合适的模板&#xff1f;数据库&#xff0c;java&#xff0c;python&#xff0c;vue&#xff0c;html作业复杂工程量过大&#xff1f;毕设毫无头绪等等一系列问题。你想要解决的问题&am…
阅读更多...
Unity Shader-Ambient Occlusion环境光遮蔽（AO贴图，GPU AO贴图烘焙，SSAO，HBAO）

Unity Shader-Ambient Occlusion环境光遮蔽（AO贴图，GPU AO贴图烘焙，SSAO，HBAO）

前言 十一放假很开心&#xff0c;正好赶上观望了了许久的《尼尔机械纪元》打折啦。窝在家里搞了三天三夜&#xff0c;终于E结局通关啦&#xff01;&#xff01;&#xff01;真的好久没玩过这么好玩的游戏了&#xff0c;于是乎我的废话应该会多不少&#xff0c;毕竟&#xff0c;…
阅读更多...
【HTML入门】记第一次写关于《尼尔机械纪元》网页

【HTML入门】记第一次写关于《尼尔机械纪元》网页

超简单的HTML 成果展示编程环境文件结构HTML 基础HTML 到底是什么&#xff1f;HTML 元素详解HTML 属性嵌套元素 HTML 文档详解标记文本标题&#xff08;Heading&#xff09;段落&#xff08;Paragraph&#xff09;列表&#xff08;List&#xff09;链接 HTML的注释 成果展示 听…
阅读更多...
人工智能-实验四

人工智能-实验四

第四次实验 一.实验目的 ​ 了解深度学习的基本原理。能够使用深度学习开源工具。学习使用深度学习算法求解实际问题。 二.实验原理 1.深度学习概述 ​ 深度学习源于人工神经网络&#xff0c;本质是构建多层隐藏层的人工神经网络&#xff0c;通过卷积&#xff0c;池化&…
阅读更多...
学顶教育：初级会计师领取证书有关事项

学顶教育：初级会计师领取证书有关事项

初级会计师职称证书是国家组织考试后颁发的专业技术资格证书&#xff0c;与纸质证书和电子证书具有同等法律效力。 考取初级会计师职称证书的有关事项如下&#xff1a; 1、领取方式 初级会计职称证书的领取方式有两种&#xff1a;现场领取和邮寄领取。 考生可任选其一。 部分…
阅读更多...
最新文章

Copyright @ 2022~2023