web前端设计学习体验

web前端一般由html,css,javascript等搭成
上了学校开的前端设计课后想写一些自己关于前端html,css设计的一些体验和自己走过的坑。一定是要积累沉淀啊。
个人认为web前端的写时最好时先把内容排好再安排标签样式，先有主体再有外表

响应式web：

刚开始写html用position绝对定位某个标签，虽然把网页铺排看起来还是很正常，但是一把窗口调小一定元素就会东跑西跑，十分不美观。关于这一点是因为前面标签的挤压。
不美观怎么办，那我们需要在不同的视口下有不同的样式(๑•̀ㅂ•́)و✧。
媒体查询结构

@media only screen and (这里放条件语句，比如说min-width:400px) {
                 .....}

这个查询语言也很好记，就是说在screen宽度在多少的时候我们要显示什么样的css，这样做的话就可在一个css文件里放不同显屏时的不同样式了
多个外联式css文件

  <link rel="stylesheet" href="css文件" media="only screen and (min-width:400px)">

这里的media用于判断什么时候用啥css文件

div

对于一段内容来说他可能需要一个地方来安放他，这就可以时我们的div来做这个事。它像一个盒子一样吞吐标签，很大程度上能解决标签的位置等问题

居中的奇淫技巧

老实说居中问题在刚开始时常让我头秃。
body居中
整体的内容居中而不用class怎么搞，不如来设置body的最大宽度

body{
              max-width: 1200px;
              margin:auto; 
      }

div中文本图片居中

text-align:center ;                              //表示水平居中
vertical-align: middle;                        //表示垂直居中

绝对位置居中

position:absolute;
left: ; right:;                          //左右百分比自行根据网页设置

浮动

浮动的设置能让网页内容更加直观，视觉效果更好。比如让一个图片被文字环绕，若单纯设置绝对位置，很有可能出现图被文字挤到下一行的情况。但用浮动（对图片）配上最大宽度（对文本使用）会让一切很和谐，比如说这个例子

float

然而浮动往往会影响下一个标签，这并非吾等所愿意看见的。

clear:all;                 //清除上一个标签的浮动效果

max-width

这个语句时用来限制我们标签的宽度的，画地为牢，让标签里的东东能够安分的呆在那里面。
讲真，用max-width来让两个标签里的内容能够并排到一起十分的方便