CSS样式盒子模型

CSS样式盒子模型

1、选择器

a)        4+3+3+*

b)        4个基本选择器：* 元素选择  class   id选择

i.          一个标签可以使用多个class

ii.         一个class可以用在多个标签上

iii.       挂类法

c)         3个复杂选择器  ：后代选择、交集选择（class和id）、并集选择

d)        3个非常用：子标签选择（>）、紧邻选择(+)、相邻选择(~)

e)        伪类选择+伪对象选择

i.          超链接   :first-child

ii.         ::after   ::before  ::first-line  ::first-letter

 

2、样式继承

a)        给父元素设置样式的时候，当前样式会应用到后代元素上

b)        跟文本相关的都能被继承

3、层叠性

a)        多个选择器给同一个元素设置样式的时候，会存在样式层叠效果

i.          看选择器是否选中了当前元素，如果选中，则看权值

ii.         如果没有选中，则遵循就近原则

iii.       如果都没有选中，且设置在同一层，继续看权值

iv.       Important   权值最高

 

盒模型解析

给盒子设置大小内外边距和边框的时候注意点：

1）如果设置了边框或者内边距，一定要减小宽高

2）如果设置了边框，减小宽高

3）如果设置了内边距，减小宽度

 

塌陷现象：通过margin设置外边距的时候，如果重叠，则取大值

Margin和padding如何区别使用：兄弟元素用margin，父子元素用padding

注意点：

如果父子元素设置内边距，用margin来做，margintop是会存在问题

解决方式1）给父盒子设置一个边框即可

2）添加overflow属性，值位hidden

 

 

 

内联元素和块元素分析

1）文档流：每个页面的内容元素符合标准文档流的布局（从上往下、从左往右摆放元素）

    每个盒子内部都会有一个独立的文档流

2）文档流中元素分类：块级元素、内联元素（行内元素）

a)        块级元素：完全符合盒子模型属性、必须独自占有一行

b)        内联元素：不符合盒子模型，可以和其他元素共享一行

注意：块级元素内部可以继续放置块级元素和内联元素

      内联元素内部，不要放置块级元素

C) 内联元素和块级元素的转换：display属性来设置，block  inline  inline-block none

Block:当前元素为块级元素，拥有块级元素的属性

Inline：当前元素为内联元素，拥有内联元素属性

Inline-block：既拥有内联元素属性，也拥有块级元素属性

None:不显示当前盒子

3）脱标

a)        脱离标准文档流的约束

b)        脱标的元素不受文档流约束，然同时符合块级元素和行内元素的共有属性

c)         脱标元素浮动的话，存在靠边现象

d)        Float  绝对定位 固定定位

浮动分析

浮动：float的元素无法撑开父元素的高度

浮动清除：1) overflow:hidden,可以让父元素适应脱标子元素的高度

  2）给父元素设置一个固定高度

 

补充：如果需要让块级元素共享一行1）脱标(float  absolute fixed)  2）display:inline-block