慕课网

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

初识HTML(5)+CSS(3)

最热最新

小胖的梦想

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

查看全部

0 采集收起来源：CSS3的布局 - css布局模型
2020-11-07
小胖的梦想

块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>

查看全部

0 采集收起来源：给元素分个类 - 元素分类
2020-11-07

李斯提

面试常考题之宽高不定实现盒子水平垂直居中

这一章我们来学习未知宽高实现盒子水平垂直居中，通常使用定位以及translate完成。参考下面例子：

 <div class="box">         <div class="box1">             慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网         </div>     </div>

添加样式：

 .box {         border: 1px solid #00ee00;         height: 300px;         position: relative;     }     .box1 {         border: 1px solid red;         position: absolute;         top: 50%;         left: 50%;         transform: translate(-50%, -50%);     }

效果如下：

技术点的解释：

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

查看全部

0 采集收起来源：面试常考题之宽高不定实现盒子水平垂直居中

2020-11-06

李斯提

面试常考题之已知宽高实现盒子水平垂直居中
这一章节我们来学习已知宽高实现盒子水平垂直居中。通常使用定位完成，例如想要实现以下效果：
我们有如下两个div元素
要实现子元素相对于父元素垂直水平居中,我们只需要输入以下代码：
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：
3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

查看全部

0 采集收起来源：面试常考题之已知宽高实现盒子水平垂直居中
2020-11-06
李斯提
水平居中设置-定宽块状元素
当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：
```
<body>   <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
```
css代码：
```
<style> div{     border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/          width:200px;/*定宽*/     margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
```
也可以写成：
```
margin-left:auto; margin-right:auto;
```
注意：元素的“上下 margin” 是可以随意设置的。
查看全部

0 采集收起来源：水平居中设置-定宽块状元素
2020-11-06
李斯提
水平居中设置-行内元素
我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。
这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：
```
<body>   <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
```
css代码：
```
<style>   .txtCenter{     text-align:center;   } </style>
```
查看全部

0 采集收起来源：水平居中设置-行内元素
2020-11-06
李斯提

我想占大头 - 给子元素设置flex占比
这一章节我们来学习flex属性，设置子元素相对于父元素的占比。
可以参考右侧编辑器的代码，测试效果如下：
技术点的解释：
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。

查看全部

0 采集收起来源：我想占大头 - 给子元素设置flex占比
2020-11-06

李斯提

操作一下竖轴- 使用align-items属性设置纵轴排列方式

这一章节我们来学习align-items属性，本属性定义了项目在交叉轴上的对齐方式。属性值分别为：

align-items: flex-start | flex-end | center | baseline | stretch;

结合右侧编辑器中的布局以及下面的样式设置进行理解：

flex-start：默认值，左对齐

   .box {         height: 700px;         background: blue;         display: flex;         align-items: flex-start;     }

实现效果：

flex-end：交叉轴的终点对齐

 .box {         height: 700px;         background: blue;         display: flex;         align-items: flex-end;     }

实现效果：

center：交叉轴的中点对齐

.box {         height: 700px;         background: blue;         display: flex;         align-items: center;     }

实现效果：

baseline：项目的第一行文字的基线对齐。

.box {         height: 700px;         background: blue;         display: flex;         align-items: baseline;     }

三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。

实现效果：

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 .box {         height: 300px;         background: blue;         display: flex;         align-items: stretch;     }     .box div {         /*不设置高度，元素在垂直方向上铺满父容器*/         width: 200px;     }

实现效果：

查看全部

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

2020-11-06

李斯提

操作一下横轴- 使用justify-content属性设置横轴排列方式

这一章节我们来学习justify-content属性，本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解，属性值分别为：

 justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：交叉轴的起点对齐

 .box {         background: blue;         display: flex;         justify-content: flex-start;     }

实现效果：

flex-end：右对齐

 .box {         background: blue;         display: flex;         justify-content: flex-end;     }

实现效果：

center：居中

 .box {         background: blue;         display: flex;         justify-content: center;     }

实现效果：

space-between：两端对齐，项目之间的间隔都相等。

 .box {         background: blue;         display: flex;         justify-content: space-between;     }

实现效果：

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box {         background: blue;         display: flex;         justify-content: space-around;     }

实现效果：

查看全部

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

2020-11-06

李斯提

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

弹性盒模型 - 弹性盒模型之flex属性
这一章节我们来学习flex弹性盒子模型，根据下面的例子来理解一下吧：
实现上图效果,我们需要输入以下代码:
上面的代码：
三个块元素设置大小以及背景色，在父容器中添加flex。
技术点的解释：
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。

查看全部

0 采集收起来源：弹性盒模型 - 弹性盒模型之flex属性
2020-11-06
李斯提
Relative与Absolute组合使用
小伙伴们学习了12-6小节的绝对定位的方法：使用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组合使用
2020-11-06
李斯提
我就在那不动了-层模型之固定定位
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 采集收起来源：我就在那不动了-层模型之固定定位
2020-11-06
李斯提

background-attachment:fixed;
background-attachment :定义背景图片随滚动轴的移动方式取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承初始值:
scroll继承性: 否
适用于: 所有元素

查看全部

0 采集收起来源：我就在那不动了-层模型之固定定位
2020-11-06
李斯提

绝对定位是相对于最近的已定位的父元素发生位置改变，如果没有已定位的，那么就会相对于body，绝对定位也会脱离文本流
相对定位就是相对于自己本身而改变的位置，只随自己上一次的位置发生改变。
但绝对定位就是div移开之后然后原来的位置会被其他东西代替，相对定位不会

查看全部

0 采集收起来源：相对于自己的位置-层模型之相对定位
2020-11-06
崆峒8067141

只有http//的网站才能打开

查看全部

0 采集收起来源：百度一下,你就知道 - 使用<a>标签为网页添加超链接
2020-11-06