Heim > Web-Frontend > HTML-Tutorial > css中格子样式的实现_html/css_WEB-ITnose

css中格子样式的实现_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:27:52
Original
1296 Leute haben es durchsucht

期末成绩出来,CSAPP总算没有挂,能过个好年了!

好了,这次的需求是这样的:

如图,在父盒子中放入子盒子,子盒子的宽度为50%(33%、25%类似),使得呈现以上效果,看似简单,其实还是有一些繁琐的,具体的代码为

.box{	width: 400px;	height: 400px;	padding: 5px;	background-color: #CCC;	border-radius: 10px;}.block{	float: left;	width: 50%;	height: 50%;	border: 5px solid #ccc;	box-sizing: border-box;	border-radius: 7%;	background-color: #685473;}
Nach dem Login kopieren

使用到的小技巧有:

1.子元素使用border-box模型

2.为子元素设置浮动

3.子元素之间的间距用和父元素背景色相同颜色的border体现(因为各种盒模型的width里都不包括margin,使用margin会使得一行撑不下两个盒子)

4.父元素加上和子元素边框宽度相同的padding(如果不加,子元素间有10px灰色,但与父元素相邻的边只有5px灰色,不美观)

这个效果在制作一些格子类小游戏的时候很有用(如连连看、2048)等等

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage