سلام
دوست عزیز خود مرورگر ها یکسری استایلهای پیش فرض دارن که اگه اینها ریست نشه و یه مقدار اولیه بهش داده نشه باعث میشه که سایت شما در مرورگرهای مختلف بصورت متفاوت به نمایش در بیاد
مثلا میتونید شما یه باکس ساده تعریف کنید و اینو در مرورگر های مختلف مشاهده کنید بعد یه فایل ریست به طرحتون اضافه کنید و دوباره مشاهده کنید خیلی راحت متوجه موضوع خواهید شد
css reset هم نمونه های مختلفی داره که برای شروع میتونید ازشون استفاده کنید ولی در اینده میتونید برای خودتون یه ریست فایل بنویسید
normalize یکی از خوباش هست که میتونید استفاده کنید در طرحتون
اول فایل css هم این کد رو اضافه کنید که باعث میشه خیلی از مشکلات حل بشه
*{
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}این فایل ریستی هست که من استفاده میکنم میتونید از این استفاده کنید فشرده شده هستش
*,body{margin:0}*,[type=checkbox],[type=radio],legend{padding:0;box-sizing:border-box}button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects;text-decoration:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}*{border:0;list-style:none}
بخاطر اینکه بعضی از مرورگرها تنظیمات اولیه ای برای المنت های مختلف یک صفحه دارند برای اینکه همه اون تنظیمات در تمام مرورگرها ریست بشه و مقادیرشون لحاظ نشه از این فایل استفاده میکنیم البته اگر کدهای این فایل رو بخونید میبینید که چیز عجیبی نیست.
سلام
دوست عزیز خود مرورگر ها یکسری استایلهای پیش فرض دارن که اگه اینها ریست نشه و یه مقدار اولیه بهش داده نشه باعث میشه که سایت شما در مرورگرهای مختلف بصورت متفاوت به نمایش در بیاد
مثلا میتونید شما یه باکس ساده تعریف کنید و اینو در مرورگر های مختلف مشاهده کنید بعد یه فایل ریست به طرحتون اضافه کنید و دوباره مشاهده کنید خیلی راحت متوجه موضوع خواهید شد
css reset هم نمونه های مختلفی داره که برای شروع میتونید ازشون استفاده کنید ولی در اینده میتونید برای خودتون یه ریست فایل بنویسید
normalize یکی از خوباش هست که میتونید استفاده کنید در طرحتون
اول فایل css هم این کد رو اضافه کنید که باعث میشه خیلی از مشکلات حل بشه
*{
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}این فایل ریستی هست که من استفاده میکنم میتونید از این استفاده کنید فشرده شده هستش
*,body{margin:0}*,[type=checkbox],[type=radio],legend{padding:0;box-sizing:border-box}button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects;text-decoration:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}*{border:0;list-style:none}