web前端初学记录day5

优先级

优先级高的选择器样式覆盖优先级低的样式

精度越准的选择器优先级越高，!important优先级最高实际生活中不建议使用

优先级的叠加计算

应用于复合选择器

公式（行内样式个数，id选择器个数，类选择器个数，标签选择器个数）

一次一级一级比较，若一级相等对比下一次依次类推谁的个数多优先级最高

!imporant若没有放到继承里那么它的权重最高，继承优先级最低

盒子模型

内容区域：width height

边框：border：1px solid(dashed doteed) red

          快捷键：bd+ Tab

          单方向设置：border-left：连写取值

尺寸计算：padding和border加入会撑大盒子尺寸

               保证盒子尺寸不变就在原来基础上减去2倍的padding和border的值

padding（内边距）多值：padding：上 右 下 左    按顺时针方向设置可设置双值或三值

盒子模型的内减模式：即根据盒子大小自动计算尺寸

                                  box-sizing：border-box

外边距：margin     设置同内边距一样

版心居中：即网页有效内容居中

                 margin：0 auto

外边距合并问题：垂直的两个块级元素上下margin会合并所以只需设置一个margin即可

外边距塌陷问题：互相嵌套的块级元素margin会作用到父级元素

                            解决：1.父块设置边框线或设置顶层内边距

                                       2.overflow：hidden

                                       3.子块转为行内块元素

行内元素的垂直外边距问题：行内元素设置padding和margin只对水平方向有作用垂直方向无用

                                              解决：设置line-height设置垂直外边距

案例

新闻