CSS基础

CSS基础

基本标签选择器
行内样式定义，任何一个标签都可以通过style属性定义这个标签独有的显示效果内部样式表显示内容
基础标签选择器的分类
标签选择器、类型选择器、id选择器

标签选择器

• 以标签名称作为选择器选中标签 “标签名{样式}”
• 标签选择器特点 : 能够为一群具有相同名称的标签，同时设置相同的样式类型选择器
• 在标签内部通过class属性，给标签设置类型名在样式表中通过【.类型名{样式}】 的方式给标签盒子设置样式

类型选择器特点：

• 相当于给标签起了一个别名
• 不同盒子可以有相同的class属性名，因此类型选择器可以给多个标签同 时设置相同样式
• 同一盒子可以有多个class属性名，在文档中以空格隔开，因此同一个盒 子的样式是多个选择器叠加的结果

id选择器

• id选择器是通过给标签设置id属性，进行定位选择
• 在样式表中通过 #id{样式}对标签设置样式,相当于一个人的身份证号

id选择器特点

• 有且只能有一个，不能重名，不能有多个。事实上在一个页面针对 不同标签多次使用相同id没有问题【浏览器最大程度容错】
• 一般不使用id选择器设置样式
• 使用三个基本选择器的优先问题、
• 同时针对一个标签使用三种定义，如果显示属性配置冲突则id选择器>类型选择器>标签选择器； 如果不冲突则叠加

总结： 越精确越优先

ps:其他选择器都将是三大基本选择器的一个组合

分组选择器
将多个选择器通过逗号分割，同时设置一组样式。每个选择器都是独立的选择器， 最后选择结果为所有选择器的和

后代选择器
选择元素内部所有指定元素，不在乎的层次深度。当然， 后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器
标准语法： 选择器1 选择器2 {样式定义} div1 div2 div3和div4

子选择器
子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向 下一级的元素，不可以再往下选择

相邻兄弟选择器
相邻兄弟选择器匹配和第一个元素相邻的第二个元素。注意是相邻下一个元素，不能查找上一个元素。
例如li id="bb1"和下一个li中间插入一个span元素则#bb1 + li则不能查找到元素

普通兄弟选择器
普通兄弟选择器匹配和第一个元素后面的所有元素

嵌套情况下子级盒子的margin特点

• 移动方式与平级盒子一样
• 移动的起点是从父级内容区域开始的，与父级的padding，border没有关系

水平方向：

• margin-left:将盒子自身向右推
• margin-right:盒子自身不动，将水平方向上的相邻盒子向右推

垂直方向：

• margin-top:将盒子自身向下推
• margin-bottom:盒子自身不动，将垂直方向上的相邻盒子向下推

内边距 :
内容到边界之间到距离。其中内容配置为width height(可以写在文档中标签中的部分)
边 : border设置的区域

padding: 1值=>代表四个方向设置相同的内边距
2值=> 上下 左右
3值=> 上 左右 下
4值=> 上 右 下 左（顺时针）
top right bottom left
padding-top:单独设置上内边距
padding-right:单独设置右内边距
padding-bottom:单独设置下内边距
padding-left:单独设置左内边距

总结：可以利用padding控制控件的大小

position定位方法的类型
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型

取值为：
static默认值。没有定位，元素出现在正常的流中。如果父组件没有定义大小，则子组件会撑开父组件
absoult生成绝对定位的元素，相对于 static 定位以外的第一个父元素 进行定位；元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。如果父组件没有定义大小，则父组件可能会坍塌
relative生成相对定位的元素，相对于其正常位置进行定位。 因此， “left:20” 会向元素的 LEFT 位置添加 20 像素

嵌套情况的margin外边距坍塌问题
在垂直方向上，当父级没有明确的边界时

• border-top,padding-top,border-bottom,padding-bottom，
• 父级中的第一个子级的margin-top会传递给父级，导致父级跟子级一起向下移动。
• 父级中的最后一个子级的margin-bottom会传递给父级，导致无法撑开父级高度
• 外边界坍塌问题出现在chrome firefox opera safari IE9以上浏览器中
  解决办法：给父级添加边界（border padding）

margin和padding都可以改变超文本位置

• margin是通过改变盒子位置，让盒子带着超文本移动
• padding是通过改变盒子边界到盒子内容之间的距离,来推着超文本移动

使用时候要根据效果图来判断使用哪个属性进行位置改变

• 当没有明确边界渲染时，margin，padding都可以使用
• 当有明确边界渲染时，如果盒子之间有间隙，使用margin。
• 如果盒子之间没有间隙，使用padding