个人css常见问题总结

2016.1 css个人总结，欢迎指正。

声明：以下符号都是英文状态下的，且知识点不全面。

Css概念：简称层叠样式表或者叫级联样式表（cascadingStyle Sheets）

写法：

选择器{

属性：值;

}

选择器分三种：①类选择器 (.选择器) ② id选择器 (#选择器) ③标签选择器 (标签名)
④通配符选择器

*{

属性：值;

}

一个标签可以调用多个类
书写位置：

① 内嵌式：写入head标签里头 <style type=”text/css”>选择器{属性：值}</style>

② 行内式：写入标签中style=”属性：值; 属性：值”

③ 外联式： <link href=”” rel=”stylesheet”/>

比如容易疏忽的css属性： text-align 文字居中（块级元素）；text-indent 首行缩进，单位em代表汉字位置宽度；text-decoration:none;将下横线去掉（none，underline）；border-collapse:collapse 表格合并。 List-style：none 去li前面的默认小圆点。

Overflow：scroll ||hidden ||auto。

Css中的属性联写：

Font:font-style font-weight font-size/line-height font-family

例如： 注意一下line-height.和字体之间的逗号。

.p1{
font:italic bold 20px/40px "宋体","微软雅黑";

}

注意：按顺序，必须含font-size和font-family

注意css样式上的命名规范。

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

复合选择器分类：①标签指定式选择器（p.p1） ②后代选择器(p.p1) ③并集选择器(.p1,.p2)

Html标签分类：

① 块级元素 div p h1等

② 行内元素 span a font

③ 行内块元素 img input

用display:block/inline-block inline 可以实现模式转换

Css三大特性：

层叠性；

继承性：（所有涉及文字大小，颜色，字体，都可以实现继承，除了超链接a中的文字和标题标签里不能继承font-size）

优先级：！important 》行内样式》ID选择器》类选择器》标签选择器

第一个特点：继承的权重为0, 第二个特点：权重会叠加。

伪类(需按顺序写)

a:link{} 超链接未访问的样式 和a{} 标签

a:visited{} 超链接访问过后的样式 (第一次打开时会进行初始化)

a:hover{} 鼠标放到超链接上的样式

a:active{} 链接激活的样式

:focus 获取焦点的样式

Background 的属性联写。

Background: background-color IIbackground-image II background-repeat II background-attachmentbackground-position

background-position:40px 10px; 代表左右，上下 。 第一个代表水平方向，第二个代表垂直方向。

background-attachment fixed 固定 ？

line-height 行高，行高=文字大小+上间距+下间距

量效果图的行高就是文字两下边的高度，即，两条基线之间的距离

浏览器默认文字大小：16px ，默认文字行高：18px

单位：px（设置多少就是多少）， em， %，和不带单位。 （文字大小*设置的行高值）

Border联写 ：无顺序要求。

Border-style：dotted （点线）、dashed （虚线）、solid （实线）

Input表单的属性：
Outline-style：none; 去掉表单控件轮廓线
Border:0none; 去掉边框线

盒子真正的大小（宽度）=设置的盒子宽度+左右边框border+左右padding

继承的盒子：设置padding值不影响子盒子大小（在一定范围之内） ？？
外边距合并问题。。？

1给父盒子设置边框 2：给父盒子添加overflow:hidden

定位分类：
① 静态定位 static 按标准流的方式显示
② 绝对定位 position ：absolute 看脸型，不占位置
③ 相对定位 position ：relative 自恋型，占位置，子绝父相
④ 固定定位 fixed 固执型 不占位

总结模式转换方式：
Display float absolute fixed

浏览器中的坐标系:

Y轴以上为负，以下为正

X轴以左为负, 以右为正

定位的盒子如何居中，利用margin-left和left 实现。

文字、图片居中
利用vertical-align：middle 且display：inline-block

Logo优化，文字移除 利用属性：text-indent：-1000em；设置一个变态的值，将文字挤走。