慕课网

精品课程初识HTML(5)+CSS(3)

初识HTML(5)+CSS(3)

最热最新

乖乖拐拐怪

align-items设置纵轴排列
属性值分别为：
align-items：
flex-star:默认值，左对齐
flex-end:交叉轴重点对齐
center:交叉轴的中点对齐
baselin:项目的第一行文字的基线对齐
stretch:默认值，如果项目未设置高度或设为auto，将占满整个容器的高度。
使用如：
.box {
height: 700px;
background: blue;
display: flex;
align-items: baseline;
}

查看全部

0 采集收起来源：操作一下竖轴- 使用align-items属性设置纵轴排列方式
2022-02-20
乖乖拐拐怪

justify-content设置横轴排列方式
属性值分别为：
justify-content:
flex-start：交叉轴的七点对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等，所有项目之间的间隔比项目与边框的间隔大一倍。
使用如：
.box {
background: blue;
display: flex;
justify-content: flex-start;
}

查看全部

0 采集收起来源：操作一下横轴- 使用justify-content属性设置横轴排列方式
2022-02-20
乖乖拐拐怪

弹性盒模型之flex属性
技术点的解释：
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。

查看全部

0 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2022-02-20
乖乖拐拐怪
relative与absolute组合使用
使用position:absolute;可以实现被设置元素相对于浏览器（body)设置定位，可以使用position:relative实现相对于其他元素进行定位，但必须遵守下面的规范：
1. 参照定位的元素必须是相对定位元素的前辈元素：
  <div id="box1">
  <div id="box2">相对参照元素进行定位</div>
  </div>
  从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2. 参照定位元素必须加入position:relative;
  #box1{
  width:200px;
  height:200px;
  position:relative;
  }
  3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了
  #box2{
  position:absolute;
  top:20px;
  left:30px;
  }
  这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
查看全部

0 采集收起来源：Relative与Absolute组合使用
2022-02-20
乖乖拐拐怪

层模式之固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视窗（屏幕内的网页窗口）本身。固定定位的元素始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，与background-attachment：fixed；属性功能相同。
如以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

查看全部

0 采集收起来源：我就在那不动了-层模型之固定定位
2022-02-20
乖乖拐拐怪

层模式之相对定位
如何为元素设置层模式中的相对定位？
需要设置position：relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先安static（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于之前的位置移动，移动方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}

<div id="div1"></div>
什么叫做“偏移前的位置保留不动”呢？
偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置

查看全部

0 采集收起来源：相对于自己的位置-层模型之相对定位
2022-02-20
乖乖拐拐怪

层模型之绝对定位
如何为元素设置层模型中的绝对定位？
需要设置position：absolute（表示绝对定位），该语句的作用将元素从文档中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。若不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如：下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid; position:absolute;
left:100px;
top:50px;}
<div id="div1"></div>

查看全部

0 采集收起来源：万事无绝对 -层模型之绝对定位
2022-02-20
乖乖拐拐怪
层模型
层布局模型就像ps中的图层编辑功能一样，每个图层都能精确定位操作。
css定义了一组定位（positioning）属性来支持布局模式，有三种形式：
1. 绝对定位（position：absolute）
2. 相对定位（position：relative）
3. 固定定位（position：fixed）
查看全部

0 采集收起来源：什么是层模型？
2022-02-20
乖乖拐拐怪

浮动模型（float）
任何元素在默认情况下是不能浮动的，但可以用css动员浮动。如div、p、table、img等元素都可以被定义为浮动。
如：
div{
float:left;(此时两个div元素一行左浮动显示，若值为right则向右浮动显示）
}
<div id="div1"></div>
<div id="div2"></div>

如何设置两个元素在同一行一左一后显示？
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

查看全部

0 采集收起来源：起飞咯 - 浮动模型
2022-02-20
乖乖拐拐怪

流动模型（二）
在流动模型下，内联元素都会在所处包含的元素内从左到右水平分布显示。（块状元素独占一行）

查看全部

0 采集收起来源：排队显示-流动模型（二）
2022-02-20
乖乖拐拐怪
流动模型（flow）
流动是默认的网页布局模式，网页在默认状态下的HTML网页元素都是根据流动模型来分别网页内容的。
流动布局模式2个典型的特征：
1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。
2. 默认状态下，块状元素的宽度为100%，块状元素都会以行的形式占据位置。
查看全部

0 采集收起来源：排队显示-流动模型（一）
2022-02-20
乖乖拐拐怪
css布局模型
css3包含3中基本的布局模型：
1. 流动模型（flow）
2. 浮动模型（float）
3. 层模型（layer）
查看全部

0 采集收起来源：CSS3的布局 - css布局模型
2022-02-20
慕斯卡5085872

这一章节我们来学<head>标签。我们先来看一下<head>标签长什么样

文档的头部描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

1、head标签为双标签，有尾标签，<head></head>。

2、head标签表示头部标签,通常用来嵌套meta、title、style等标签。

3、<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

4、<meta charset="UTF-8">设置当前文件字符编码

5、style标签：双标签中设置当前文件样式

例如title标签：

<head>
<title>hello world</title>
</head>
代码块预览复制
<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来

查看全部

0 采集收起来源：小哥,做头么? - 认识head标签
2022-02-18
乖乖拐拐怪

margin为盒子设置外边距（边界）
和padding填充一样，顺序为上、右、下、左（顺时针）
padding和margin的区别，前者在边框里，后者在边框外

查看全部

0 采集收起来源：距离产生美 - 使用margin为盒子设置外边距（边界）
2022-02-17
乖乖拐拐怪

padding为盒子设置内边距（填充）
元素内容与边框之间是可以设置距离的，称之为内边距（填充），填充分为上、右、下、左（顺时针）
div{padding:20px 10px 15px 30px;}
若上、右、下、左的填充值都相同，可以做如下写法：
div{padding:10px;}
若上下值一样10px，左右值一样20px，可以写作：
div{padding:10px 20px;}

查看全部

0 采集收起来源：宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）
2022-02-17

首页上一页 129 130 131 132 133 134 135 下一页尾页

0/150

提交

取消

开始学习

课程须知: 没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。

老师告诉你能学到什么？: 本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。