Virusscanner tips?
Het gebruik van box-sizing
Ik heb een vraag over het gebruik van box-sizing: border-box.
Als ik onderstaande gebruik zal de breedte van mijn .div altijd 100% zijn, ongeacht padding/border.
Code (php)
1
.div {width:100%; padding:0 2%; border:10px solid #333; box-sizing: border-box;}
Mijn vraag, is het "normaal" om de combinatie van width:100% en box-sizing te gebruiken, en dan vooral in combinatie met padding?
Normaal gesproken zou ik het oplossen zonder box-sizing, maar de border kan alleen in pixels (niet in procenten).
Guido
Toevoeging op 02/03/2017 00:48:05:
Quote:
maar de border kan alleen in pixels (niet in procenten)
Als ik de pixel-breedte van het .div element heb, kan ik natuurlijk de border-breedte omrekenen in procenten, en dat van breedte (width) van de .div afhalen. Dan geen box-sizing nodig.
Guido
Code (php)
1
2
3
4
5
2
3
4
5
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Dit zorgt er voor dat alle elementen 'border-box' worden. Zodat in die 100% of 200px width/height al de paddings en borders zitten. Dit werkt erg lekker, als je bv 4 kolommen naast elkaar hebt met padding kun je gewoon oplossen met de onderstaande code zonder dat de padding of borders lopen te kutten.
Code (php)
1
2
3
4
2
3
4
.column {
width: 25%;
padding: 0 10px;
border: 1px solid red;
width: 25%;
padding: 0 10px;
border: 1px solid red;
Bedankt voor je reactie. Dat is inderdaad ook een optie. Maar niet iedereen is er even enthousiast over, zie bv deze pagina op CSS tricks:
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
Guido
Gewijzigd op 03/03/2017 15:27:28 door Guido -