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