ZG前端学习系统day04 2020-11-5

  • 盒子模型存在的两个问题(父子关系外边距塌陷和兄弟关系外边距塌陷问题
    父子关系外边距塌陷问题:当标签嵌套的时候对里面的元素添加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 优先级

·

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值