23412学习记录

文章详细阐述了HTML中的行内元素和块级元素的特性,包括它们的尺寸、间距和嵌套规则。还讨论了CSS中的继承机制、样式优先级以及外边距合并问题,同时提到了解决浮动元素导致的父元素坍塌的几种方法。
摘要由CSDN通过智能技术生成

1.HTML+CSS

  • 阴影:box-shadow:水平 垂直 模糊距离 尺寸 颜色rgba(r,g,b,透明度)
  • 行内元素:a, span, label, strong, em, br, img, input, select, textarea, cite等
  • 块内元素:div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset等

行内元素属性

  1. 行内元素属性标签它和其它标签处在同一行内
  2. 行内元素属性标签无法设置宽度,高度 行高 距顶部距离 距底部距离
  3. 行内元素属性标签的宽度是直接由内部的文字或者图片等内容撑开的
  4. 行内元素属性标签内部不能嵌套行属性标签(a链接内不能嵌套其他链接)

块级元素属性

  1. 每一个块级元素属性标签都是从新的一行开始,而且之后的元素也都会从新的一行开始(因为每一个块属性标签都会直接占据一整行的内容,导致下面的内容也只能从新的一行开始)
  2. 块级元素属性标签都是可以设置宽度、高度,行高,距顶部距离,距底部距离
  3. 块级元素属性标签的宽度假如不做设置,会直接默认为父元素宽度的100%
  4. 块级元素属性标签是可以直接嵌套的
  5. p标签中不能嵌套div标签
  • 继承:

继承是子节点默认使用父节点的样式属性,可以继承的属性很少,只有颜色,文字,字体,间距,行高,对齐方式和列表样式。

  1. 所有元素可继承:visibility,cursor(定义了鼠标指针放在一个元素边界范围内时所用的光标形状)
  2. 内联元素可继承:letter-spacing(字符间距),word-spacing(字间距),white-space(元素间空白符),line-height,color,font(font-family,font-size,font-style,font-variant,font-weight),text-decoration,text-transform(文本大小写),direction(文本书写方向)
  3. 终端块状元素可继承:text-indent(块级元素第一个字符的缩进),text-align
  4. 列表元素可继承:list-style,list-style-type,list-style-position,list-style-image
  • 优先级:内联样式>id选择器>类选择器=属性选择器=伪类选择器>标!签选择器=伪元素选择器
  1. !important优先级最高,设权重为10000
  2. 内联样式,如'style'等设权重为1000
  3. ID选择器,带#的,设权重为100
  4. 类,伪类,属性,如.content、:hover等,设权重为10
  5. 标签,伪元素,如p,div,:before等,设权重为1
  6. 可以使用矩阵一目了然看出
  • 外边距合并:css外边距合并(叠加)是指两个垂直相邻的块级元素,当上下两个边距相遇时,外边距重叠,且合并后等于其中较大者
  • 将超出的文字部分变成……:overflow:hidden/white-space:nowrap/text-overflow:ellipsis
  • 子元素浮动,解决父类坍塌的问题:
  1. 直接给父元素设置高度,在子元素改变的情况下比较繁琐
  2. 给父元素设置overflow:hidden
  3. 父元素结束标签之前加空div,样式为clear:both
  4. 伪元素选择器,父元素加上clearfix

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值