CSS入门基础知识整理

规划好页面（css，html，javascript等相关资源要文件夹分好类后存放）

页面：

>index.html
>html
    >html文件

样式：

>CSS
    >CSS文件
基本样式(global.css)
全局样式(base.css)

。。。

CSS初始化

编写css样式之前需要初始化css样式（CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。）
CSS样式初始化能避免一些奇怪的问题
初始化代码可以百度

举例（淘宝初始化代码）：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

引入favicon图标

<link rel="shortcut icon" href="favicon.icon"/>

设置盒模型

width和height最稳定
其次考虑padding
最后考虑margin

浮动(float)

浮动的目的:可以让多个块级元素放到同一行上
float: left right none;

清除浮动

清除浮动：根据情况需要来清除浮动。
清除浮动的目的：就是为了解父盒子高度为0的问题
清除浮动的方法:

额外标签法
overflow:hidden ：触发bfc模式就不需要清除浮动
伪元素

.clearfix:after{
    content:"";
    visibility:hidden;
    display:block;
    hight:0;
    clear:both;
}
.clearfix{
    zoom:1;
}

双伪元素

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE/7/6*/
}

鼠标样式

cursor:pointer 小手状
cursor:default 默认
cursor:move 移动
cursor:text 文本输入

标签嵌套

块级元素 -- 任何元素可以
行内元素 -- 行内元素只能嵌套b u span 等元素
p元素内不能放div
a标签里面不能放a input等元素。

最后编辑于：2017.12.06 05:37:29