一个朋友准备入门前端, 不知道怎么去学习, 在此列了一些常用的方法
html 常用标签
div,ul,ol,li,span,p,img,h1 - h6,table 包含的一系列, input,textarea,select>option,label,button,a,
HTML5 中可能用得多一点的,
- article
- nav
- section
- header
- footer
我觉得写代码不用刻意去记忆, 写得多了自然就记住了, 这些标签就记住这些常用的就可以了, 大概知道怎么用就行了, 你一个网页布局全部用 div 都可以
布局偏
说到布局我们就要了解几个点:
1. 盒子模型
什么是盒子模型?
CSS 盒子模型就是在网页设计中经常用到的 CSS 技术所使用的一种思维模型.
盒子中包含内容(content), 填充(也就是内边距 padding), 边框(border), 边界(外边距 margin), CSS 盒子模式都具备这些属性.
其中每一个属性又包含了上右下左四条属性, 如 margin:
- margin: 10px; // 盒子外边距全部为 10px;
- margin: 10px 20px; // 盒子上下边距为 10px, 左右为 20px
- margin: 10px 20px 30px 40px; // 盒子对应的上右下左为 10 20 30 40
padding,border 也是同样的道理
更多详细参考:
- margin
- padding https://www.imooc.com/article/7863
- border
2. 标签元素的类型
这个怎么理解, 就是每一个元素默认有一个它自己在网页中所表示的框类型, 如 div,h1-h6,ul,ol,table,p 等标签是一个块级元素, span,a 是内联元素(也可称为行内元素)
块级元素特点:
占据它上级元素的 100% 宽度, 即一整行;
高度, 宽度, 行高, 外边距, 内边距都可设置;
可以容纳其他块级元素, 内联元素;
行内元素特点:
宽高不可设置;
和其他元素都在一行上;
宽度随内容增加而增加;
高度随字体大小而改变;
外边距只对左右生效;
内联块元素特点:
内联块状元素 (inline-block) 就是同时具备内联元素, 块状元素的特点, 代码 display:inline-block 就是将元素设置为内联块状元素.
和其他元素都在一行上;
元素的高度, 宽度, 行高以及顶和底边距都可设置.
相关知识点:
display 各个属性的理解(常用属性值: block,inline-block,inline,table,table-cell,none)
更多详细内容参考: display 详解 https://segmentfault.com/a/1190000009636727
3. 定位
定位是网页布局中不可缺少的一个部分, 学好了元素的定位, 就相当于开发静态网页成功了 90%, 为什么了, 我们平时看到的网页都是由各种小盒子组合在一起, 形成了一个视觉上一个完整的网页.
主要学习要点: position,float 主要, 了解 z-index 的功能
每一个元素都有它自己默认的定位方式, 但是很多时候我们需要手动去改变它的定位方式, 达到我们想要的效果, 下面先说说 position
- 3.1-position
- position:initial
设置元素为默认
position:inherit
设置元素从父元素继承定位方式
position:absolute
设置元素为绝对定位方式, 它定位是相对于 static 定位以外的第一个父元素进行定位. 可能这句话不好理解, 你只要知道它相对于它上面第一个元素定位为 relative 定位的元素进行定位. 如果一直到 body 都没有, 就相当于 body 来进行定位.
position:fixed
生成固定定位的元素, 相对于浏览器窗口进行定位.
position:relative
成相对定位的元素, 相对于其正常位置进行定位.
更多详情用法参考详解 CSS position 属性 https://www.cnblogs.com/lrzw32/p/4966217.html
- 3.2-float
- float:left
元素向左浮动
float:right
元素向右浮动
float:none
元素不浮动
float:inherit
从父元素继承 float 属性的值. 父元素如果是 left, 它就是 float:left
更多详细内容参考: float 详解 https://www.cnblogs.com/lrzw32/p/4948514.html
3.3-width & height
一般来说, 网页布局少不了给元素添加宽度和高度, 如果一个网页元素没有宽度高度, 那么视觉效果不敢恭维, 除了栅格布局还看得过去;
什么元素能给它定义宽高属性, 文章开头就已经说了, 块级元素, 内联块元素等, 和块相关的都可以定义宽高;
<div style="width:300px; height:200px"><div>
这个一个示例, 给 div 宽高定义为 300px and 200px
width 了解其几个常用的属性值就行: 固定的 px(200px), 百分比(以父元素宽度为基准的百分比),auto(默认)
- .box {
- /* Positioning */
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 100;
- /* Box model */
- display: block;
- float: right;
- width: 100px;
- height: 100px;
- /* Typography */
- font: normal 13px "Helvetica Neue", sans-serif;
- line-height: 1.5;
- color: #333;
- text-align: center;
- /* Visual */
- background-color: #f5f5f5;
- border: 1px solid #e5e5e5;
- border-radius: 3px;
- /* Misc */
- opacity: 1;
- }
- div{
- background-color: red;
- background-image: url('1.jpg');
- background-repeat: no-repeat; // 其他几个常用属性的用法(repeat-x,repeat-y,repeat)
- background-size:100px 100px; // 只用于图片, 不允许负值
- background-position: center center // 全部居中显示(理解其他值 left,top,right,bottom 值得用法)
- // 是不是很多, 那么来一个简写
- background: red url('1.jpg') no-repeat center center / 100px 100px
- }
- div{
- color: red
- }
- div{
- opacity: 0.5
- }
- div{
- font-family: '宋体';
- font-size: 16px;
- font-weight: bold;
- font-style:italic // 延伸
- }
- div{
- text-align: center // 文本对齐方式(基本值: left;right;center; 延伸值: justity;start;end)
- }
- div{
- text-indent: 20px; // 距离文章开头 20px
- text-indent: 20%; // 距离文章开头 20%
- text-indent: -10px; // 距离文章开头 - 10px
- }
- Word-wrap
- letter-spacing
- <!DOCTYPE HTML>
- <HTML lang="zh-cmn-Hans">
- <head>
- <meta charset="utf-8" />
- <title>
- text-shadow
- </title>
- <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com"
- />
- <style>
- .test li{margin-top:10px;} .test .mormal p{text-shadow:1px 1px rgba(0,0,0,.3);}
- .test .blur p{text-shadow:1px 1px 1px rgba(0,0,0,.3);} .test .group p{text-shadow:1px
- 1px 0 rgba(255,255,255,1),1px 1px 2px rgba(0,85,0,.8);}
- </style>
- </head>
- <body>
- <ul class="test">
- <li class="mormal">
- <strong>
- 普通文字阴影
- </strong>
- <p>
- 测试普通文字阴影效果
- </p>
- </li>
- <li class="blur">
- <strong>
- 模糊文字阴影效果
- </strong>
- <p>
- 测试模糊文字阴影效果
- </p>
- </li>
- <li class="group">
- <strong>
- 多重模糊文字阴影效果
- </strong>
- <p>
- 测试多重模糊文字阴影效果
- </p>
- </li>
- </ul>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="zh">
- <head>
- <meta charset="utf-8" />
- <title>
- title
- </title>
- <meta name="author" content="" />
- <style>
- .test li{margin-top:10px;} .test li:nth-child(1){ text-decoration-line:none;
- } .test li:nth-child(2){ text-decoration-line:underline; } .test li:nth-child(3){
- text-decoration-line:overline; } .test li:nth-child(4){ text-decoration-line:line-through;
- }
- </style>
- </head>
- <body>
- <ul class="test">
- <li>
- 没有文本装饰
- </li>
- <li>
- 下划线装饰
- </li>
- <li>
- 上划线装饰
- </li>
- <li>
- 栅格线装饰
- </li>
- </ul>
- </body>
- </HTML>
- text-decoration-color // 线条颜色
- text-decoration-style // 线条样式
来源: http://www.qdfuns.com/article/49488/f916eb018966524b7e44efabfabb849a.html