Make Sense of Box-Sizing in CSS (and avoid this major mistake!)

Get updates about new videos in your inbox → https://tinyurl.com/yuu8x8my

In this video, we're going to take a close look at the 'box-sizing' property in CSS. We'll cover how it functions, the options you have, and a major mistake you'll want to avoid. Make sure you watch all the way to the end.

The 'box-sizing' property controls the box model, or in simpler language – how the dimensions of an element are calculated, taking into account its width, padding, and border. There are two possible values you can assign to it 'content-box' and 'border-box'.

The default value is 'content-box'. This was the standard approach until around 2009-2010 when browsers began supporting 'border-box', a new addition to the CSS3 recommendation.

So, what are these values, what are the differences and why is it important? Watch to Find out

Demo #1: https://codepen.io/dmtrmrv/pen/YzMBOoN
Demo #2: https://codepen.io/dmtrmrv/pen/QWPYxZe

Chapters:
00:00 – Introduction
00:13 – Box-Sizing: Two Values
00:46 – Example #1: How Content-Box Works
03:24 – It’s Very Counterintuitive: Enter Border-Box
04:01 – Same Example with Border-Box
05:21 – Example #2: A More Realistic Demonstration
06:51 – Using calc() to Work with Content-Box
07:49 – It's Frustrating, But Let’s Continue
09:38 – Content-Box, I Give Up!
10:51 – What to Do Instead
11:43 – Major Mistake to Avoid

Тэги:

#CSS_box-sizing #web_development #CSS_tutorial #box_model_CSS #learning_CSS #CSS_tips #CSS_mistakes #border-box #content-box #CSS3_tutorial #CSS_for_beginners #web_design #responsive_design #frontend_development #CSS_box_model #coding_tutorial #web_design_tips #UI_design #user_interface_design #website_coding #CSS_best_practices #CSS_layout_techniques #CSS_padding_and_border #CSS_dimensions #CSS_box-sizing_property

Скачать видео