慕课网

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

初识HTML(5)+CSS(3)

最热最新

李斯提
相对于自己的位置-层模型之相对定位
如果想为元素设置层模型中的相对定位，需要设置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>
```
效果图：
什么叫做“偏移前的位置保留不动”呢？
大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：
```
<body>     <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span> </body>
```
效果图：
从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
查看全部

0 采集收起来源：相对于自己的位置-层模型之相对定位
2020-11-06
李斯提
万事无绝对 -层模型之绝对定位
如果想为元素设置层模型中的绝对定位，需要设置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 采集收起来源：万事无绝对 -层模型之绝对定位
2020-11-06
李斯提

层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

什么是层模型？
什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

查看全部

0 采集收起来源：什么是层模型？
2020-11-06
小胖的梦想
选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
查看全部

0 采集收起来源：别插队啊 - 选择器的优先级
2020-11-06
菠萝吹雪666

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

查看全部

0 采集收起来源：使用表单标签，与用户交互 - 使用<form>创建表单
2020-11-06
崆峒8067141

在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。

查看全部

0 采集收起来源：写代码都不换行么? - 使用<br>标签实现换行效果
2020-11-06
李斯提

inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

我还要站个大位置 - 内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

查看全部

0 采集收起来源：我还要站个大位置 - 内联块状元素
2020-11-06
李斯提
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。

我要和你站一起 - 内联元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
```
 div{      display:inline;  } ...... <div>我要变成内联元素</div>
```
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。
查看全部

0 采集收起来源：我要和你站一起 - 内联元素
2020-11-06
李斯提
```
text-indent:2em;
```
首行缩进
查看全部

0 采集收起来源：长度值
2020-11-06
李斯提
长度值
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
```
p{font-size:12px;text-indent:2em;}
```
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
```
<p>以这个<span>例子</span>为例。</p>
```
css:
```
p{font-size:14px} span{font-size:0.8em;}
```
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3、百分比
```
p{font-size:12px;line-height:130%}
```
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
查看全部

0 采集收起来源：长度值
2020-11-06
菠萝吹雪666

创建表格的三个区域：
thead、tbody、tfoot

查看全部

0 采集收起来源：使用thead、tbody、tfoot定义表格
2020-11-06
李斯提
开头空两格喔 - 使用text-indent为文本添加首行缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
```
p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
```
注意：2em的意思就是文字的2倍大小。
查看全部

0 采集收起来源：开头空两格喔 - 使用text-indent为文本添加首行缩进
2020-11-06
李斯提
/*body {*/
/* font-style: italic;*/
/* font-weight: bold;*/
/* font-size: 20px;*/
/* line-height: 1.6em;*/
/* font-family: "宋体", sans-serif;*/
/*}*/
body{
font:italic bold 20px/1.6em "宋体", sans-serif;
}
1. 必须按照这个顺序写：font-style | font-variant | font-weight | font-size | line-height | font-family
2. 再者就是注意要以这个font： 简写的方式写的话必须有 font-size和font-family 这两个属性才可以生效
查看全部

0 采集收起来源：偷个懒 - font样式的简写方式
2020-11-06
菠萝吹雪666

、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

查看全部

0 采集收起来源：听说你要制定学习计划了-使用table家庭为网页添加表格
2020-11-06
BIT_W
CSS布局模型：有三种基本的布局模型：流动模型（Flow）、浮动模型（Float）、层模型（Layer）
流动模型（Flow）：
特点：
1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
2、在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示
（其实就是默认的就是流动模型）
浮动模型（Float）：
块状元素都是独占一行，怎么并排显示呢？这就是设置元素浮动了，如下代码：
```

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left; 
    }
<div id="div1"></div>
<div id="div2"></div>
```
层模型（Layer）：
层模型有三种形式(CSS定义了一组定位(positioning)属性来支持层模型)：
1、绝对定位（position: adsolute）
2、相对定位（position: relative）
3、固定定位（position: fixed）
绝对定位（position: adsolute）：语句的作用将元素从文档流中拖出来，然后使用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>
```
相对定位（position: relative）：相对定位完成的过程是首先按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>
```
固定定位（position: fixed）：视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小
如下代码，就是固定显示再屏幕右下角，就算你拉动滚动条位置也不会发生变化：
```
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;   
    bottom:0px;
    right:0px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
```
绝对定位（position: adsolute）与相对定位（position: relative）组合使用：绝对定位相对于其他元素来定位
规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
```
#box1{
    width:200px;
    height:200px;    
    position:relative;        
}
#box2{    
    position:absolute;
    top:20px;
    left:30px;         
}
<div id="box1">
    <div id="box2">相对参照元素进行定位</div>
</div>
```
查看全部

0 采集收起来源：Relative与Absolute组合使用
2020-11-06