【前端自学之路】CSS之position定位

发表于 2018-01-21 | 分类于前端自学之路

position标识定位，就类似于百度地图上一系列定位点，position就是给html元素定位的。

position有四种值：

/**
 * 默认未设置的值，没有任何影响
 */
position: static;

<!-- more -->

/**
 * 相对定位，以默认位置为参照起始点，进行偏移定位
 */
position: relative;

/**
 * 绝对定位，以已经定位的最近的祖先元素为参考起始点，进行偏移定位，此时脱
 * 离文档流
 */
position: absolute;

/**
 * 固定定位，以浏览器窗口为参考起始点，进行偏移定位
 */
position: fixed;

上面所说的偏移定位，到底偏移多少呢？这个时候就要引出标识偏移值的属性

/**
 * left 标识当前元素左边沿相对于参考起始点左边沿向右偏移100px
 */
left: 100px;

/**
 * right 标识当前元素右边沿相对于参考起始点右边沿向左偏移100px
 */
right: 100px;

/**
 * top 标识当前元素上边沿相对于参考起始点上边沿向下偏移100px
 */
top: 100px;

/**
 * bottom 标识当前元素底边沿相对于参考起始点底边沿向上偏移100px
 */
bottom: 100px;

关键是对以上定位意思和偏移学习了解，必然对元素定位熟悉透彻。

【前端自学之路】CSS之基础属性

发表于 2018-01-21 | 分类于前端自学之路

CSS属性有很多，可以从这几个角度来区分

文字

font-size:   16px;     			// 字体大小

<!-- more -->

font-family: sans-serif;   		// 字体系列
font-weight: 600;   			// 粗体

font-style: italic; 			// 字体斜体风格

color: #ff0;                    // 颜色

文本

text-align: center;             // 文本对齐方式，left right center
text-decoration: underline;     //  文本修饰方式，比如下划线

word-spacing: 1px;              // 单词间距
letter-spacing: 1px;            // 字母间距

背景

background-color: #fff;             // 背景颜色
background-image: url(./abc.png);   // 背景图片

background-position: 1px 1px;       // 背景位置
background-size: 100% 100;          // 背景大小

background: #fff url() no-repeat 1px 1px 100% 100

盒子模型属性

width: 100px;               // 宽度
height: 100px;              // 高度
padding: 10px;              // 内边距
margin: 10px;               // 外边距
border: 1px solid #f00;     // 边框

定位属性

1	position: relative; // 相对定位，有四种值

CSS单位详解

长度单位：   px = pixel； 像素
            % = 百分比， 相对于父元素的百分比
            em , rem  这两个也是相对单位，后面接触
            width: 100%;

颜色单位：   #ff00dd;    16进制   可以简写 #f0d;    #ff00de ;
            red  white
            rgb(10, 22, 33)
            rgba(10, 22, 22, 0.4)
            color: #f0d;

CSS属性值解析（存在4个方向的）

存在四个方向的有边框，padding内边距，还有margin外边距等

一般4个方向默认的顺序是  上 右 下 左
例子:    padding：1px 2px 3px 4px;  标识 上 1px; 右2px; 下3px, 左4px
        padding: 1px 2px 3px;  标识 上 1px; 右2px; 下3px；左2px; （对面方向）
        padding: 1px 2px ;  标识 上和下是 1px;  左和右是2px;
        padding: 1px;  标识上下左右都是1px 

padding-top:    10px;  
padding-right:  10px;
padding-bottom: 10px;
padding-left:   10px;

当然还有其他属性，各位要稍微留意学习就好

【前端自学之路】HTML入门

发表于 2018-01-21 | 分类于前端自学之路

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>开始学习前端</title>
</head>
<body>

<!-- more -->

    <div>今天是2018-01-21</div>
</body>
</html>

上面是一个入门级的HTML结构，包括了最主要的几个HTML元素，如：

html 表示html文档
head 表示html文档的头部信息，用于设置一些文档属性数据
meta 设置元数据属性标签，charset 是设置字符编码
title 表示文档标题，一般就是浏览器上的标题了
body 表示html主体显示内容
div 这里就先显示了一个div元素

我们来看下有哪些常见的html标签

html
head
title 
meta 
body 
div 
span 
a  
img
ul
li
ol
dl
dd
dt
h1-h6 
form 
input 
select 
button

header 
footer 
article 
section 
canvas 
audio 
video