开始学习HTML和CSS，我想要4块，2中心和1在每一边，左和右。如果调整窗口的大小，外部和内部块之间的块距离会发生变化，并且边界不会相互切割
这是完整的css代码，我觉得我这样做太复杂了。我的意思是它是有效的，但是…
section {
display: inline-block;
position: relative;
width: 100vw;
height: 100vw;
background-color: blue;
}
.hm {
display: inline-block;
position: fixed;
top: 50%;
padding: 20px;
margin: 20px;
border: 10px solid yellow;
width: 60px;
height: 60px;
transform: translateX(-25%); translate: 10px;
}
.hm0 {
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
margin: 20px;
border: 10px solid red;
width: 60px;
height: 60px;
transform: translate(-20px);
}
.hm1 {
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
margin: 20px;
border: 10px solid rgb(211, 208, 208);
width: 60px;
height: 60px;
transform: translate(-100%); translate: -20px;
}
.hm2 {
display: inline-block;
position: fixed;
top: 50%;
right: 0;
padding: 20px;
margin: 20px;
margin-left: auto;
margin-right: 0;
border: 10px solid rgb(255, 0, 225);
width: 60px;
height: 60px;
}<body>
<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>
</body>我不确定这是否是你想要的，但我已经尝试用Flexbox重新创建它。
首先，我将应该位于中间的块包装到另一个div中，如下所示:
<section>
<div class="hm box"> </div>
<div class="center">
<div class="hm0 box"> </div>
<div class="hm1 box"> </div>
</div>
<div class="hm2 box"></div>
</section>
我还添加了一个类box，它将包含每个框的高度和宽度。
这样，我给它们设置了样式:
section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 100vw;
background-color: blue;
}
.center {
display: flex;
}
.hm {
border: 10px solid yellow;
}
.hm0 {
border: 10px solid red;
}
.hm1 {
border: 10px solid rgb(211, 208, 208);
}
.hm2 {
border: 10px solid rgb(255, 0, 225);
}
.box {
width: 60px;
height: 60px
}
关于布局的最重要的样式在这里:
section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 100vw;
background-color: blue;
}
display: flex;:水平对齐所有块(.centerdiv中的块除外，因为它们不是section元素的直接子元素)justify-content: space-between;:这将第一个和最后一个块推到section元素的边缘，而将centerdiv元素留在中心。align-items: center;:对齐section元素中心的所有水平块。
现在，由于centerdiv中的块不是section元素的直接后代，我还使用display:flex来水平对齐它们:
.center {
display: flex;
}
要了解更多关于flexbox及其属性的信息，请查看flexboxfrog
您可以在这里查看代码的演示:
https://jsfiddle.net/stanulilic/s7oh4nv9/
要以更简洁的形式重写您发布的CSS，我们需要在CSS中添加解释性注释:
/* this is a personal style or affectation that I tend to list
CSS properties alphabetically, that way if you're looking to
see if a property is set I know where to find it, and if it's
not where I expect it to be I know it hasn't been set on that
element/selector. This is a personal style, it's not mandatory
it's probably not even 'best-practice,' but you'll help yourself
if you pick a particular approach and then stick with it: */
section {
background-color: blue;
display: inline-block;
height: 100vw;
position: relative;
width: 100vw;
}
/* the following selector matches the four <div> elements within the
<section> element, and the child combinator (the '>') prevents the
selector matching any <div> elements nested within those child
elements. This selector then applies all common CSS styles for all
the child elements, to avoid redeclarations: */
section > div {
/* all <div> elements have a 10px solid border, so here we apply
that border with the color set to 'transparent,' allowing us to
set the 'border-color' in the individual elements: */
border: 10px solid transparent;
display: inline-block;
height: 60px;
padding: 20px;
margin: 20px;
position: fixed;
top: 50%;
width: 60px;
}
.hm {
/* setting the border-color for this specific element: */
border-color: yellow;
/* the following translations were combined into one
'translate' declaration, using the calc() method:
transform: translateX(-25%);
translate: 10px;
*/
translate: calc(-25% + 10px);
}
.hm0 {
/* again, setting properties specific to the individual elements: */
border-color: red;
left: 50%;
translate: -20px;
}
.hm1 {
border-color: rgb(211, 208, 208);
left: 50%;
/* combining the two different translations into one single declaration
via translate: calc(...):
transform: translate(-100%);
translate: -20px;
*/
translate: calc(100% - 20px);
}
.hm2 {
border-color: rgb(255, 0, 225);
margin-left: auto;
margin-right: 0;
right: 0;
}<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>JS Fiddle demo.
从上面的代码片段/方法中学到的东西:
- 尝试将所有常见的样式组合在一个选择器下，该选择器可以应用于组中的每个元素，作为一个整体，
- 使用相同的属性做相同的事情;不要将
transform: translate()(或translateX())与translate、 等函数和属性组合在一起。 - 如果你发现你不得不使用一个属性/函数，然后使用不同的属性/函数来进一步调整，考虑寻找一种方法将两个调整合并为一个(
calc()函数是一个经常使用的，通用的，这样做的方式)， - 尝试采用一种方法来组织你的代码，这样在你的代码中找到一个属性值对变得容易和可预测，特别是CSS，它是非常容易的，只是添加修改或添加到规则集的末尾。
现在，使用CSS flex布局或CSS Grid可以更容易地实现上述布局。
首先,flex-box:
/* a simple CSS reset, to ensure all browsers size elements the same way,
using the border-box algorithm, to include borders and padding in the
declared sizing: */
*,
::before,
::after {
box-sizing: border-box;
/* removing browser-default margins and padding: */
margin: 0;
padding: 0;
}
section {
/* here we align the items within the <section> to the
vertical center; align-items works on the cross-axis
which is perpendicular to the main-axis; the main-
axis default is 'row' (so horizontal), therefore by
default 'align-items' positions the flex-items (the
elements within the flex-box) on the vertical axis:*/
align-items: center;
background-color: blue;
block-size: 100vh;
/* specifying the flex-layout: */
display: flex;
/* positioning elements to the center on the main-axis,
horizontal by default: */
justify-content: center;
}
section > div {
/* ensures that the element's width and height are equal: */
aspect-ratio: 1;
/* defining the borders of all elements matched by the
selector: */
border: 10px solid transparent;
/* defining the block-size of the matched elements; this is
a CSS logical property, and in European languages - and
others descended from those languages - is equivalent to
'height'; and the previous use of 'aspect-ratio'
automatically sets the 'inline-size' (equivalent to 'width'
in European languages and their descendants): */
block-size: 60px;
padding: 20px;
}
.hm {
border-color: yellow;
/* to move this element as far as possible to the inline-start
(the left, for European languages) we use the following to
add an auto-sized margin to the inline-end (in European
languages that's the 'right') side: */
margin-inline-end: auto;
}
.hm0 {
border-color: red;
}
.hm1 {
border-color: rgb(211, 208, 208);
}
.hm2 {
border-color: rgb(255, 0, 225);
/* as above - for .hm - we want to move this element to the
inline-end (the 'right,' in European languages...) side,
so we again set an auto margin on the opposing side, the
'inline-start' ('left,' in European languages): */
margin-inline-start: auto;
}<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>JS Fiddle demo.
最后，CSS网格布局:
/* a simple CSS reset, to ensure all browsers size elements the same way,
using the border-box algorithm, to include borders and padding in the
declared sizing: */
*,
::before,
::after {
box-sizing: border-box;
/* removing browser-default margins and padding: */
margin: 0;
padding: 0;
}
section {
align-items: center;
background-color: blue;
block-size: 100vh;
/* specifying the flex-layout: */
display: grid;
grid-template-columns: repeat(4, 1fr);
}
section > div {
/* ensures that the element's width and height are equal: */
aspect-ratio: 1;
/* defining the borders of all elements matched by the
selector: */
border: 10px solid transparent;
/* defining the block-size of the matched elements; this is
a CSS logical property, and in European languages - and
others descended from those languages - is equivalent to
'height'; and the previous use of 'aspect-ratio'
automatically sets the 'inline-size' (equivalent to 'width'
in European languages and their descendants): */
block-size: 60px;
padding: 20px;
}
/* selecting the odd-numbered <div> elements within the <section>,
the first and third: */
section > div:nth-child(odd) {
/* positioning them to the inline-start by setting their
margin-inline-end (right, in European languages...) to
'auto': */
margin-inline-end: auto;
}
/* selecting the even-numbered <div> elements within the <section>,
the second and fourth: */
section > div:nth-child(even) {
/* positioning them to the inline-end, by setting the opposing
margin - margin-inline-start - to auto: */
margin-inline-start: auto;
}
.hm {
border-color: yellow;
}
.hm0 {
border-color: red;
}
.hm1 {
border-color: rgb(211, 208, 208);
}
.hm2 {
border-color: rgb(255, 0, 225);
}<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>JS Fiddle demo.
引用:
align-content.align-items.aspect-ratio.background-color.block-size.border.border-color.box-sizing.calc(). CSS逻辑属性。display.grid-template-columns.height.inline-size.justify-content.justify-items.margin.margin-block.margin-block-end.margin-block-start.margin-inline.margin-inline-end.margin-inline-start.padding.padding-block.padding-block-end.- padding-block-start"。
padding-inline-end.padding-inline-start.place-items.repeat().transform.translate(CSS属性).translate()(CSS函数).width.