css盒子嵌套中怎么设置盒子居中

html-css014

css盒子嵌套中怎么设置盒子居中,第1张

要让盒子居中需要设置:margin: 0 auto。

当然需要给盒子设置宽度,不然盒子默认的宽度是父容器宽度。

也有其他方式,比如父容器设置display: flexjustify-content: center也是可以的。

方法不少能达到效果就好了。

<div class="box">

<div>

<div>

<div class="contont">内容</div>

</div>

</div>

</div>

一般情况下是会设置一个类名来进行设置样式的,

像这样可以通过子代选择器来设置,例如:

.box>div>div>div{color:#f00} 但是假如最里层有多个div那也会被设置当前样式,所以这样虽然可以设置到,但是不合理。

通过后代选择器来设置: .box .contont{ color:#f00} 这样就是设置自代类名为 .contont的盒子了。

CSS结构好的话,没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符,而不必使用CSS嵌套。(或者更好的说法,上下文选择符--译者著)

1、比如:

ExampleSourceCode

#top{  background-color:#ccc  padding:1em  }  #toph1{  color:#ff0  }  #topp{  color:red  font-weight:bold  }

2、这就减去不必要的类或者标识选择符,如果应用到像这样的HTML中:

ExampleSourceCode

<dividdivid="top"> <h1>Chocolatecurry</h1> <p>Thisismyrecipeformakingcurrypurelywithchocolate</p> <p>Mmmmmmmmmm</p> </div>

这是因为,用英文半角空格间隔选择符,我们指明了在标识id内的h1有“#ff0”的颜色,而p则是红色red和粗体bold。这可能也会有些复杂(因为可能不止两级,比如在内在内在内在内等等)。有必要多加练习。