CSS ﻪﺒﻌﺟ ﻩﺯﺍﺪﻧﺍ

فهرست مطالب

نمایش فهرست مطالب

CSS ﻪﺒﻌﺟ ﻩﺯﺍﺪﻧﺍ

ﺭﺩ ﺍﺭ ﻪﯿﺷﺎﺣ ﻭ padding ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻥﺎﮑﻣﺍ ﻦﯾﺍ ﺎﻣ ﻪﺑ CSS box-sizing ﯽﮔﮋﯾﻭ ﻥﻭﺪﺑ

:ﺩﻮﺷ ﯽﻣ ﻪﺒﺳﺎﺤﻣ ﺮﯾﺯ ﺕﺭﻮﺻ ﻪﺑ ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ ،ﺽﺮﻓ ﺶﯿﭘ ﺭﻮﻃ ﻪﺑ

ﺮﺼﻨﻋ ﮏﯾ ﯽﻌﻗﺍﻭ ﺽﺮﻋ=ﻪﯿﺷﺎﺣ + ﮏﺘﺸﻟﺎﺑ + ﺽﺮﻋ

ﺩﻮﺷ ﯽﻣ ﺮﻫﺎﻇ ﺐﻠﻏﺍ ﺮﺼﻨﻋ ،ﺪﯿﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ/ﺽﺮﻋ ﯽﺘﻗﻭ :ﺖﺳﺍ ﯽﻨﻌﻣ ﻦﯾﺍ

ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﻥﺎﺴﮑﯾ ﺎﺑ ﺍﺭ <div> ﺮﺼﻨﻋ ﻭﺩ ﺮﯾﺯ ﺮﯾﻮﺼﺗ

This div is smaller (width is 300px and height is 100px).

This div is bigger (width is also 300px and height is 100px).

ﺪﻧﻮﺷ ﯽﻣ ﻢﺘﺧ ﯽﺗﻭﺎﻔﺘﻣ ﯼﺎﻫ ﻩﺯﺍﺪﻧﺍ ﻪﺑ ﻪﺠﯿﺘﻧ ﺭﺩ ﻻﺎﺑ <div> ﺮﺼﻨﻋ ﻭﺩ

ﻝﺎﺜﻣ

.div1 {
  width: 300px;
  height: 
100px;
  border: 1px solid blue; 
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
}
</style>
</head>
<body>

<h1>Without box-sizing</h1>

<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>

</body>
</html>

ﺩﻮﺷ ﯽﻣ ﻞﺣ box-sizing ﯽﮔﮋﯾﻭ

CSS box-sizing ﯽﮔﮋﯾﻭ ﺎﺑ

.ﻢﯿﻫﺩ ﺭﺍﺮﻗ ﺮﺼﻨﻋ ﻞﮐ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ ﺭﺩ ﺍﺭ ﻪﯿﺷﺎﺣ ﻭ ﮏﺘﺸﻟﺎﺑ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻥﺎﮑﻣﺍ ﻦﯾﺍ ﺎﻣ

:ﺪﻧﺮﯿﮔﯽﻣ ﺭﺍﺮﻗ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ ﺭﺩ ﻪﯿﺷﺎﺣ ﻭ ﮏﺘﺸﻟﺎﺑ ،ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ ﺍﺭ <

Both divs are the same size now!

Hooray!

box-sizing: border-box; ﺎﺑ ،ﺖﺳﺍ ﻻﺎﺑ ﻝﺎﺜﻣ ﻥﺎﻤﻫ

ﻝﺎﺜﻣ

.div1 {
  width: 300px;
  height: 
100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  
height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}
</style>
</head>
<body>

<h1>With box-sizing</h1>

<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>

</body>
</html>

.ﺪﻨﻨﮐ ﺭﺎﮐ ﻞﮑﺷ ﻦﯾﺍ ﻪﺑ ﺎﻬﻧﺁ ﺕﺎﺤﻔﺻ ﺭﺩ ﺩﻮﺟﻮﻣ ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺪﻨﻫﺍﻮﺧ ﯽﻣ ﻥﺎﮔﺪﻨﻫﺩ ﻪﻌﺳﻮﺗ ﺯﺍ

.( ;%100 :ﺪﻨﺳﺭﯽﻣ ﺮﻈﻧ ﻪﺑ ﺕﻭﺎﻔﺘﻣ ﺽﺮﻋ ﺭﺩ ﻦﺘﻣ ﯽﺣﺍﻮﻧ ﻭ ﺎﻫﯼﺩﻭﺭﻭ ﻪﮐ ﺖﺳﺍ ﻞﯿﻟ

:ﺖﺳﺍ ﻪﻧﻼﻗﺎﻋ ﻭ ﻦﻤﯾﺍ ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﯼﺍﺮﺑ ﺩﺭﻮﻣ ﻦﯾﺍ ﻝﺎﻤﻋﺍ

ﻝﺎﺜﻣ

* {
  box-sizing: border-box;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

* {
  box-sizing: border-box;
} 

input, textarea {
  width: 100%;
}
</style>
</head>
<body>

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br>
  Comments:<br>
  &lt;textarea name="message" rows="5" cols="30">
  &lt;/textarea>
  <br><br>
  <input type="submit" value="Submit">
</form> 

<p><strong>Tip:</strong> Try to remove the box-sizing property from the style element and look what happens.
Notice that the width of input, textarea, and submit button will go outside of the screen.</p>

</body>
</html>

CSS ﻪﺒﻌﺟ ﻩﺯﺍﺪﻧﺍ ﯽﮔﮋﯾﻭ

box-sizing: ﺪﯾﺎﺑ :ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ ﻪﺒﺳﺎﺤﻣ ﻩﻮﺤﻧ