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
===================================================================