小记：学习web也有几个月了，从一周一门语言一周完成工作室的一个任务开始，其实感觉自己学了挺多东西的，可是现在来做暑期答辩的时候却发现很多东西长时间不用，学了就忘了，所以在这个暑假我决定开始写博客啦，仅仅就是记录一下我的学习过程。
块级元素与内联元素：
简单而言，块级元素就是第一个元素在第一行 第二个元素就从第二行开始，内联元素是所有元素都在一行，下面是display的几个属性解释。
1、display:block就是将元素显示为块级元素。
block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
2、display:inline就是将元素显示为内联行内元素。
inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
3、display:inline-block将对象呈递为内联块级对象。
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
inline-block的元素特点：
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
1.背景图片的位置以及大小调整：
<背景图片的插入> ：在css中直接用body{background(-imag): url( ) }进行插入即可，同时要注意在css中p body h 等元素都是直接接括号。
<一些常用属性> ：
图像在水平方向上平铺：background-repeat：repeat-x；
图像不平铺：background-repeat：no-repeat；
图像大小：background-size ：100px(宽） 100px(高)；
：cover (图片完全覆盖背景区域)；
：25%(背景图片重复4张)；
：50%（宽占一半） 100%（高占满背景图片框架）；
图像位置：background-position ：center/right center；
：50%(水平位置） 50% (垂直位置）；左上角为0% 0%，右下角为100% 100%；
：10px(水平方向像素) 20px(竖直方向像素);
：inherit(继承父元素的位置)；
这里说下boder-image属性：
border-image-source: url( );
border-image-slice: 50% 50%;(图像的边界向内偏移)
border-image-width: 30 30;(图像边界的宽度)
border-image-outset: 20px 20px 20px 20px( 边框上下左右离内部的距离)
border-image-repeat: stretch(默认值，拉伸图像来填充) /repeat(平铺)/round(缩放图像；来适应区域)
2.固定的应用
<背景固定>
将背景图片固定于最低层，再加上透明度可以做出比较好看的效果，上部分加个透明的盒子，滚动鼠标的时候把背景图片显现出来,,,,我觉得挺有意思的：
.box{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: -10000;
}这样设置就可以达到背景图片置于底层的效果了，加上一些透明度做出来的网页特别好看！！！
<导航栏固定>
导航栏的固定，这个就比较常用了，一般内容比较多的网页都会用这个或者加个返回顶部。一般就给导航栏class设置属性,也是设置fixed属性和top=0；
.daohang{
width: 100%;
height:60px;
top: 0;
z-index: 100;
position: fixed;
margin-left: 0px;
left: 0px;
}
3.有特别效果的属性
<给盒子添加阴影边框>
box-shadow：10px (
向右边移动的阴影
) 10px(
向下边移动的阴影
) 10px(
虚化的距离
) 10px（
阴影大小
）#888888(颜色) inset（
从左上角开始阴影
）
再加一些hover属性就比较好看了，如果把背景调暗一点，边框阴影再用个亮点的颜色会有一种荧光的效果，我有一次的网页用的画布做的星星动态背景，然后加的这个效果感觉还蛮有意思的：
4.html字体及文本格式：
在网页中一般要用中文，这里要在<header>中添加一个解码标签（一般添加utf-8），防止出现乱码：
<meta charset=”utf-8″>
先列举一些基本的标签：
<b> 粗体，是html自带的加粗，一般可以用
font-wegih
t属性来直接调整到你想要的加粗程度
<big> <small> 字号大小设置，也是html自带的标签，可以用css的
font-size
来设置
<i> 斜体，但是不常用，现在一般很多前端设计师常习惯用这个标签来添加图标，<i class=”img”></i>，
可能比较容易理解吧
<ins> 插入字
<del> 删除字
<em> 着重字
<br> 换行，等效的调整行之间的距离，可用line-height来设置
<hr/> 创建水平线，这里html里面没有直接添加竖直线的标签，一般用<table> 或者boder的边框来设置：
<style>
.box{
border-left: 1px solid #CCCC99;*/上边框/*
border-right: 1px solid #CCCC99;*/右边框/*
border: 1px solid black;*/整个边框/*
}
</style>
<div class="box"> </div>
<table style="height:60px;border-color:000000;border-left-style:solid;border-width:1px"><tr><td valign="top"></td></tr></table>文本对齐：text-align：center/left/right/justify(每行宽度相等，左右外边距对齐;
字体大小设置：font-size：10px/10em
这里说一下px像素和em的区别：（
这个链接讲的比较清楚：https://www.cnblogs.com/leejersey/p/3662612.html
）
国内的设计师大都喜欢用px，而国外的
网站
大都喜欢用em和rem，
1. IE无法调整那些使用px作为单位的字体大小，像素px是相对于显示器屏幕分辨率而言的；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
text-decoration:overline 文字上部分的线
line-through文字中间的划线
underline文字下面的划线
none去下划线
text-transform:uppercase 全部大写
lowercase 全部小写
capitalize 每个单词第一个字母大写
text-indent ：50px 第一行文本缩进
letter-spacing：字符间距
line-height: 行高
word-spacing 单词之间的空白
white-space：nowarp 禁用文字环绕
在输入框中往往有些默认文字，一般有两种设置，区别是前者只有输入文字后才会消失且光标会自动置于所有字的前面 默认字不可删除，后者则光标置于所有字最后，输入时要根据需要删除默认字
<input type="text" placeholder="name" name="fname">
<input type="text" value="id" name="fname">效果如下：
一般格式,这里演示下拉导航：
<ul>
<li><a> </a></li>
<li><a> </a></li>
<li class="dropdown" ><a> </a>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
将竖直的导航变成水平的有两种，设置浮动float：lift 或者 设置内联display：inline，但是后者的每个<li>宽可能不相等
一般<ul> <li> 里面的常设置的属性：
ul{
list-style:none;去掉下划线
line-height: 40px;行间距
position:fixed;固定
top/bottom:0;固定在底部或顶部
}
li{
float:right;
border-right: 1px solid red;
}
li:before{
content:*;在每个导航元素前面添加*号
color:red;
}
一般导航栏中元素都会用到链接，关于链接的一些效果：
a:link {color:red} 未被访问的链接颜色为红色、
a:visited {color:red} 已被访问的链接颜色为红色
a:hover {color: red}鼠标指针移动到链接上为红色
a:active {color : red} 正在被点击的链接为红色
根据导航栏的特性可以做一些图片的横排，不需要怎么定位，下面的两排图片排列我就是用导航栏格式的特性做的：
6.优先级问题：
元素样式优先级从低到高排序：
- 通用选择器（universal selector），用通配符表示，如 * {boder:0px solid black}
- 元素选择器（element selector），如 div {boder:0px solid black}
- 类、属性或者伪类选择器，如 .c10 {boder:0px solid black}，:hover {…}
- ID选择器，如#i100 {boder:0px solid black}
- HTML元素的style属性
- 加了 !important的规则，如 #i100{border:6px solid black !important;}
选择器的优先级从低到高：
- 浏览器提供的默认样式表。
- 用户自己加的样式表（PS：什么意思）
- <link>元素中引入的样式表
- <style>元素中以@import引入的样式表
- <style>元素中的样式表，即写在html页面中的样式表
script的放置位置：
script可以放置于任何位置，但是html是从上到下解析的，将<script>标签放到前面会导致找不到id等，一般将<script>
标签放到<\body>的后面
7.opacity与rgab设置透明度的区别
首先，opacity是css3的属性，ie低版本不支持，ie支持RAGB透明效果，ragb(a,b,c,0.1）前面三个为rgb的颜色值，最后一个为透明度。
opacity 是元素透明，而子元素也都透明，如：div在红色背景透明度为0.5，可是div里的文字也变得透明，而用RGAB实现透明效果，只改变元素本身的透明效果，文字没有变透明。
关于配色的的网站：
https://encycolorpedia.cn/ab5585
十六进制颜色名转rgb：
http://www.yuangongju.com/color
8.设置元素居中
给定宽元素设置margin:0 auto，出现设置无效的原因:
1.float会导致margin:0 auto无效
2.必须要有width
给不定宽元素设置水平居中：
1：将要居中的元素加入到table标签中的td标签里面
2：将块级元素设置成内联元素，display:inline 然后利用内联元素的text-aligin:center
3: 设置父元素position:relative ，display:inline-block,margin-left:50%,子元素margin-left:-50%