黑马程序员技术交流社区
标题: 前端入门基础 [打印本页]
作者: 小~样 时间: 2019-6-7 10:53
标题: 前端入门基础
刚刚入门学习前端，自己感觉这些是一些经常要用到元素及属性，细节很重要，有时候可能就是一个标点符号忘写，最后导致没有出效果，找半天还没找出来，细节决定成败。
下面的是我自己感觉前端基础班所需要额外注意的知识点：
1、标签按钮 button <button>按钮</button>
2、 *{
margin:0;
padding:0;
}
以上代码表示清空所有的默认边距；
3、rgb（）如rgba（0,0,0,0.5）a为透明度
R红色 g绿色 b蓝色 a透明度小数点前面的0可以不写；
5、text-indent:2em; 首行缩进2个字；text-indent:2em; 首行缩进2个字；
6、文本线条装饰 text-decoration text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中 划线/删除线
text-decoration:overline; 上划线
7、链接的伪类四种状态：a:link 未访问的链接（访问前）
a:visited 已访问的链接（访问后）
a:hover 鼠标移动到连接上（鼠标经过）
a:active 选定的链接（按下鼠标的时候）
注意：以上的顺序不能颠倒；
8、将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
9、图片定位background-position：background-position:X坐标（水平方向） Y坐标（垂直方向）；
10、常用的线条样式：solid实线 dashed虚线 dotted点线
11、嵌套垂直外边距合并问题环境如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
解决方案：1、为父级设置上边框（不用）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；
3、直接给父级添加overflow:hidden;（常用方法）--- 利用了overflow:hidden;强制区分了父子级关系
12、css3圆角属性属性border-radius 一个值：四个角都是一样的弧度 两个值： border-radius: 左上右下 右上左下;
三个值： border-radius: 左上 右上左下 右下;
四个值： border-radius: 左上 右上 右下 左下; 正圆：如果想要得到正圆我们必须是一个正方形，然后设置border-radius: 50%;
胶囊形状：首先是一个长方形，然后设置border-radius的取值为长方形高度一半；
13、盒子阴影语法：box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/ 外阴影；
文字阴影语法：text-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色
14、关于图片插入底部留白Html中插入图片的时候会出现2-4px的底部留白
解决方案：01、给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；
15、清楚浮动的方法；（1）父级加overflow属性法直接给父级添加overflow:hidden;，强制的撑开父级的高度；
（2）经常使用 After伪元素清除浮动法
/*声明清除浮动的样式*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
16、简单了解overflowoverflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；
overflow:auto; 溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示
17、定位属性：position 取值不同实现的效果不同，如下：
静态定位：position:static;
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
如果盒子的显示模式为块元素，而且有固定的宽度我们可以直接用margin：auto;让盒子水平居中；
如果盒子定位了margin:auto;不会生效，那我们如何让定位的盒子居中显示？
情况1：如果用了相对定位position: relative;盒子还是可以同margin: auto;居中；
情况2：那么如果用了绝对定位position: absolute;和固定定位position: fixed;盒子就不能使用margin:auto；居中显示：
18、定位的叠加书序z-index• z-index是定位的z轴显示，只能用于相对定位、绝对定位和固定定位，数值越大越靠前，取值没有单位；
取值：0，正整数，负整数，默认值0
19、display显示与隐藏（重点）• 隐藏：display:none; === 属于不占位隐藏
• 显示：display:block; 将隐藏的元素显示出来
2、visibility显示与隐藏• 占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
20、用户界面-鼠标样式• 鼠标样式：cursor
• 小白（默认） cursor:default;
• 小手： cursor:pointer;
• 移动： cursor:move;
• 文本： cursor:text;
• 禁止： cursor:not-allowed;
21、用户界面-鼠标样式• 鼠标样式：cursor
• 小白（默认） cursor:default;
• 小手： cursor:pointer;
• 移动： cursor:move;
• 文本： cursor:text;
• 禁止： cursor:not-allowed;
这些东西还是多去练习去运用才会记得住，硬本领都是敲出来的。
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |