CSS进阶

目录

页面布局三大核心：盒子模型 ，浮动，定位

盒子模型

圆角边框

阴影

浮动

定位

伪类

---

页面布局三大核心：盒子模型 ，浮动，定位

看透网页布局的本质 ：

1. 先准备好网页元素，网页元素基本都是盒子box

2. 利用CSS设置好盒子样式，然后摆放到相应位置（核心）

3. 往盒子里装内容

盒子模型

 

CSS盒子模型本质就是一个盒子，封装周围的HTML元素，包括外边距margin，内边距padding，边框border和实际内容content

边框

1. 宽度border-width：px单位

2. 样式border-style ：solid（实线），dashed（虚线），dotted（点线）

3. 颜色border-color

复合写法：border： 5px solid pink

四条边框可以分开写：border-top，border-bottom，bottom-left，boder-right（注意层叠性）

table，td{

}可以使内边框和外边框都变

border-collapse：collapse合并相邻的边框

内边距

边框与内容的边距

padding-left，padding-top，padding-right，padding-bottom

复合写法：padding：5px（上下左右5像素）

padding：5px 10px（上下5像素，左右10像素）

padding：5px 10px 20px（上像素，左右10像素，下20像素）

padding：5px 10px 20px 30px（上右下左）

如果盒子已经有宽度和高度，会撑大盒子***（需要减掉）

没有指明宽度和高度，不会撑大盒子

外边距

margin-left,margin-right,margin-top,margin-bottom

应用：块状元素水平居中（指定宽度，左右margin：0 auto）

行内元素文字水平居中（text-align：center）

嵌套块元素垂直外边距的塌陷问题：

 

清除内外边距（不同的内边距外边距的默认值不同）

*{

padding：0；

margin：0；

}

---

圆角边框

border-radius：length（圆与边框交集形成的）

 

• 圆形：border-radius：宽度和高度的一半

或 border-radius：50%

 

• 圆角矩形：设置为高度的一半

• 可以设置不同的圆角border-radius：10px 20px 30px 30px

• 

两个值：对角线一样

阴影

值	描述
h-shadow	水平阴影的位置，允许负值，必写
v-shadow	垂直阴影的位置，允许负值，必写
blur	模糊距离
spread	阴影的尺寸
color	阴影的颜色
inset	内阴影（默认的是outset）

text-shadow ：文字阴影

---

浮动

• display

block：块元素

inline：行内元素

incline-block：是块元素，但是可以内联，在一行

none

• float

clear：both

---

定位

• 相对定位：相对于自己原位置进行偏移

  position：relative

  top：-20px；向上20像素

  left：20px；向左20像素

  bottom：-20px；

  right：20px；

• 绝对定位

  定位：基于××定位

  1. 没有父级元素定位的前提下，相对于浏览器定位

  2. 假设父级元素存在定位，我们通常会相对于父级定位

  3. 不会超出父级

  position：absolute；

• 固定定位fixed

---

伪类

伪元素选择器

我们可以利用CSS标签，不需要HTML标签

伪元素

::before

::after

 

nth-of-type（2）：选中父类元素，下的第二个p标签