目录
CSS进阶
选择器进阶
复合选择器
后代选择器
子代选择器
并集选择器
交集选择器
hover伪类选择器
Emmet语法
背景相关属性
背景颜色
背景图片
背景平铺
背景位置
背景相关属性连写
元素显示模式
块级元素
行内元素
尺寸和内容是一样大的
行内块元素
元素显示模式转换
CSS特性
继承性
层叠性
优先级
叠加计算
CSS盒子模型
盒子模型
内容的宽度和高度
边框(border)
solid:实线 dashed:虚线 dotted:点线
边框单方向设置:
left、right、top、bottom
内边距(padding)
具有复合属性,最多可以写四个值,以空格隔开,分别代表上、右、下、左
注:border和padding都会撑大盒子,实际操作时要注意减掉合适的长度
自动内减
外边距
操作方法与内边距完全相同
清除默认内外边距
解决方法
或
版心居中
外边距折叠现象——1、折叠现象
外边距折叠现象——2、塌陷现象
行内元素的内外边距问题
行内元素的margin和padding在垂直方向不生效,要改变垂直方向边距,可以转变显示模式或者添加行高:line-height
CSS浮动
结构伪类选择器
伪元素
标准流
浮动
浏览器解析行内块或者是行内标签的时候,如果标签换行书写会产生一个空格的距离
早期用来制作图文环绕功能,现在可以使行内块标签在一行排列且代码换行不会产生空格间距。
(拓展)CSS书写顺序
1、浮动/display
2、盒子模型:margin border padding 宽度高度背景色
3、文字样式
清除浮动
CSS定位装饰
定位
使用定位的步骤
如果left和right都有 以left为准
如果top和bottom都有 以top为准
相对定位
绝对定位
改变标签显示模式的特点:具备了行内块的特点
常用子绝父相
定位居中
使用百分数
位移居中
固定定位
元素的层级关系
z-index:整数;(取值越大,显示位置越靠上) z-index的默认值是0,必须要配合定位使用
装饰
垂直对齐方式
浏览器解析行内、行内块会当做文字来处理
光标类型
边框圆角
常见应用
overflow溢出部分显示效果
元素本身隐藏
visibility:hidden——占位隐藏
display:none——不占位隐藏