html css的简单学习

html css的简单学习

---

css的内边距：
padding （auto、length、%）(顺序：上、右、下、左)
padding-top
padding-left
padding-right
padding-bottom

示例：
*{padding:10px 20px 30px 40px} //顺序：上、右、下、左
===========================================================
css中的外边距：
margin （auto、length、%）(顺序：上、右、下、左)
margin-top
margin-left
margin-right
margin-bottom
=============================================================
css的定位：
普通流、浮动、绝对定位。
使用浮动元素或者元素定位后，会生成一个块级框，不论本身是何种元素。

css的定位属性：
position 把元素放置到一个静态的、相对的、绝对的、固定的位置中。
top 定义了一个定位元素的上边距边界与其包含块上边界之间的偏移。
right 定义了一个定位元素的右外边距边界与其包含块右边界之间的偏移。
bottom 定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
left 定义了一个定位元素的左外边距边界与其包含块左边界之间的偏移。
overflow 设置元素的内容溢出其区域时发生的事情。
clip 设置元素的形状，元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

position属性：
static 默认值，没有定位，占用页面空间；
relative 相对定位，占用页面空间，基于父级的定位，可能会覆盖其他元素；
absolute 绝对定位，不占用页面空间。
fixed 固定定位，不占用页面空间。

示例：
.box{
width:100px;
height:100px;
border:1px solid red;
position:relative;
top:20px;
left:20%;//基于父级
}

浮动：可以使块级元素变行级元素。
float (left、right)
clear 清除浮动，（left、right、both），浮动会造成不占用父级空间，清除后可以
把父级撑起来。

示例：
.box{width:100px;height:100px;float:left}
============================================================================
cursor:pointer;//鼠标移上去，显示小手

设置弧度/曲面(x轴位移 y轴位移 阴影宽度 颜色 内部/外部 )
box-shadow:0px 5px 20px #1F4612 inset;

设置圆角：
border-radius:5px;//一个值就是四个角都圆角
border-top-left-radius:5px;//只设置左上角为圆角

overflow:hidden; //允许子级元素撑开父级元素，超出部分隐藏

.clear{-ms-zoom:1} //针对IE，
.clear:after{content:'';display:block;clear:both;}//使用伪类，撑开父级元素
clear类放在父级元素上。
========================================================================
width和max-width：
设置width，浏览器的宽度发生变化时可能会出现滚动条。
max-width不会出现滚动条。
========================================================================
background-position:0 30px;//设置背景的位置
===================================================================
谷歌浏览器插件---谷歌访问助手：
http://www.ggfwzs.com/230/chrome.zip
==============================================================
Subline text3插件：
ctrl+shift+p 显示控制台
=================================================
Atom是一款免费的编辑器。
====================================================================
搭建BrowserSync运行环境，浏览器不刷新就可以看到效果:
1、下载node.js；
2、安装BrowerSync包；
3、切换到项目目录；
4、启动BrowerSync服务。
网址：www.browersync.cn
===================================================================