CSS+DIV个人学习笔记
CSS选择符的分类
1.标签选择符--针对html标签：p{} ；h1{}
2.ID选择符--针对某一个id：#two{}
3.类选择符--针对某一类，或者某一些元素：.warn{}
4.通配选择符：*{}
5.包含选择符：e1 e2
a) 含义是所有被e1包含的e2
b) 如table td
6.选择符分组(集体控制)：将童颜的样式定义用于多个选择符，选择符之间用逗号分隔。如p，div，.warning{属性：值}
7.标签指定式选择符：
a) h1#content{}：表示针对所有id为content的h1标签
b) h1.p1{}：表示针对所有class为p1的h1标签
8.组合选择符：h1.p1，#content h1{}
CSS的特性
1.继承：子元素会继承父元素的某些样式。
2.层叠：子元素如果定义了与父元素相同的样式，会覆盖掉父元素的样式。
a) 后面的样式，会覆盖前面的样式。
CSS样式的优先权：
1.四种方式的优先权：内联式-->内嵌式-->链接式-->@import导入式
2.就近原则
3.作用范围越小，优先权越高
4.离要修饰目标越近的样式优先权越高
5.选择符的优先权：行内>id>class>标签选择符
6.我们可以通过!important语法来提升重要性(优先权)
a) color:green !important;
CSS伪列：超链接样式
如果，鼠标放到超链接不起作用，修改链接状态的顺序为：
:link - > :visited - > :hover - > :active
CSS盒子的相关属性
1.内容属性：内容本身的宽=width，高=height
2.内填充属性：内容与边界之间的距离padding
3.再定义盒子的宽度时，要考虑到。内填充，边框，边界的存在
4.如果增加了内填充，整个盒子的宽度值，要再减去增加的内填充值。
margin/padding的使用：
padding:10px;一个参数：代表上右下左
padding:10px 20px;二个参数：10代表上下 10代表左右
padding:10px 20px 30px;三个参数：10代表上 20代表左右 30代表下
也可以使用padding-left(top,right,botton)
使用外表据margin，要注意浏览器的兼容性
由于各个浏览器存着，内外边距的默认值不同；因此我们需要将所有浏览器的默认内外边距都从零开始。
关于列表的属性
list-style：list-style-image || list-style-position || list-style-type
列表的样式：列表的图片||列表的符号的位置||列表的样式
通常使用：list-style:none;
边框
border：border-witdh || border-style || border-color
如果只写border，则后面要跟着的是，三个不同的子属性：粗细，样式，颜色
小技巧：
让盒子水平居中：将对象的左右外边界设置为auto
让盒子中的内容垂直居中：设置行高=盒子的高度，但是不能有换行。
内联元素：a，em，span（display:inline）
不能设置宽和高
不影响换行
背景控制
background:颜色 图片 平铺方式 固定方式 位置
background:color image repeat attachment position
背景图片默认情况是进行水平与垂直方向的平铺：background-repeat：repeat;
默认背景图片显示在元素的左上角。
背景图片的依附方式：固定的含义：将图片固定在屏幕的某个位置。background-attachment:fixed;
专业点的技巧：
翻转效果：准备2张大小相同，内容不同图片；正常情况显示一张，鼠标经过，显示另一张。
CSS精灵技术：主要是为了，减少http请求。
CSS布局的方式
1.默认文档流方式：以默认的html元素的结构顺序显示
2.浮动布局方式：通过设置html元素的float属性显示
3.定位布局方式：通过设置html元素的position属性显示
浮动
浮动是将块元素的独占一行的行为取消，允许与其同一行。
浮动其实是这个块，从原来的文档流模式中分离出来，它后面的对象，就视它不存在。
ul与li默认情况下是块元素，要想让他们在一行中显示，就要用浮动。
清除浮动：去掉前面对象浮动对后面对象的影响。
当父元素没有指定高度时，并且它的子元素有浮动，这时，这个父元素的个高度不会自动增加。
1.方法1：增加一个空的div。缺点：会增加代码。
2.方法2：设置overflow:hidden;
定位布局：可以通过元素的position属性控制元素的位置。
当我们要想使用绝对定位时：必须要有两个条件
1.必须给父元素加定位属性，一边拿建议使用position:relative;
2.给子元素加绝对定位position:absolute;同时要加方向属性。
相对定位与绝对定位
绝对定位是以父元素为基准点，进行定位。--会脱离文档流
相对定位是根据其自身为基准点，进行点位。--离开原位置，但还占着。