-
盒子模型存在的两个问题(父子关系外边距塌陷和兄弟关系外边距塌陷问题
父子关系外边距塌陷问题:当标签嵌套的时候对里面的元素添加margin-top会作用在外面父盒子上面。 父元素的上外边距会与子元素的上外边距会发生合并,共用了一个外边距,取两者较大的值作用在父元素身上
解决方法:1 给父元素添加一个边框 2 对父元素添加上内边距代替子元素的上外边距 3 BFC规范(可以给外面的父盒子添加overflow:hidden)
兄弟关系外边距塌陷问题:当上面的盒子添加margin-bottom 和下面的盒子添加margin-top 两者之间的间距是两数之间的最大值
解决方法:1 把上边距 和下边距同时加在一个盒子上 2 BFC规范(可以在某一个套一个盒子 给外围盒子添加overflow:hidden 触发BFC规范) -
background背景
背景颜色:background-color:英文单词 #16进制 rgb() rgba()
背景图片 : background-image:url();
背景图和img的区别:
1 背景图是作用在css 而图片是用过html添加
2 背景图只是用作修饰,然而图片表示的是重要的信息
3 文字不能写在img上 而背景图可以·
背景的平铺方式 background-repeat :5个可选值 none去除背景
背景的位置 background-position: x y;
可以用方向关键词 百分比 像素(图片从左上角开始连) 默认值 是center 写一个值的时候另一个采用默认值center
复合写法: -
复杂的css选择器
后代选择器 名1 名2 { } 既有儿子也有孙子。。。。
子代选择器 名1 > 名2{ } 只有儿子
交集选择器 名1名2{ }(无空格)
伪类选择器 (针对于a标签 )L V H A
名:link{}没有访问之前
名:hover{}当鼠标悬放的
名:visited{}当鼠标点击但是未松开时
名:active{} 当鼠标点击完之后 -
复杂标签的优先级和权重
行内(1000)id(100)class(10)标签(1)通配符(0) !important提高权重要比行内还要高
复杂选择器的权重: 组成单一选择器的权重之和,除群组选择器之外
- css选择器的三大特性:
1 层叠性 一个属性标签设有2个相同的选择器,相同的样式前者会被后者取代 就近原则
2 继承性 子元素会继承父元素的一些样式
text- line- font-
备注:a标签不可以继承父元素的color属性
标题标签继承不了父元素的font-size
3 优先级
·