CSS--盒子模型

文章目录

  • 一、开发者工具
    • 1.1 打开方式
    • 1.2 位置调整
    • 1.3 选择箭头
    • 1.4 Elements
    • 1.5 Console
    • 1.6 Sources
    • 1.7 Network
  • 二、盒子模型
    • 2.1 位置
    • 2.2 应用
    • 2.3 外边距合并
  • 三、 Style中的样式关系
    • 3.1 解读顺序
    • 3.2 样式位置
    • 3.3 删除线
    • 3.4 Style中的快速调整

一、开发者工具

1.1 打开方式

浏览器菜单---->工具---->开发者工具或者是按快捷键F12

1.2 位置调整

点击右上角三个点,位置依次对应分离、左、下、右
CSS--盒子模型_第1张图片

1.3 选择箭头

CSS--盒子模型_第2张图片
当用该箭头选中网页中的一部分内容时,会在工具中标注出相应的代码。
CSS--盒子模型_第3张图片

1.4 Elements

作用:展示网页中的标签代码。
CSS--盒子模型_第4张图片

1.5 Console

控制台,调试网页使用。

1.6 Sources

存放网页的各种资源,同时也包含源代码。

1.7 Network

显示与java交互的完整信息,包括传递的参数以及请求等信息。

二、盒子模型

盒子模型对应每个html标签在网页中的位置。

2.1 位置

开发者工具—>Elements—>Styles最下方
CSS--盒子模型_第5张图片

margin为外边距,border为边框,padding为内边距,里面的蓝色部分为内容。

2.2 应用

先写一段html代码:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			a:hover {
      
				color: red;
			}

			.class1 {
      
				margin: 25px 50px 75px 100px;
			}

			.class2 {
      
				margin: 25px  50px 100px;
			}
			.class3 {
      
				margin: 25px 100px;
			}
			.class4 {
      
				margin: 25px;
			}
		style>
	head>
	<body>
		<a href="http://www.baidu.com" target="_blank">百度a>
		<div class="class1">AAAAdiv>
		<div class="class2">BBBBdiv>
		<div class="class3">CCCCdiv>
		<div class="class4">DDDDdiv>
	body>
html>

效果展示:
CSS--盒子模型_第6张图片
在开发者工具中解读盒子模型(以Margin为例,Padding与此相同):
(1)margin为4个变量时:
CSS--盒子模型_第7张图片

结合上边.class1的代码,可以看出margin为4个属性值时一次代表上、右、下、左

(2)margin为3个变量时:
CSS--盒子模型_第8张图片

结合.class2的代码,margin为3个属性值时依次代表上、(右左)、下

(3)margin为2个变量时:
CSS--盒子模型_第9张图片

结合.class3的代码,margin为2个属性值时依次代表 (上下)、(右左)

(4)margin为2个变量时:
CSS--盒子模型_第10张图片

结合.class4的代码,margin为1个属性值时依次代表 (上下右左)

2.3 外边距合并

当2个垂直的外边距相遇时,它们将形成一个外边距。合并后的边距等于两个之中的大者

三、 Style中的样式关系

Style模块除了盒子模型之外,还有上方的样式关系
CSS--盒子模型_第11张图片

3.1 解读顺序

样式关系的解读顺序是由下往上,因为越靠近下方越是默认的样式。
CSS--盒子模型_第12张图片

3.2 样式位置

CSS--盒子模型_第13张图片

3.3 删除线

删除线代表带有删除线的样式被优先级更高的样式取代
CSS--盒子模型_第14张图片

3.4 Style中的快速调整

在开发者工具中,可以快速实时调整代码。可以在样式前直接勾选与否来添加或去除模式,同时也可以手动编辑代码改变样式,但是不会影响到源代码
CSS--盒子模型_第15张图片

你可能感兴趣的:(CSS,css)