个人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；设置一个变态的值，将文字挤走。