【Web前端系列课程（一）】HTML+CSS

老夏 · 发表于 2020-4-17 14:49:13

第九章 CSS样式
9.11 overflow

overflow属性规定当内容溢出元素框时发生的事情。
overflow属性如下：

属性	属性值	描述
overflow overflow-x overflow-y	visible	内容不会被修剪，会呈现在元素框之外。（默认）
	hidden	内容会被修剪，并且其余内容是不可见的。
	scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
	auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

老夏 · 发表于 2020-4-17 14:53:33

第十章 CSS框模型
10.1 CSS框模型概述

CSS框模型规定了元素框处理元素内容、内边距、边框和外边距的方式。
元素框如下图所示：

      元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景（背景应用于由内容和内边距、边框组成的区域），内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。注意，内边距、边框和外边距默认值是零。
      在CSS中，width和height指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
      假设元素框的每个边上有10个像素的外边距和5个像素的内边距，如果希望这个元素框最终达到100个像素，就需要将内容的宽度设置为70像素，如下图：

注意，内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

老夏 · 发表于 2020-4-17 15:01:39

第十章 CSS框模型
10.2 内边距

元素的内边距在边框和内容区之间，控制该区域最简单的属性是padding属性。
padding属性如下：

属性	属性值	描述
padding	px	内边距，根据值的个数，决定内边距的顺序 1个值：四个内边距 2个值：上下左右 3个值：上左右下 4个值：上右下左
padding-left padding-top padding-right padding-bottom	px	左内边距上内边距右内边距下内边距

老夏 · 发表于 2020-4-17 15:08:09

第十章 CSS框模型
10.3 边框

      元素的边框是围绕元素内容和内边距的一条或多条线。
      CSS的border属性可以规定元素边框的样式、宽度和颜色。
      border属性如下：

属性	属性值	描述
border-style border-left-style border-right-style border-top-style border-bottom-style	none定义无边框 dotted定义点状边框，在大多数浏览器中呈现为实线 dashed定义虚线，在大多数浏览器中呈现为实线 solid定义实线 double定义双线，双线的宽度等于border-width的值 groove定义3D凹槽边框，其效果取决于border-color的值 ridge定义3D垄状边框，其效果取决于border-color的值 inset定义3Dinset边框，其效果取决于border-color的值 outset定义3D outset边框，其效果取决于border-color的值	边框样式
border-width border-left-width border-right-width border-top-width border-bottom-width	px	边框宽度
border-color border-left-color border-right-color border-top-color border-bottom-color	十进制、十六进制或英文	边框颜色

边框属性可以进行缩写，格式如下：

border: 2px dotted #f00

复制代码

老夏 · 发表于 2020-4-17 15:11:22

第十章 CSS框模型
10.4 外边距

围绕在元素边框的空白区域是外边距，设置外边距会在元素外创建额外的"空白"，设置外边距的最简单的方法就是使用margin属性。
margin属性如下：

属性	属性值	描述
margin	px	外边距，根据值的个数，决定外边距的顺序 1个值：四个外边距 2个值：上下左右 3个值：上左右下 4个值：上右下左
margin-left margin-top margin -right margin -bottom	px	左外边距上外边距右外边距下外边距

老夏 · 发表于 2020-4-17 15:16:31

第十章 CSS框模型
10.5 外边距合并

外边距合并（叠加）指的是当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并，如下图：

当一个元素包含在另一个元素中时，它们的上、下外边距也会发生合并，如下图：

外边距合并是有意义的。以由几个段落组成的典型文本页面为例，第一个段落上面的空间等于段落的上外边距，如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和，这就意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

但需要注意的是，只有普通文档流中块标签的垂直外边距才会发生外边距合并，行内标签、浮动框、绝对定位之间的外边距不会合并。

老夏 · 发表于 2020-4-17 15:21:39

第十一章 CSS定位
11.1 CSS定位概述

      CSS定位可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的布局。
      定位允许我们定义元素框相对于其正常位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。注意，浮动不完全是定位，不过，它当然也不是正常流布局。
      首先，我们要知道"一切皆为框"的意义，div、h1或p元素常常被称为块级元素，这意味着这些元素显示为一块内容，即"块框"；与之相反，span和strong等元素称为"行内元素"，这是因为它们的内容显示在行中，即“行内框”。
      我们可以使用display属性改变生成的框的类型。这意味着，通过将display属性设置为block，可以让行内元素表现得像块级元素一样；还可以通过把display设置为none，让生成的元素根本没有框，这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
      CSS有三种基本的定位机制：普通流、浮动和绝对定位。
      除非专门指定，否则所有框都在普通流中定位，也就是说，普通流中的元素的位置由元素在HTML中的位置决定。
      块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
      行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。
      通过使用position属性，可以选择4种不同类型的定位，这会影响元素框生成的方式。
      position属性如下：

属性	属性值	描述
position	static	元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
	absolute	元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
	relative	元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
	fixed	元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。
left right top bottom	px	位置
z-index	数值	属性设置元素的堆叠顺序，z-index仅能在定位元素上有效，默认值为0，值越大显示优先级越高

老夏 · 发表于 2020-4-17 15:23:35

第十一章 CSS定位
11.2 相对定位和绝对定位

一、相对定位
      设置为相对定位的元素会偏移某个距离，但元素仍然保持其未定位前的形状，它原本所占的空间也仍然保留，我们可以通过设置垂直或水平位置，让这个元素"相对于"它的起点进行移动。
      注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此，移动元素会导致它覆盖其它框。

二、绝对定位
      设置为绝对定位的元素框从文档流完全删除，并且相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，包含块可能是文档中的另一个元素或者是初始包含块。元素设置绝对定位后，使该元素的位置与文档流无关，因此不占据空间。
      因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。

示例代码：实现下图页面

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
width:600px;
height:400px;
background:#ccc;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
}
#d2{
width:200px;
height:200px;
background:#f00;
position:relative;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-17 15:38:58

第十一章 CSS定位
11.3 浮动

首先，我们要知道浮动不完全是定位，当然也不是正常的流布局，但浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动的属性如下：

属性	属性值	描述
float	left\|right	浮动

下面我们演示一下浮动的几种情况。
（1）当框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘，如下图：

（2）当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框，如下图：

（3）如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，如下图：

（4）浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像，如下图：

（5）要想阻止行框围绕浮动框，需要对该框应用clear属性。
clear属性如下：

属性	属性值	描述
clear	left\|right\|both	规定元素的哪一侧不允许其他浮动元素，注意，这个规则只能影响使用清除的元素本身，不能影响其他元素。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面，如下图：

（6）假设让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中，我们可以编写如下代码：

.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

复制代码

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。
如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用clear，如下图：

由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它，代码如下：

.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

复制代码

这样就可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用clear，但是有时候不得不为了进行布局而添加无意义的标记。
不过我们还有另一种办法，那就是对容器div进行浮动：

.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

复制代码

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

示例代码：实现下图页面

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width:1000px;
height:610px;
margin:0 auto;
}
#nav{
width:100%;
height:5px;
}
#navbar{
width:100%;
height:50px;
background:#000;
}
#navbar .pic{
margin-top:5px;
margin-left:10px;
height:40px;
}
.login{
float:right;
margin-top:5px;
margin-right:10px;
width:200px;
height:40px;
}
.login ul{
list-style-type:none;
margin:0px;
padding:0px;
}
.login ul li{
float:left;
line-height:40px;
font-size:22px;
color:#fff;
margin-left:30px;
}
#content{
width:100%;
height:500px;
}
#left{
float:left;
width:495px;
height:500px;
background:#ccc;
}
#left .pic{
height:200px;
position:relative;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
#right{
float:right;
width:495px;
height:500px;
background:#ccc;
}
#right ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#right ul li{
font-size:40px;
background:url(logo-1-1.png) no-repeat 5px 5px;
padding-left:50px;
}
#footer{
width:100%;
height:50px;
background:#000;
}
.join{
float:right;
margin-top:5px;
margin-right:10px;
width:300px;
height:40px;
}
.join ul{
list-style-type:none;
margin:0px;
padding:0px;
}
.join ul li{
float:left;
line-height:40px;
font-size:22px;
color:#fff;
margin-left:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="navbar">
<img src="logo-2.png" alt="" class="pic">
<div class="login">
<ul>
<li>登录</li>
<li>注册</li>
</ul>
</div>
</div>
<div id="nav"></div>
<div id="content">
<div id="left">
<img src="logo-1.png" alt="" class="pic">
</div>
<div id="right">
<ul>
<li>科技-老夏学院</li>
<li>汇聚-老夏学院</li>
<li>融合-老夏学院</li>
<li>创新-老夏学院</li>
</ul>
</div>
</div>
<div id="nav"></div>
<div id="footer">
<div class="join">
<ul>
<li>首页</li>
<li>加入我们</li>
<li>联系我们</li>
</ul>
</div>
</div>
</div>
</body>
</html>

复制代码

老夏 · 发表于 2020-4-17 16:35:15

第十二章 CSS3样式
12.1 CSS3边框

CSS3能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框，并且不需使用设计软件，比如PhotoShop。
CSS3边框属性如下：

属性	属性值	描述
border-radius	px	圆角边框
box-shadow	h-shadow：水平阴影的位置，允许负值，必填值 v-shadow：垂直阴影的位置，允许负值，必填值 blur：模糊距离，可选值 color：阴影的颜色，可选值 inset：将外部阴影改为内部阴影，可选值	边框阴影，书写格式：box-shadow:5px 10px 20px #000 inset;
border-image	border-image-source：用在边框的图片的路径 border-image-slice：图片边框向内偏移 border-image-width：图片边框的宽度 border-image-outset：边框图像区域超出边框的量 border-image-repeat：图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)	边框图片，书写格式：border-image:url(border.png) 30 30 round;

		自动登录	找回密码
密码			立即注册

【Web前端系列课程（一）】HTML+CSS

浏览过的版块

院长

资深讲师