-
这一章节我们来学习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; }实现效果：
查看全部 -
优先级：
内联式 > 嵌入式 > 外部式查看全部 -
<link href="base.css" rel="stylesheet" type="text/css" />
查看全部 -
Mo查看全部
-
1. <!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前
2. <html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。
3.<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。
4.<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合
查看全部 -
<body>
<table border="1">
<caption>前端三剑客</caption>
<tr>
<th>知识点</th>
<th>重要程度</th>
<th>难度</th>
<th>学习周期</th>
</tr>
<tr>
<td>html</td>
<td>5星</td>
<td>3星</td>
<td>7天</td>
</tr>
<tr>
<td>css</td>
<td>5星</td>
<td>4星</td>
<td>10天</td>
</tr>
<tr>
<td>js</td>
<td>5星</td>
<td>5星</td>
<td>20天</td>
</tr>
</table>
</body>
查看全部 -
这一章节我们来学习flex弹性盒子模型，根据下面的例子来理解一下吧：
实现上图效果,我们需要输入以下代码:
上面的代码：
三个块元素设置大小以及背景色，在父容器中添加flex。
技术点的解释：
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。
技术点的解释2：
1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。
查看全部 -
各类语义化标签,如这里的<aside>标签，表示侧边栏，但效果还是要用css来设置
查看全部 -
<section> 定义一个区域
查看全部 -
语义化标签：<header>，代表头部，但作用等同于div，但具备语义化
查看全部 -
使用
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定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
查看全部 -
<div>逻辑分布，相当于一个容器
查看全部 -
标题标签的样式都会加粗
查看全部 -
<h1-h6>表示标题级数，<h1>是最高级
用来设置标题，一般放在<p>标签前
查看全部 -
<p>标签下的<span>标签用来设置单独的样式
查看全部
举报