【Web前端笔记-基础】第九课·初识 CSS，CSS属性

最新推荐文章于 2020-10-23 10:28:57 发布
最新推荐文章于 2020-10-23 10:28:57 发布
阅读量173 收藏
点赞数
分类专栏： Web 前端基础笔记 文章标签： display 盒模型 css样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42250032/article/details/102567289
版权

一：盒模型

什么是盒模型：在了解盒模型之前，要先来了解一下盒子是什么，通俗的来说，盒子就是用来装东西的，那在这里，就是用来存储网页上的所有元素的，在Css中，它包含content（内容），padding（内边框），margin（外边距），border（边框）。所以，一个盒子的重要属性包括：width（一般不用设置，由内容撑开），height，padding，border，margin。

盒子的总宽度：内容宽度+左右两边填充+边框线+左右两边外边距

盒子的总高度：内容高度+上下两边填充+边框线+上下两边外边距

  • padding

padding是内填充的意思，是内容到边距的距离，padding有4个方向，描述方法有两种：小属性和简写属性。

小属性：padding-top,padding-right,padding-bottom,padding-left.

简写属性：padding:4px;padding:20px 20px;padding:10px 10px 20px; padding:10px 10px 20px 20px;

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Padding练习</title>
		<style type="text/css">
			.pad{
				/* 设置div的高度,一般不进行设置,由内容撑开. */
				height: 100px;
				/* 设置div的宽度 */
				width: 200px;
				background-color:#425865 ; 
				/* 小属性设置 */
				/* padding-top: 20px;
				padding-right: 20px;
				padding-bottom: 20px;
				padding-left: 20px;
				*/
				/* 简写属性设置 */
				/* padding: 20px; */
				/* padding: 20px 30px; */
				/* padding: 20px 30px 20px; */
				padding: 10px 20px 30px 40px;
			}
			
		</style>
	</head>
	<body>
		<div class="pad">
			<div class="son">
				“江澄竟然让这厮嚣张了这么久，换了是我，当初魏某人叛逃时就不是捅他一刀，而是直接清理门户，否则也不会让他做出后来那些丧心病狂之事。还讲什么同门同修青梅竹马的情面。”
			</div>
		</div>
	</body>
</html>

效果：

  • margin​​​​​​​

margin，是外边距，是盒子与盒子之间的距离，也有四个方向，两种表示方法，与padding 的用法相似。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Margin练习</title>
		<style type="text/css">
			.pad{
				/* 设置div的高度,一般不进行设置,由内容撑开. */
				height: 100px;
				/* 设置div的宽度 */
				width: 200px;
				background-color:#425865 ; 
				/* 小属性设置 */
				/* margin-top: 20px;
				margin-right: 20px;
				margin-bottom: 20px;
				margin-left: 20px;
				*/
				/* 简写属性设置 */
				/* margin: 20px; */
				/* margin: 20px 30px; */
				/* margin: 20px 30px 20px; */
				margin: 10px 20px 30px 40px;
			}
			
		</style>
	</head>
	<body>
		<div class="pad">
			<div class="son">
				“江澄竟然让这厮嚣张了这么久，换了是我，当初魏某人叛逃时就不是捅他一刀，而是直接清理门户，否则也不会让他做出后来那些丧心病狂之事。还讲什么同门同修青梅竹马的情面。”
			</div>
		</div>
	</body>
</html>

效果：

  • margin塌陷现象

margin塌陷现象：就是两个兄弟元素如果都设置了margin，那么margin的值取两个元素中margin值最大的那个。

注意：浮动的元素是没有他先现象的。并且这个现象也只是发生在竖直方向上，水平方向是没有的。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>margin塌陷现象</title>
		<style type="text/css">
			.brother1{
				width: 100px;
				height: 100px;
				background-color: #4169E1;
				margin: 30px;
			}
			.brother2{
				width: 100px;
				height: 100px;
				background-color: #FFAAAA;
				margin: 30px;
			}
		</style>
	</head>
	<body>
		<div class="brother1"></div>
		<div class="brother2"></div>
	</body>
</html>

效果：

  • margin居中

​​​​​​​margin不仅仅能够设置外边距，还能使元素居中。

当Margin的左右外边距为auto时，盒子水平居中，但是要注意，在使用居中的时候，要注意一定要设置好他的宽高，否则盒子就会占满整个屏幕，并且，这里的居中只能用于盒子，如果想要文本居中的话，还是要用我们之前讲的text-align。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>利用margin使盒子居中</title>
		<style type="text/css">
			.mar{
				
				width: 100px;
				height: 100px;
				background-color: #4169E1;
				/*设置盒子水平居中，上外边距为100px*/
				margin: 100px auto;
				
			}
		</style>
	</head>
	<body>
		<div class="mar">
			
		</div>
	</body>
</html>

效果：

  • 善于使用元素的父元素的padding而不是子元素的margin​​​​​​​

我们想要使子元素与祖辈元素之间存在距离，要尽可能地使用父元素的padding而不是子元素的margin，原因是有时候设置了子元素的margin后，父元素会随着子元素一起移动。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>善用父元素的padding而不是子元素的margin</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.ps1{
				width: 300px;
				height: 300px;
				background-color: #4169E1;
				padding-top: 50px;
			}
			.ps2{
				width: 100px;
				height: 100px;
				background-color: #808080;
				
			}
		</style>
	</head>
	<body>
		<div class="ps1">
			<div class="ps2">
				
			</div>
		</div>
		
	</body>
</html>

效果：

  • border

border是外边框的意思，它总共有三个关键要素：粗细（1px），线的类型(solide)，显得颜色(red)。这里线的颜色可以省略，如果不特别设置，颜色为黑色。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>border边框线</title>
		<style type="text/css">
			.bo{
				height: 100px;
				width: 100px;
				background-color: #4169E1;
				border: 1px solid salmon;
			}
		</style>
	</head>
	<body>
		<div class="bo">
			
		</div>
	</body>
</html>

效果：

二：display属性

display 属性可以设置将隐藏的元素显示或者将显示的元素隐藏，也可以将行内元素转换成块级元素和将块元素转换成行内元素。它的重要属性有三个：none，block，inline。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>display属性</title>
		<style type="text/css">
			.ha{
				/* display: none; */
				display: block;
				height: 40px;
				width:200px ;
				background-color: #4169E1;
				color: white;
				font-size: 20px;
				text-align: center;
				line-height: 40px;
			}
			.ku{
				display: block;
				height: 40px;
				width:200px ;
				background-color: #4169E1;
				color: white;
				font-size: 20px;
				text-align: center;
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<h3 class="ha">我是行内元素</h3>
		<div class="ku">
			我是块级元素
		</div>
	</body>
</html>

效果：

小案例：

之前的导航栏案例中，只有将鼠标对准链接文字的时候，链接才会进行horver的改变，在这里，可以利用display属性，让鼠标在标签周围标签就能有变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动小总结</title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 20px;
				font-family: "微软雅黑";
				background-image: url(../img/beijing.jpg);
			}
			
			.th{
				width: 960px;
				height: 40px;
				margin-left: auto;
				margin-right: auto;
			}
			ul{
				list-style: none;
			}
			ul li{
				float: left;
				width: 160px;
				height: 40px;
				background-image: url(../img/diwenbiaoti.jpg);
				text-align: center;
				line-height: 40px;
			}
			
			a{
				text-decoration: none;
				color: #000000;
				display: block;
				width: 160px;
				height: 40px;
				
			}
			a:hover{
				color: #4169E1;
				font-size: 24px;
				font-weight: bold;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div class="th">
			<ul>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
			</ul>
		</div>
	</body>
</html>

效果：

好好学习嘿嘿嘿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2015-12-13复习之CSS3 border 详解border-image
cysear的专栏
12-23 1910
先来提一下我们所熟知的border最基本的属性： border-width，border-style，border-color 不要小看border，它还可以“画”出三角形，箭头和十字街哦 先上图： 神奇吧？其实只用border做到的，看到下面这张图和其相应代码，你肯定就明白了 .bord{ width: 100px; heig
快速理解W3C盒模型和IE盒模型的区别
君非道的博客
10-02 2313
1、CSS盒模型概述 CSS 盒模型规定了元素框处理元素内容（content）、内边距（padding）、边框 （border）和 外边距 （margin）的方式. CSS盒模型分为W3C盒模型和IE盒模型  2、通过代码直观感受以下两者区别 定义两个div &lt;div id="border-box"&gt;我是IE盒模型(border-box)&lt;/div&gt; &lt...
border、transparent写超简单的三角形
weixin_45849112的博客
10-23 3567
transparent：background-color的默认值，背景颜色是透明的（基本内容将会穿透）。 border：元素的边框，实际上元素的border是由三角形组合而成，并不是矩形，当元素是指了宽度时会显示成矩形。 eg1：只设置边框，设置不同背景色 <body> <!-- background-color属性之transparent --> <div></div> </body> <style> div {
关于行内元素的margin padding一些说明；background-color的范围
weixin_33759269的博客
10-31 588
　　①当对行内元素使用padding时，只有左右方向（正常）有效；竖直方向上，内边距对于该行内元素有效果，但是对其他元素无任何影响。 　　②当对行内元素使用margin时，只有左右方向有效，竖直方向无任何效果。 　　③background-color的范围：这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分...
笔记-day09-前端基础CSS第七天.pdf
10-11
笔记-day09-前端基础CSS第七天.pdf
笔记-day08-前端基础CSS第六天.pdf
10-11
笔记-day08-前端基础CSS第六天.pdf
笔记-day07-前端基础CSS第五天.pdf
10-11
笔记-day07-前端基础CSS第五天.pdf
前端学习笔记-黑马程序员CSS
最新发布
01-09
前端学习笔记-黑马程序员CSS
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
【Web前端笔记-基础】第四课·初识 HTML，标签学习2
热门推荐
嘿嘿嘿的博客
09-23 3万+
四：html标签 图片标签 图片标签：<img /> 图片标签是一个单标签，用来在网页中插入图片。 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片标签的应用</title> </head>...
【Web前端笔记-基础】第十六课，节点操作（DOM核心）
嘿嘿嘿的博客
12-05 536
一：简介 节点（复习）：页面上的所有元素都可以当成是节点。 节点的作用：获取元素，我们的DOM提供了两种获取元素的方法，一种是通过一些方法来获取（例如我们之前用过的getElementById等），但是，这些方法非常繁琐，而且逻辑性也不强，只要用到就得一个一个都获取到。另一种方法就是用节点来获取，可以先获得一个节点，之后便可通过这个节点来获取它的兄弟或者父子。这样非常方便，逻辑性也强了些，就...
【Web前端笔记-基础】第三课·初识 HTML，标签学习
嘿嘿嘿的博客
09-20 495
一：标签的分类 标签主要分为单标签和多标签。 单标签是单个出现的，像我们常用的换行标签<br /> 多标签是成对出现的，像我的html骨架中的<head></head> 二：标签之间的关系 标签之间的关系分为两种：嵌套关系和并列关系 嵌套关系：嵌套关系也叫做父子关系，是说一个标签在另有一个标签的内部，例如我们骨架中所学到的<head&gt...
【Web前端笔记-基础】第十二课，初识Javascript
嘿嘿嘿的博客
11-07 353
目录 一:概要简介 二：如何写一段JS代码并运行。 三：输入和输出语句 四：变量 五：数据类型 六：运算符 七：逻辑控制 八：函数 九：JavaScript的作用域 十：JavaScript的预解析问题 十一：对象 十二：new关键字的执行过程。 十三：遍历对象 十四：内置对象 十五：数组 十六：简单数据类型和复杂数据类型 一:概要简介 JavaScri...
【Web前端笔记-基础】第十四课，Javascript的排他思想
嘿嘿嘿的博客
11-29 325
一：排他思想 如果有同一组元素，想要某个元素实现某种样式，需要用到排他思想。 先将其他元素的这个属性清空（干掉他人）。 在这个特殊元素下添加表现（留下自己）。 二：小案例 1.百度换肤，点击相应的图片，背景变成相应的图片。 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8...
【Web前端笔记-基础】第八课·初识 CSS，CSS属性
嘿嘿嘿的博客
10-10 287
一：！important属性 important属性是用来提高属性的权重的，其属性无穷大。 语法格式：属性：值 ！important 要注意：提升的是属性的权重，而不是选择器的权重,它的作用域只是当前属性。 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l...
【Web前端笔记-基础】第十三课，Javascript的DOM和BOM基础部分
嘿嘿嘿的博客
11-21 278
一：基础概念 Web APIs 是W3C组织的标准。 Web APIs 我们主要学DOM和BOM的部分 Web APIs 是JS所独有的 主要学习页面交互的功能 需要使用JS基础部分作基础 二：API和Web API API：是指应用程序编程接口，是一些预定义的函数，目的是提供应用程序与开发人员于某软件或硬件得以访问一组历程的能力，而又无需访问源码或理解内部工作机制的细节。 Web ...
【Web前端笔记-基础】第一课 前端概述
嘿嘿嘿的博客
09-18 272
一：什么是WEB前端 还原**活**的设计，也就是将设计师设计好的图片，用代码编辑成HTML页面效果的网页。 传统的前端 进行切图 编写标签和样式 实现效果 HTML5时代的前端 各种端的兼容开发 移动app开发和移动站点开发 ajax及服务器端技术开发 高级设置模式和框架 自动化工作流 网站安全，SEO，测试，源代码管理，团队合作，游戏，特效。 全栈时代 集前...
【Web前端笔记-基础】第十五课，Javascript的元素属性及属性值问题
嘿嘿嘿的博客
11-29 269
一：获取元素属性值 element.属性（获取内置属性：元素自带属性，如id,class） element.getAttribute("属性") （获取自定义属性:下面介绍） 二：设置元素属性值 element.属性=“值” （内置属性设置） element.setAttribute("属性"，"值") (自定义属性设置) element.removeAttribute("...
R语言实战笔记--第九章 方差分析
08-25
R语言实战笔记第九章介绍了方差分析的内容。方差分析是一种用于比较两个或多个组之间差异的统计方法。在R语言中，可以使用lm函数进行方差分析的回归拟合。lm函数的基本用法是： myfit <- lm(I(Y^(a))~x I(x^2) I(log(x)) var ... [-1],data=dataframe 其中，Y代表因变量，x代表自变量，a代表指数，var代表其他可能对模型有影响的变量。lm函数可以拟合回归模型并提供相关分析结果。 在方差分析中，还需要进行数据诊断，以确保模型的可靠性。其中几个重要的诊断包括异常观测值、离群点和高杠杆值点。异常观测值对于回归分析来说非常重要，可以通过Q-Q图和outlierTest函数来检测。离群点在Q-Q图中表示落在置信区间之外的点，需要删除后重新拟合并再次进行显著性检验。高杠杆值点是指在自变量因子空间中的离群点，可以通过帽子统计量来识别。一般来说，帽子统计量高于均值的2到3倍即可标记为高杠杆值点。 此外，方差分析还需要关注正态性。可以使用car包的qqplot函数绘制Q-Q图，并通过线的位置来判断数据是否服从正态分布。落在置信区间内为优，落在置信区间之外为异常点，需要进行处理。还可以通过绘制学生化残差的直方图和密度图来评估正态性。 综上所述，R语言实战第九章介绍了方差分析及其相关的数据诊断方法，包括异常观测值、离群点、高杠杆值点和正态性检验。这些方法可以用于分析数据的可靠性和模型的适应性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [R语言实战笔记--第八章 OLS回归分析](https://blog.csdn.net/gdyflxw/article/details/53870535)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值