简要笔记
background 背景
background-color 背景颜色
background-image 背景图片 url(图片路径)
background-image 背景图片 url(图片径)
background-repeat 背景平铺
repeat 平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
background-position 背景图定位 关键字
X: left 图的左侧和元素的左侧对齐 center 图的中间和元素的中间对齐 right 图的右侧和元素的右侧对齐 ；Y: top 图的顶部和顶部的左侧对齐 center 图的中间和元素的中间对齐 bottom 图的底部和元素的底部对齐
具体值:X:正值从左向右移动，负值从右向左移动；Y：正值从下向上移动，负值从上向下移动
1.什么是css语法？
CSS就是层叠样式表。CSS 语法由三部分构成：选择器、属性和值。selector {property: value}选择器 (selector) 通常是我们希望定义的HTML 元素或标签，属性 (property)是可以改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）。
2.列举常见的css选择器？
一、标签选择器：顾名思议，标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。如：
a { color: red; }
ul { margin-left: 0; }
标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。
二、id选择器：我们通常给页面元素定义id。如：
#container {
width: 960px;
margin: auto;
}
id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10）， 作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差。
三、类（class）选择器：在CSS里用一个点开头表示类别选择器定义，如：
.error {
color: red;
}
这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。
四、群组选择器：当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
p,td,li{
line-height:20px;
color:#c00;
}
#mainp,#siderspan{
color:#000;
line-height:26px;
}
.www_52css_com,#mainpspan{
color:#f60;
}
.text1h1,#siderh3,.art_titleh2{
font-weight:100;
}
使用组群选择器，将会大大的减化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率与CSS文件体积。
五、后代选择器：后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式，如：
li a {
text-decoration: none;
}
这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y，要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有 的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要 考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。
六、相邻选择器 如：
ul + p {
color: red;
}
相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配第一个元素)
七、子选择器 如：
div#container > ul {
border: 1px solid black;
}
子选择器。与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。
八、相邻选择器 如：
ul ~ p {
color: red;
}
相邻选择器，与前面提到的X+Y不同的是，X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。
3.background属性如何简写？
例如：.class{ background: url(img.png) no-repeat scroll color repeT-x repeat-y
}
4.文本的属性有哪些？请写出font的复合式写法？
文本对齐属性(text-align) left (居左) right (居右) center （居中) justify (两端对齐)
文本修饰属性(text-decoration) none (无) underline (下划线) overline (上划线) line-through (当中划线)
文本缩进属性(text-indent) length(长度，可以用绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px))percentage (百分比，相当于父对象宽度的百分比)
font复合式写法顺序：
font-style（使用斜体、倾斜或正常字体）
font-variant（设置小型大写字母的字体显示文本）
font-weight（设置文本的粗细）
font-size/line-height（设置字体的尺寸和行高）
font-family（规定元素的字体系列）
5.text-indent有什么作用？
表示文本块中首行文本的缩进。允许使用负值。如果使用负值，那么首行会被缩进到左边。
6.超链接a标签的作用有哪些？
<a>标签，即超链接标签，它可以实现从一个网页到另一个网页的跳转，或者从页面的一个位置跳到另一个位置，也可以从一个网站跳到另一个网站。
7.a标签默然样式是什么？
a 表示所有状态下的连接 如 .mycls a{color:red}
① a:link：未访问链接 ,如 .mycls a:link {color:blue}
② a:visited：已访问链接 ,如 .mycls a:visited{color:blue}
③ a:active：激活时（链接获得焦点时）链接的颜色 ,如 .mycls a:active{color:blue}
④ a:hover：鼠标移到链接上时 ,如 .mycls a:hover {color:blue}
一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。
前三者分别对应body元素的link、vlink、alink这三个属性。
四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）。
8.什么是盒模型？盒模型包括什么？
盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
盒模型：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性内容（content）就是盒子里装的东西；而填充(padding)就是怕盒子里装的东西；边框(border)就是盒子本身了。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（div嵌套），填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子。
9.padding和margin的区别？
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
margin和padding的区别用图表示为
10.什么是margin叠加？什么是margin传递？
叠加：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为重合，并且因而所结合成的外边距称为折叠外边距
传递：父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。
11.列举几种常见的语义化标签？
<header></header> <nav></nav> <article></article> <h1></h1> <h2></h2>
12.常见的块元素和内嵌元素有哪些？简要说一下它们的区别？
块级元素 一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的，它包括以下这些标签：div、ul、li、dl、dt、dd、h1~h6、p、
内嵌元素 一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：a、span、img、sub(下标)、sup(上标)、strong(加粗)、em(倾斜)、s、i、u……
网友评论