css 基础2
一.margin相关技巧
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并
盒子重合现象：两个盒子margin垂直边距的高度等于两个发生合并的边距的高度中的较大者。
解决方案如下：
1、使用这种特性（特殊布局用到）
2、设置一边的外边距，一般设置margin-top（布局常用）
3、将元素浮动或者定位
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin相关技巧</title> <style type="text/css"> body{margin: 0} .box{ width: 202px; height: 156px; background-color: gold; /* 设置元素水平居中： margin:x auto; */ margin: 50px auto 0; } .box div{ width: 202px; height: 30px; border: 1px solid green; background: pink; margin: -1px; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>
二，margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败（外部盒子没有设置边框和内部盒子用到margin属性）
解决方案如下：
1、外部盒子设置一个边框（不常用）
2、外部盒子设置 overflow:hidden（不推荐）
3、使用伪元素类：（比较常用）
.clearfix:before{
content: '';
display:table;
}
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin-top塌陷</title> <!-- margin-top 塌陷 在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下： 1、外部盒子设置一个边框 2、外部盒子设置 overflow:hidden 3、使用伪元素类： .clearfix:before{ content: ''; display:table; } --> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: gold; /* 1、外部盒子设置一个边框 */ /* border: 2px solid #000; */ /* 2、外部盒子设置 overflow:hidden */ /* overflow: hidden; */ margin: 50px; } .box div{ width: 120px; height: 50px; background-color: green; margin:50px 40px; } /* 3、使用伪元素类： */ .clearfix:before{ content: ''; display:table; } </style> </head> <body> <div class="box clearfix"> <div></div> </div> </body> </html>
三，css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。（外部盒子设置height属性）
解决方案如下：
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css元素溢出</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: gold; /* 1、visible 默认值。内容不会被修剪，会呈现在元素框之外。 */ /* overflow: visible; */ /* 2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。 */ /* overflow: hidden; */ /* 3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 */ /* overflow: scroll; */ /* 4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 */ /* overflow: auto; */ } </style> </head> <body> <div class="box"> 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。 overflow的设置项： 1、visible 默认值。内容不会被修剪，会呈现在元素框之外。 2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。 </div> </body> </html>
四，快元素
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素。
在布局中的行为：
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度100%
- 盒子占据一行、即使设置了宽度
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快元素</title> <!-- 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为： 支持全部的样式 如果没有设置宽度，默认的宽度为父级宽度100% 盒子占据一行、即使设置了宽度 --> <style type="text/css"> .box{ background: gold; margin: 20px; border: 10px dashed #000; padding: 5px; } </style> </head> <body> <div class="box">div标签</div> <p class="box">p标签</p> <ul class="box"> <li>列表标签1</li> <li>列表标签2</li> </ul> </body> </html>
五，内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素。
在布局中的行为：
- 支持部分样式（不支持宽、高、margin上下、padding上下）
- 宽高由内容决定
- 盒子并在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联元素</title> <!-- 内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为： 支持部分样式（不支持宽、高、margin上下、padding上下） 宽高由内容决定 盒子并在一行 代码换行，盒子之间会产生间距 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式 --> <style type="text/css"> .cn{ width: 400px; height: 100px; background-color: blue; font-size: 0px; } .box{ /* 支持部分样式（不支持宽、高、margin上下、padding上下）宽高由内容决定 */ /* height: 200px; height: 100px; */ /* margin: 20px; padding: 10px; */ background: gold; text-align: center; font-size: 20px; } </style> </head> <body> <div class="cn"> <a href="#" class="box">a标签</a> <span class="box">span标签</span> <em class="box">em标签</em> <b class="box">b标签</b> <strong class="box">strong标签</strong> </div> <div class="box"> <a href="">连接啊</a> </div> </body> </html>
解决内联元素间隙的方法
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
六，内联快元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。
在布局中表现的行为：
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距
- 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
display属性（这三种元素，可以通过display属性来相互转化）
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联快元素</title> <!-- 内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为： 支持全部样式 如果没有设置宽高，宽高由内容决定 盒子并在一行 代码换行，盒子会产生间距 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。 这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。 --> <style type="text/css"> .box{ width: 400px; height: 400px; margin: 50px auto; border: 2px dotted #000; } .box a{ width: 100px; height: 100px; background-color: gold; margin: 20px; font-size: 20px; text-align: center; line-height: 80px; text-decoration: none; /* display属性是用来设置元素的类型及隐藏的，常用的属性有： 1、none 元素隐藏且不占位置 2、block 元素以块元素显示 3、inline 元素以内联元素显示 4、inline-block 元素以内联块元素显示 */ display:inline-block; } </style> </head> <body> <div class="box"> <a href="#">a标签1</a> <a href="#">a标签2</a> <a href="#">a标签3</a> <a href="#">a标签4</a> </div> </body> </html>