css重难点

普通流 inline

text-align:center

文字排列 行内元素适用

可以在块级元素外层包一个div 然后设置 text-align:center

普通流block

margin :0 auto

上下外边距为0 左右自适应

浮动元素

设置了左浮动的块级元素

进行居中

position:relative 相对原来的位置

left:50%

margin-left:-width/2 OR transform:translateX(-50%)

绝对定位

postion:absolute

left:0

right:0

margin:0 auto //使用了绝对定位可以使用块级元素的

postion:absolute

left:0

right:0

left:50%

margin-left:-width/2 OR transform:translateX(-50%)

清除浮动(出现浮动塌陷)

浮动就是儿子飘了(float),老子管不住儿子了(儿子高度为空)

浮动塌陷 包含块(父级块)没有设置高度或者为自适应 内部元素浮动脱离文档流 浮动元素的高度就不会计算在内,包含块内容不能撑起来形成塌陷 就会出现包含块对应浮动元素的位置的背景颜色直接没了

清除浮动三种方法

1.

给儿子介绍一个对象,管住儿子不要乱跑, 对象添加 clear:both

父元素容器内最底部加一个

然后给

设置属性clear:both

2.

把儿子锁在家里,bfc ,就是给老爷子设置 overflow:hidden / overflow:auto

给父元素设置属性overflow:hidden / overflow:auto

或者老爷子出去逮住小崽子,一起浮动 老爷子设置 float

3.

使用伪元素,就是给儿子介绍一个网恋对象(实际不存在,老爷子装的)

给老爷子添加 类class=clearfix 添加伪元素 :

.clearfix::after { content:' '; display:block ; clear:both}

上面三种,我最经常犯的错误是给错误的对象加错东西,

所以再总结一下
第一种:发媳妇 给儿子后面的元素加 clear :both
第二种:给门上锁 给父亲加 overflow 或者 float
第三种:父亲假扮网恋 给父亲加 ::after 然后 display:block clear:both

我经常是把css 错加给儿子 然后怎么试都不成功,子不教,父之过,应该定准浮动的父亲做文章,就不会有问题了

外边距塌陷

段落间垂直方向间隔 块级元素

外边距计算

  • 正数&&正数 取最大的数

  • 负数&&负数 绝对值最大的数

  • 正数&&负数 相加的和

圣杯布局

中间元素优先加载 div顺序 主左右

左中右元素设置左浮动

清除浮动消除塌陷

给父元素设置内边距 padding: 0 100px;

左右区域width:100px

使用负外边距

  1. 主区域设置宽度 width:100%
  2. 左区域设置 margin-left:-100%
  3. 右区域设置 margin-left:-100px
  4. 左区域设置 position:relative left:-100px
  5. 右区域设置 position:relative right:-100px

双飞翼布局

给主区域加一个父容器

左右区域width:100px

左中右元素设置左浮动

  1. 左区域设置 margin-left:-100%

  2. 右区域设置 margin-left:-100px

  3. 主区域设置margin:0 100px

  4. 主区域容器设置 width:100% float:left

    伪类和伪元素

伪类(可以多个进行拼接)

基于DOM 添加了对元素修饰

状态类 结构类 表单类 语言类
image
伪元素

创建对象
image
image

rem和em

根选择器

:root{}

html{}

rem

根据根的font-size来定基准 不断变化迭代

em

chrome中 1 em=16px

继承了浏览器的字体大小

查找是否设置了font-size

如果没设置去找父元素font-size

父元素没有再去找根的font-size

line-height

每行文字之间基线的距离

行距=(line-height)---(font-size)

(line-height)=(font-size) 行距为0

(line-height)<(font-size) 行距小于0

垂直居中

padding设置左右内边距

line-height 单行文字 image
flex布局 多行文字
image
table布局
image
grid布局
image
image
image

posted @ 2021-11-23 10:39  陌路旧夜  阅读(111)  评论(0编辑  收藏  举报