html去掉盒子边距,第五天,外边距塌陷问题,盒子居中,浮动,overflow属性,clear属性,伪元素...

day 05

知识回顾

1、选择器的优先级如何计算？

基础选择器：权值(id>class>标签>通配符)

复合选择器：构成它的所有基础选择器的权值之和

2、如何去掉边框

border:0

border:none

3、简述什么是盒模型

所有的元素都可以看做是一个盒子，都具有盒模型特征，盒模型也叫做框模型，盒模型包含：内容(content)、内填充(padding)、边框(border)、外边距(margin)

元素的总宽

元素的总高

4、哪些属性可以继承

font-size、font-family、font-weight、font-style

line-height

text-align、text-decoration、text-indent

color(a标签的文字颜色不能继承)

list-style

5、行级元素与块级元素的区别

块级元素：独立成行、默认情况下，宽度100%，高度自适应，具有全部盒模型特征

行级元素：横向排列，默认情况下，宽高都是自适应的，具有部分盒模型特征(设置高宽无效，上下margin不生效)

6、列举常见的块级元素与行级元素

块级元素：div、p、h1-h6

行级元素：a、span、b、strong、i、em等

一、外边距塌陷问题

1、父子元素的外边距塌陷问题

问题描述：父元素设置margin-top，同时给子元素也设置margin-top时，margin取较大值

产生原因：父子元素共用一个margin区域

解决方案：

(1)给父元素设置一个边框

/* 解决方案一 */

border: 1px solid red;

(2)给父元素设置padding-top拉开与子元素之间的间距

.wrap {

width: 500px;

height: 480px;

margin-top: 50px;

/* 解决方案二： */

padding-top: 20px;

background-color: aqua;

}

.box {

width: 100px;

height: 100px;

background-color: pink;

}

(3)给父元素设置overflow:hidden | auto | scroll

.wrap {

width: 500px;

height: 480px;

margin-top: 50px;

background-color: aqua;

/* 解决方案三： */

overflow: hidden;

}

2、兄弟元素的外边距塌陷问题

问题描述：两个兄弟元素，第一个元素设置margin-bottom，第二个元素设置margin-top，这是margin会取较大值

产生原因：共用同一个margin区域

解决方案：

给任意一个元素套一个父盒，并给父盒设置overflow:hidden

二、盒子居中技巧

1、盒子水平居中

margin:0 auto实现盒子的水平居中

盒子必须具有宽度属性

必须是块级元素

设置margin:0 auto

.box {

width: 300px;

height: 300px;

margin: 0 auto;

background-color: aqua;

}

2、宽高由内容撑开的元素的居中

.box2 {

width: 500px;

height: 300px;

border: 1px solid red;

text-align: center;

line-height: 300px;

}

.box2>span {

padding: 20px;

background: pink;

}

3、图片的居中技巧

(1)给图片的父盒设置text-align：center

.box3 {

width: 500px;

height: 500px;

border: 1px solid red;

/* text-align: center; */

}

(2)给图片转块，并设置margin: 0 auto

.box3>img {

display: block;

margin: 0 auto;

}

三、浮动

1、css三大布局机制

(1)正常文档流/标准流/普通流

块级元素：垂直方向上一个接一个的排列

行级元素/行块级元素：水平方向上一个接一个的排列

(2)浮动

解决块级元素水平排列

(3)定位

2、浮动

float属性

(1)none

float：none;

没有浮动，用于原本设置了浮动的元素，取消浮动时使用

(2)left

float:left;

设置元素是左浮动的

(3)right

float:right;

设置元素是右浮动的

3、浮动的特性

(1)设置了左浮动或者右浮动的元素会脱离正常文档流，不占位

(2)设置了左浮动或者右浮动的元素提升层级

(3)块级元素设置左浮动或者右浮动时，如果元素设置了宽高将按照设置的宽高显示，如果元素没有设置宽高，宽高将自适应

(4)行级元素设置左浮动或者右浮动时，支持宽高属性

4、浮动带来的影响

浮动的影响：子元素设置了左浮动或者右浮动时，子元素脱离正常文档流，不占位了，因此父元素的高度为0，会影响到与父元素同级的下面的兄弟元素。

5、清除浮动

(1)给父元素设置固定的高度

.wrap {

background-color: pink;

height: 202px;

}

不够灵活

(2)给父元素设置overflow这个属性，值除了visible以后都可以

overflow:hidden | auto | scroll;

当子元素超出父盒的区域时会进行溢出处理

(3)给浮动子元素下方添加一个空的div,这个div本身不浮动，并设置clear:both;

.wrap {

background-color: pink;

}

.box {

float: left;

width: 200px;

height: 200px;

border: 1px solid red;

}

.clear {

clear: both;

}

代码冗余

(4)推荐方式：定义clearfix这个类名，之后需要清除浮动时直接使用这个类名即可。书写以下代码：

.clearfix::after {

content:"";

display:block;

clear:both;

}

.clearfix {

*zoom:1; /*兼容ie7-*/

}

不会在结构上造成冗余代码，可以多次重复使用

四、其他属性(overflow溢出,clear清除浮动,伪元素)

1、overflow属性

overflow属性用于块级元素内容超出盒子后如何进行处理

overflow:hidden | visible | auto | scroll;

visible 可见的(默认值)

hidden 溢出隐藏

auto 自动

scroll 滚动

2、clear属性

用于清除浮动

clear:left | right | both;

left 清除左侧浮动带来的影响

right 清除右侧浮动带来的影响

both 清除两侧浮动

3、伪元素

使用css创建出来的元素就是伪元素

(1)::before

在....之前创建一个元素

element::before{

content:"";

}

(2)::after

element::after{

content:"";

}

通过css创建出来的伪元素默认是行级元素