关于前面的前端学习
margin相关技巧
1.设置元素水平居中：margin:x auto;
2.margin负值让元素位移及边框合并
边距合并
外边距合并指的时，当两个垂直外边距相遇是，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距
的高度中的较大者。解决方案如下：
- 1 使用这种特性
- 2 设置一边的外边距， 一般设置margin-top
- 3.将元素浮动或定位
边距合并实例源代码：
<!DOCTYPE html>
<html>
<head>
<title>外边距实例</title>
<style type="text/css">
.box{
width: 500px;
border:1px solid #f00;
margin:200px auto 0;
background-color: yellow;
}
.box div{
/*利用外边距做一个框*/
margin: 20px;
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<div class="box">
<div>外边距合并指的时，当两个垂直外边距相遇是，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距
的高度中的较大者</div>
<div>外边距合并指的时，当两个垂直外边距相遇是，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距
的高度中的较大者</div>
<div>外边距合并指的时，当两个垂直外边距相遇是，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距
的高度中的较大者</div>
<div>外边距合并指的时，当两个垂直外边距相遇是，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距
的高度中的较大者</div>
</div>
</body>
</html>
margin-top塌陷
在两个盒子嵌套时候，内部的盒子设置margin-top会加到外边的盒子上，导致内部的盒子margin-top
设置失败，解决方法如下：
- 1 在外部盒子设置一个边框
- 2 外部盒子设置overflow:hidden
- 3.使用伪元素类：
.clearfix:before{
content:"";
display: table;
}
下面举出解决margin-top塌陷的实例：
<!DOCTYPE html>
<html>
<head>
<title>margin-top塌陷</title>
<style type="text/css">
.con{
width: 400px;
height: 400px;
background-color: gold;
margin: 100px auto 0;
/*第二种大盒子中增加边框*/
/*border:1px solid #f00;*/
/*第三种：外部盒子设置overflow:hidden*/
overflow: hidden;
}
.box{
width: 200px;
height: 200px;
background-color: blue;
margin-top: 100px;
margin-left: 100px;
}
/*解决margin-top塌陷的三种方式*/
/*第一种： 使用伪类元素*/
/* .clearfix:before{
content: "";
display: table;
}*/
</style>
</head>
<body>
<!-- 首先在盒子里嵌套一个盒子 -->
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
css元素溢出
当子元素的尺寸超过父元素的尺寸是，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
- 1.visible 默认值，内容不会被修剪，会呈现在元素框之外
- 2.hidden 当内容溢出时，会被剪切掉，其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能
- 3 . scroll 内容会被修建，但是浏览器会显示滚动条，以便查看其余的内容
- 4 auto 如果内容没有溢出，则显示原内容，若溢出了，则显示滚动条
- 5 inherit 规定应该从父类元素继承overflow属性
<!DOCTYPE html>
<html>
<head>
<title>元素溢出overflow属性</title>
<style type="text/css">
.box{
width: 300px;
height: 200px;
background-color: gold;
margin: 100px auto 0;
/*元素溢出解决方法-使用overflow属性*/
/*visible 默认值，元素溢出时不会剪切*/
/*overflow: visible; */
/*hidden 将溢出的元素剪切掉*/
/*overflow: hidden;*/
/*将溢出的部分， scroll显示滚动条*/
/*overflow: scroll;*/
/*auto将溢出的部分以更美观的滚动条显示, 如果元素没有溢出，则不显示滚动条*/
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<div>
当子元素的尺寸超过父元素的尺寸是，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1.visible 默认值，内容不会被修剪，会呈现在元素框之外
2.hidden 当内容溢出时，会被剪切掉，其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能
3. scroll 内容会被修建，但是浏览器会显示滚动条，以便查看其余的内容
4. auto 如果内容没有溢出，则显示原内容，若溢出了，则显示滚动条
5. inherit 规定应该从父类元素继承overflow属性
</div>
</body>
</html>
块元素、内联元素、内联块元素
元素就是标签，布局中常用的三种标签，块元素，内联元素，内联块元素，了解这三种元素的特性，
才能熟练的进行页面布局。
块元素
块元素，也可以称为行元素，布局中常用的标签如：div，p, h1~h6, ul, li, dl, dt, dd等等都是块元素
他在布局中的行为：
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度的100%
- 盒子占据一行，即便设置了宽度
内联元素
内联元素，也可以称为行内元素， 布局中常用的标签如：a、span、em、b、strong、i等等， 它们在布局中的行为：
- 支持部分样式(不支持宽高，margin上下)
- 宽高由内容决定
- 盒子并在一行
- 代码换行时，盒子之间会产生间距
解决内联元素间隙的方法：
- 去掉内联元素之间的换行
- 将内联元素的父级的font-size设置为0，然后在内联元素中重新设置font-size
内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为
类似于这种元素但是也归类于内联元素，我们可以用display属性将块元素或则内联元素转化成这种元素。它们在布局中
表现的行为：
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行， 盒子会产生间距
- 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式
这三种元素，可以通过display属性来转换，不过在实际开发中，块元素用的比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，之间使用内联元素，而不用块元素转化了。
display属性：
display属性是用来设置类型及隐藏的，常用的属性由：
- none 元素隐藏且不占位置
- block 元素以块元素显示
- inline 元素以内联元素显示
- inline-block 元素以内联块元素显示
内联元素实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联块元素：菜单练习</title>
<style>
.box{
height: 50px;
width: 694px;
font-size: 0;
margin: 50px auto;
}
.box a{
display: inline-block;
width: 98px;
height: 48px;
text-align: center;
line-height: 48px;
border: 1px solid gold;
font-size: 16px;
font-family: 微软雅黑;
color: pink;
margin: -1px;
text-decoration: none;
}
.box a:hover{
background-color: darkkhaki;
}
</style>
</head>
<body>
<div class="box">
<a href="#">首页</a>
<a href="#">公司简介</a>
<a href="#">解决方案</a>
<a href="#">公司新闻</a>
<a href="#">行业动态</a>
<a href="#">招纳贤才</a>
<a href="#">联系我们</a>
</div>
</body>
</html>
在浏览器中打开；当鼠标放上去时会有伪元素特效。
浮动
浮动特性
- 1 浮动元素有左浮动(float:left)和右浮动(float: right)两种
- 2 浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
- 3.相邻浮动的元素可以并在一行，超出父级宽度就换行
- 4.浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
- 5.浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字绕图的效果
- 6.父元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
- 7.浮动元素之间没有垂直margin的合并。
清除浮动
- 父级上增加属性overflow：hidden
- 在子元素后后面增加一个空的div标签，然后给他样式属性 clear:both; （不推荐）
<div style="clear:both;"></div>
- 使用成熟的清除浮动的方式
如下：
.clearfix:after{
content:"";
display:table;
clear:both;
}
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.menu{
width: 200px;
border: 1px black solid;
margin: 50px auto 0;
/*清除无序列表中的前面的小圆点*/
list-style: none;
padding: 0;
/*第一种方式，清除浮动*/
/*overflow: hidden;*/
}
.menu li{
float: left;
width: 50px;
height: 50px;
background-color: gold;
/*设置间距*/
margin: 10px 0 10px 10px;
}
/*第三种方式清除浮动*/
/*.clearfix:after{*/
/* content: "";*/
/* display: table;*/
/* clear: both;*/
/*}*/
/*编写清除浮动和解决margin-top缺陷的样式*/
.clearfix:after, .clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
</style>
</head>
<body>
<ul class="menu clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<!-- 第二种方式清除浮动-->
<!-- <div style="clear:both;"></div>-->
</ul>
</body>
</html>
扫一扫
2428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
