学习java之前端知识掌握Day004

已于 2022-09-12 15:06:45 修改
阅读量282 收藏 3
点赞数 4
分类专栏： HTML+CSS的学习呀 文章标签： java 学习 html 马力
于 2022-09-12 15:01:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qihaojinqiuma/article/details/126817109
版权

目录

盒子模型

内边距padding

外边距margin

外边距的妙用

盒子型模的尺寸

box-sizing

标准文档流的组成

display属性

浮动

高度塌陷

清除浮动

解决父级边框塌陷的方法

浮动元素后面加空div

设置父元素的高度

父级添加overflow属性

 父级添加伪类after

inline-block和float的区别

盒子模型

内边距padding

    padding-left 
    padding-right
    padding-top
    padding-bottom
    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>Document</title>
    <style>
        span {
            border: 1px solid red;
            /* 设置span标签中内容与边框之间的距离 */
            /* padding: 30px; */

            /* 设置上下内边距为20px，左右内边距为10px */
            /* padding: 10px 20px; */

            /* 上内边距10px，左右内边距20px 下内边距50px */
            /* padding: 10px 20px 50px; */

            /* 上内边距10px，左右内边距20px 下内边距50px */
            /* padding: 10px 20px 50px 80px; */

            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 60px;
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <span>我是span标签</span>
</body>
</html>

外边距margin

    margin-top
    margin-right
    margin-bottom
    margin-left
    margin

<!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>Document</title>
    <style>
        
        .father{
            border: 3px solid red;
        }
        .son{
            width: 220px;
            height: 200px;
            border: 1px dashed blue;
            /* margin-top: 20px;
            margin-right: 10px;*/
            /*父元素没有设置宽度，占整个一行，所以设置右边距是没有作用的 */
            /* margin-bottom: 20px;
            margin-left: 30px; */

            /* margin: 60px; */
            /* margin:20px 50px */
            /* margin:20px 50px 100px; */
            margin:20px 50px 100px 80px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

外边距的妙用

        网页居中对齐  margin:0px  auto;
        网页居中对齐的必要条件
            块元素
            固定宽度

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            border: 1px solid red;
            margin: 0px auto ;
            /* 元素内容水平居中通过 */
            text-align: center;
            /* 元素内容垂直居中，将行高属性与元素高度设置为一样就可以实现 */
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div>我是div元素</div>
</body>
</html>

盒子型模的尺寸


    

盒子模型总尺寸=border+padding+margin+内容宽度

box-sizing

content-box   默认值，盒子的总尺度
border-box    盒子的宽度或高度等于元素内容的宽度或高度
inherit   元素继承父元素的盒子模型模式

标准文档流的组成

    块级元素
        <h1>…<h6>、<p>、<div>、列表
    内联元素
        <span>、<a>、<img/>、<strong>...

display属性

    控制元素的显示和隐藏
    块级元素与行内元素的转变
    

浮动

设置左浮动  float:left
设置右浮动  float:right

高度塌陷

浮动元素脱离标准文档流

清除浮动

    clear属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    </div>
</div>
</body>
</html>
div {
	margin:10px;
	padding:5px;
}
#father {
	border:1px #000 solid;
}
.layer01 {
	border:1px #F00 dashed;
	/*float:right;*/
	float:left;
}
.layer02 {
	border:1px #00F dashed;
	float:right;
}
.layer03 {
	border:1px #060 dashed;
	float:left;
}
.layer04 {
	border:1px #666 dashed;
	font-size:12px;
	line-height:23px;
	width: 200px;
	float: right;
	/*clear:left;*/
	/*clear: right;*/
	clear: both;
}

body {
	font-size:12px;
	line-height:22px;
}
#content {
	width:200px;
	height:150px;
	border:1px #000 solid;
	/*overflow:visible;*/
	/*overflow:hidden;*/
	/*overflow:scroll;*/
	overflow:auto;
}

解决父级边框塌陷的方法

浮动元素后面加空div

    简单，空div会造成HTML代码冗余

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    </div>
    <!--方法一：空div防止父级边框塌陷-->
    <div class="clear"></div>
</div>
</body>
</html>

div {
	margin:10px;
	padding:5px;
}
#father {
	border:1px #000 solid;
}
.layer01 {
	border:1px #F00 dashed;
	float:left;
}
.layer02 {
	border:1px #00F dashed;
	float:right;
}
.layer03 {
	border:1px #060 dashed;
	float:left;
}
.layer04 {
	border:1px #666 dashed;
	font-size:12px;
	line-height:23px;
	width: 200px;
	float: right;
}
.clear{
	clear: both;
	margin: 0;
	padding: 0;
}

设置父元素的高度

    简单，元素固定高会降低扩展性

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。</div>
</div>
</body>
</html>
div {
	margin:10px;
	padding:5px;
}
#father {
	border:1px #000 solid;
	/*方法二：在父级里设置高度来防止边框塌陷*/
	height: 400px;
}
.layer01 {
	border:1px #F00 dashed;
	float:left;
}
.layer02 {
	border:1px #00F dashed;
	float:right;
}
.layer03 {
	border:1px #060 dashed;
	float:left;
}
.layer04 {
	border:1px #666 dashed;
	font-size:12px;
	line-height:23px;
	width: 200px;
	float:left;
}

父级添加overflow属性

    溢出处理overflow属性    
    简单，下拉列表框的场景不能用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    </div>
</div>
</body>
</html>
div {
	margin:10px;
	padding:5px;
}
#father {
	border:1px #000 solid;
	overflow: hidden;
}
.layer01 {
	border:1px #F00 dashed;
	float:left;
}
.layer02 {
	border:1px #00F dashed;
	float:right;
}
.layer03 {
	border:1px #060 dashed;
	float:left;
}
.layer04 {
	border:1px #666 dashed;
	font-size:12px;
	line-height:23px;
	width: 200px;
	float:left;
}

 父级添加伪类after

    .clear:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/
    clear: both;         /*清除这个元素两边的浮动*/
}
    写法比上面稍微复杂一点，但是没有副作用，推荐使用

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father" class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。</div>
</div>
</body>
</html>
div {
	margin:10px;
	padding:5px;
}
#father {
	border:1px #000 solid;

}
.layer01 {
	border:1px #F00 dashed;
	float:left;
}
.layer02 {
	border:1px #00F dashed;
	float:right;
}
.layer03 {
	border:1px #060 dashed;
	float:left;
}
.layer04 {
	border:1px #666 dashed;
	font-size:12px;
	line-height:23px;
	width: 200px;
	float:left;
}

.clear:after{
	content: '';         /*在clear后面添加内容为空*/ 
	display: block;      /*把添加的内容转化为块元素*/
	clear: both;         /*清除这个元素两边的浮动*/
}

inline-block和float的区别

    display:inline-block
        可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
        位置方向不可控制，会解析空格
    float 
        可以让元素排在一行并且支持宽度和高度，可以决定排列方向
        float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

java中内边距跟外边距,padding和margin——内边距和外边距
weixin_36098968的博客
03-14 2391
一、padding——内边距(内填充)1.1、padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。div.outer{width: 400px;height: 400px;border: 2px solid #000;}div.inner{width: 200px;height: 200px;background-color:red ;padding: 50px;}运行效...
Java学习day01-day15学习资料
04-05
通过这些章节的学习，你可以系统地掌握Java的基础知识，为后续的Java开发打下坚实的基础。黑马程序员提供的这套资料旨在帮助初学者从零开始，逐步建立起对Java编程的全面理解和实践能力。如果你在学习过程中遇到问题...
HTML中padding内边距的基本知识点
lanseguhui的博客
05-23 7845
一般情况下如果标签内部有内容,样式不设置高度,靠内容撑开 内边距:padding 边界到内容和之间的距离padding 简写属性后面的值1值:代表4个方向设置相同的内边距2值:上下 左右3值:上 左右 下4值:上 右 下 左padding :内边距可以让内容远离边界,页面上我们看到的其实是两段内容之间 要设置距离,我们可以利用padding来实现,在盒子不动的情况下让各个内容...
[转]overflow属性
JavaClimber
08-25 169
一. 解决图片文件超出预定宽度的方法 设置div 的overflow 属性 参数： visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效  auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条  hidden : 　不显示超过对象尺寸的内容 ...
overflow（溢出）属性的5个值
热门推荐
DC的博客
04-05 2万+
overflow属性的5个值 visible→默认值，内容不会被剪切，内容会溢出显示在元素框之外 hidden→内容会被剪切，溢出于元素框的内容不可见 scroll→内容会溢出被你剪切，但会自动生成滚动条 auto→内容如果溢出， 会自动生成滚动条 inherit→继承父级的overflow值
浮动定义
weixin_30279315的博客
11-05 184
标准文档流：指元素根据块级元素和行内元素的特性，按照从上到下，从左到右的顺序依次排列，这种方式是默认的排列方式 一.块级元素和内联元素 块级元素内容独占一行，内联元素内容自动拼接display属性：块级元素与内联元素的相互转换block:块级元素的默认值，将内联元素转换成块级元素inline:内联元素的默认值，将内联元素转换为块级元素inline-block...
学习JAVA之前端知识学习DAY003
qihaojinqiuma的博客
09-11 204
学习java之前端知识掌握DAY003，盒子模型
Java程序员快又扎实的学习路线
擅长将自己的感受、想法、知识通俗地表达出来，会点前后端开发、自动化测试、性能测试、爬虫。将来可能学硬件、AI。但一定会写实用的脚本。
08-26 1万+
本博客能让你快速获得项目开发能力
Day19--Java多线程编程入门学习
gitee_nanzhi66的博客
08-06 1515
多线程是一种并发编程技术，它允许程序同时执行多个线程。线程是程序执行的基本单位，一个程序至少有一个线程，即主线程。通过使用多线程，可以在一个程序中同时处理多个任务，提高程序的效率和响应能力。多线程编程是Java中一个强大的特性，它能够提高程序的性能和响应能力。了解如何创建和管理线程，以及如何处理线程同步和通信，是编写高效并发程序的关键。掌握这些基础知识后，你可以进一步学习更高级的并发工具和设计模式，如线程池、并发集合等。
Java学习Day20：基础篇10
weixin_51721783的博客
08-01 1102
Java中的Object类是所有类的根类，每个Java类都直接或间接地继承自Object类。这使得Object类的实例方法可以被所有Java对象使用，因此它在Java编程中起着至关重要的作用。定义：Object类是Java中所有类的超类（或称为父类、基类）。即使一个类没有显式地继承任何其他类，Java也会隐式地使其继承自Object类。作用：提供了通用的方法，用于处理对象的基本操作，如比较、克隆、转换为字符串等。Object类是Java中所有类的根类，提供了基本的对象操作方法。
Java学习Day10
a534563的博客
02-27 210
Java学习Day10 用户交互：Scanner 通过Scanner类来获取用户的输入 Scanner sc = new Scanner(System.in);//创建一个Scanner对象，启动输入 ... sc.close();//关闭，释放资源 两种接收方式：next()、nextLine() next(): - - -空格分隔，一个一个扫描 一定要读取到有效字符后才可以结束输入 对输入有效字符之前的空白，next()方法会自动将其去掉 只有输入有效字符后才会将后面的空白作为分隔符或结
java初学者学习源代码day05.zip
07-03
"day05.zip"表明这是一系列教程中的第五天内容，通常在学习过程中，每天都会涉及不同的主题来逐步建立编程基础。 标签"java 软件/插件"提示我们，这些源代码可能涉及到Java编程语言的基本元素，以及可能与软件开发...
java初学者学习源代码day02.zip
07-03
"java初学者学习源代码day02.zip"这个压缩包很可能是为帮助新手逐步学习Java编程而准备的。 在压缩包中，有两个文件："VolcanoRobot.class"和"VolcanoRobot.java"。这两个文件都是与Java编程相关的，它们之间存在着...
java初学者学习源代码day01.7z
07-03
Java初学者的学习之旅通常从了解基础语法和编程概念开始，"day01"这个标签暗示了这是学习的第一天，可能涵盖了最基础的内容。在提供的压缩包文件中，有两个文件：`Ellsworth.class` 和 `Ellsworth.java`。这两个文件...
java初学者学习源代码day03.zip
07-03
Java初学者在Day03的学习过程中，可能会接触到的两个关键文件是`Weather.class`和`Weather.java`。这两个文件在Java编程中扮演着至关重要的角色，它们分别代表了编译后的字节码和源代码。 首先，让我们从`Weather....
Java企业面试题3
m0_74972727的博客
09-15 907
1. break和continue的作用(智*图) break：用于完全退出一个循环（如 for, while）或一个 switch 语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。 continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在 for 循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。 2. if分支语句和switch分支语句的异同之处(智*图) 相同点：都是用来根据不同的条件执行不同的代码块。
Arthas sysenv（查看JVM的环境变量）
最新发布
刘大猫
09-21 239
Arthas sysenv（查看JVM的环境变量）
JDK17新增语法特性
2201_76124988的博客
09-20 528
从springboot3.0开始，已经不支持JDK8，转变为JDK17参考资料：官方博客。
faiss安装 （CPU版本）
CSDN_WHB的博客
09-20 182
faiss版本 faiss-v1.7.4。
Java基础教程：Day01-变量与数据类型解析
"一起学Java—Day01：Java基础语法，包括注释、变量、数据类型和Scanner类的应用及printf()的相关知识" 在Java编程语言中，掌握基础语法是学习的关键步骤。本文主要涵盖了以下几个方面： 1. **Java中的注释**： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

放在糖果旁的是我很想回忆的甜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值