第二季 第四集 css2

display属性

指定了元素的显示类型

它包含两类基础特征，用于指定元素怎样生成盒模型

• 外部显示类型定义了元素怎样参与流式布局的处理

 

• 外部显示类型 */ display: block; // 独占一行 display: inline; // 只占用显示内容的大小 不能设置宽高

 

• 内部显示类型定义了元素内子元素的布局方式

 

• 内部显示类型 */ display: flex;

 

 

/* <display-box> values */  决定是否使用盒模型
display: none; // 不显示
/* <display-legacy> values */
display: inline-block; // 对内block 对外inline  // 两个元素的display都是inline- block会有一个一间距，换行就可以解决
display: inline-table;
display: inline-flex;

---

float属性

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

问题：会脱离父元素的掌控

解决

.gua-clearfix::after {
content: "",
display:block,
clear:both,}

 

---

position属性

用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置

static 默认 静态定位

relative 相对于自身的定位

absolutete 绝对定位，忽略所有上浮到非static属性

fixed 固定定位 相对于浏览器

非static属性都可以设置 top bottom left right属性来定位，z-index 重叠时候显示谁，谁数字大显示谁

---

盒模型

content 内容

margin 外间距 元素与元素之间的距离

border 边框

padding 内间距 //边框与内容的间距

如何设置圆形 border-radius： 50%；

margin：0 auto； 水平居中盒子

text-align：center； 文本居中

---

ooverflow属性（溢出）

定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。

visible（看的见的） 能显示多少显示多少

auto 需要时候加滚动条

hidden 多余隐藏

scroll 用不着也加滚动条