Question

我设计了一个带有HTML和CSS的页面布局，但是当我为“Left for logo”div添加填充时，这个div的高度增加了，我失去了页面的排列。

另外，因为我是CSS布局的初学者，请告诉我我的页面是否正确。

HTML

ColorBlock colorBlock = prev.GetComponent<Button>().colors;
colorBlock.normalColor = new Color(0.0f, 0.0f, 0.0f, 1.0f);

prev.GetComponent<Button>().colors = colorBlock;

CSS

colorBlock.pressedColor = new Color(1f, 0.0f, 0.0f, 1.0f);
colorBlock.highlightedColor = new Color(0f, 1f, 0.0f, 1.0f);
colorBlock.disabledColor = new Color(0f, 0f, 1, 1.0f);

Answer 1

我可以看到你开始理解CSS，并试图通过做更多的东西来学习。我希望这对你有所帮助，你一直在问问题，直到你变得很棒，然后你回来帮助新人，我们都去过那里。

首先，让我们确保您了解 CSS框模型 CSS BOX MODEL

每个元素由内容+填充+大小（宽度/高度）+边框+边距组成。如果您不想将这些元素考虑在内，可以使用

element {box-sizing: border-box;} // The width and height properties (and min/max properties) includes content, padding and border, but not the margin

不需要0个数量的统一

你不需要在任何0值中声明unities，因为0em，0px，0％都是相同的。 0.节省您的时间和文件大小。

速记

css中的简写不仅大大减少了你的写作时间，而且大大减少了文件的大小，总是尽可能减少你的位置。而不是写：

＆＃13;

div {
  padding-top:10px;
  padding-right:8px;
  padding-bottom:5px;
  padding-left:3px;
}

＆＃13;

你可以速记它，总是遵循以下顺序：TOP，RIGHT，BOTTOM，LEFT

＆＃13;

div {
  padding:10px 8px 5px 3px;
}

＆＃13;

花车是魔鬼嘲笑你的方式

布局网站时，不应该依赖浮动。如果你在一个应该左/右浮动的部分中有一个图像，或者一些简单的东西，那就没问题;但是使用花车管理布局会花费你的时间和灵魂。浮游物有很多问题，修理一切都不值得。有很多网格系统和框架，如Bootstrap和Foundation，涵盖了所有这些。这些麻烦可能包括：

浏览器以不同方式呈现某些类型的元素
不同的显示类型（内联，内联块和块是最常见的）位置本身不同
你必须清理你的花车或你的布局会变得一团糟
使用浮动或相等高度的垂直居中元素没有简单的方法
您无法通过媒体查询轻松重新排列
他们在DOM中渲染速度很慢

因此，您最好的方法是使用网格系统进行布局并使用flexbox

排列元素

了解网格系统

如果您是CSS网格系统的新手，我们将从快速定义开始。在基本术语中，网格系统是允许以一致且易于管理的方式垂直和水平堆叠内容的结构。此外，网格系统代码与项目无关，因此具有高度的可移植性，因此可以在新项目中采用。

了解Flexbox

CSS3 Flexible Box或flexbox是一种布局模式，用于在页面上排列元素，以便当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素的行为可预测

所以现在高度支持flexbox：http://caniuse.com/#search=flex，除了Internet Explorer 9及更低版本，即使这样有填充，你可以搜索一个，如果你想支持它，它们是相当的也很容易实现。

如果你想学习使用flexbox可以做的很棒的东西，Wes Bos在他的网站上有一个非常好的教程

我希望这些提示可以帮助你，如果你还需要其他任何东西，可以帮我。

Answer 2

padding属性定义内容和边框之间的距离。因此，如果向左添加10px填充，则元素在左边框和右边框之间将有10px的空间。如果你想添加填充但保持边框的大小，只需通过填充减少高度/重量属性

#example{
height:70%;
padding-top:30%;
}

Answer 3

您所要做的就是将overflow: hidden;添加到徽标和广告div的容器中。那是.logo-ads。然后，您可以使用.left

为徽标＆＃39;（padding）添加所需的填充量

.logo-ads {
    height: 110px;
    overflow: hidden;
    width: 1000px;
    background-color: #CFD1A9;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    z-index: 0;
}

将overflow: hidden;添加到.logo-ads班级

在div标签内填充导致更改高度div

3 个答案:

不需要0个数量的统一

速记

花车是魔鬼嘲笑你的方式

了解网格系统

了解Flexbox