css遇到的相关的问题总结

最新推荐文章于 2021-02-19 11:53:53 发布

sofency

最新推荐文章于 2021-02-19 11:53:53 发布

阅读量141

点赞数

分类专栏： css 文章标签： css问题总结

本文链接：https://blog.csdn.net/qq_43079376/article/details/103229348

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们经常会遇到子级元素的margin溢出到父级元素的margin中
eg:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Yao Ming</title>
  <style>
	html,body{margin:0;height:100%;}
	.main{background:#0aa;height:100%;}
	.in{height:10px;background:blue;margin-top:100px;}
  </style>
</head>
<body>
  <div class='main'><div class='in'></div></div>
</body>
</html>

在这里插入图片描述
分析：in 应该相对于main的高度，但是margin-top的高度溢出了父元素，导致父元素也跟着受损，这就是margin-top溢出的情况。
解决方案：
在main的前面加上伪元素标签设置

.main:before{
  content: '.';
  display:block;
  height:0; 
  visibility:hidden;
}

浮动元素无法撑开父元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sofency</title>
  <style>
	html,body{margin:0;height:100%;}
	.main{background-color: red;}
	.in{float: left;width: 200px;height: 200px;background-color: antiquewhite;margin: 10px;}
  </style>
</head>
<body>
  <div class='main'>
    <div class='in'></div>
	<div class='in'></div>
	<div class='in'></div>
	<div class='in'></div>
  </div>
</body>
</html>

在这里插入图片描述
分析: 父级元素明明设置了背景颜色，却没有显示，是因为子级元素没有把父级元素撑开的元素
解决方案：将clear的class属性添加到main里面

 .clearfix:after{
      content: '';
      display: block;
      clear: both;
    }

input和button设置同样的高度，但是显示的高度不同

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SOfency</title>
  <style>
	html,body{margin:0;height:100%;}
  </style>
</head>
<body>
  <div class=' main box'><input type="text" style="height: 100px;"><input style="height: 100px;" value="你好"></button></div>
</body>
</html>

显示的效果
在这里插入图片描述
分析原因：同样的高度但是显示的高度不一样，主要原因是我们都知道我们设置height和width值一般只是content的宽高，但是button除外，它设置的是包含border的宽高，因此要想消除这样的效果设置两个的border为none ,但是这样还是没有对齐，因为按钮需要在设置vertical-align 属性为middle这样才能对齐，这样设置宽高就可以了。

input[type="button"]{
	 box-sizing: border-box;
	 vertical-align: middle; 
}

图片和文本无法对齐, 此问题和上面的问题一样设置图片的vertical-align 属性为middle 或者top 或者bottom
固定的块设置多出的文字内容，用省略号使用text-overflow:ellipsis;

sofency

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css遇到的相关的问题总结

我们经常会遇到子级元素的margin溢出到父级元素的margin中eg:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
复制链接

扫一扫