Panduan CSS3 14 : Membuat Box Sizing Dengan CSS3

0 0 Minggu, 09 Oktober 2016 Edit this post

Panduan CSS3 kali ini kita akan belajar Membuat Box Sizing Dengan CSS3. Properti Box sizing digunakan untuk mengubah tinggi dan lebar elemen.

Panduan CSS3 kali ini kita akan belajar Membuat Box Sizing Dengan CSS3. Properti Box sizing digunakan untuk mengubah tinggi dan lebar elemen. sejak CSS2, properti kotak telah bekerja seperti di bawah ini:

  • width + Padding + border = sebenarnya terlihat / diberikan lebar kotak elemen ini
  • height + Padding + border = sebenarnya terlihat / diberikan tinggi kotak elemen ini

Berarti ketika Anda mengatur tinggi dan lebar, tampaknya sedikit lebih besar kemudian diberi ukuran penyebab elemen asrama dan padding ditambahkan ke ketinggian elemen dan lebar.

properti sizing di CSS2 

<html>
   <head>
   
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
      
   </head>
   <body>
      <div class="div1">TutorialsPoint.com</div></br>
      <div class="div2">TutorialsPoint.com</div>
   </body>
</html>
akan menghasilkan hasil sebagai berikut -


properti box sizing 

<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>
      <div class="div1">TutorialsPoint.com</div></br>
      <div class="div2">TutorialsPoint.com</div>
   </body>
</html>
Di atas sampel yang memiliki tinggi yang sama dan lebar dengan kotak-sizing: border-box. dimana hasil yang ditunjukkan di bawah ini
akan menghasilkan hasil sebagai berikut -

Atas unsur-unsur yang memiliki tinggi yang sama dan lebar dengan kotak-sizing: border-box sehingga hasilnya selalu sama untuk kedua elemen seperti yang ditunjukkan di atas.

Label:

SHARE:

Twitter Facebook Google Pinterest

COMMENTS

BLOGGER
DISQUS
Nama

5G,2,8085,4,A Theory of Human Motivation,1,Administrasi Server,40,Adware,1,akuntansi,4,Alat Penguji Software,1,Algoritma,5,Algoritma Genetika,1,alkali tanah,1,Aluminium,1,Analis Kimia,3,Analisis Asimtotik,1,Android,5,Antenna,17,Antivirus,6,Aplikasi,20,Apps,1,Arduino,44,Aresnik,1,Array,1,Arsitektur Komputer,6,Arsitelktur Komputer,1,artikel,3,asam dan basa,2,atom,2,avogadro,1,bandwith,2,bash,2,Berita,10,BinProxy,1,biologi,1,boron,1,Bridge,1,Browser,2,Cahaya,1,catatan Hanibal Wijayanta,5,centos,2,Chrome Vanadium,1,CodeIgniter,7,cpu,1,CSS,18,CSS3,13,dasar akuntansi,4,Dasar Elektronika,23,Dasar Pengalamatan IPV6,8,dasat atom,1,Database,20,dhcp,1,DNS,1,Efek Hall,1,efek tyndall,1,Electrical circuit,1,electronica,1,Elektromagnet,1,Elektromagnetik,1,elektron,1,Elektronika,105,Elektronika Digital,51,elektronika komunikasi,1,energi,1,energi terbarukan,1,English Lecturer,1,enkripsi,1,Excel,10,expressjs,11,Firewall,2,Fisika,9,Forensik Digital,1,game,1,gelombang radio,1,Generator Listrik AC,1,Gerbang Logika,4,germanium,1,Google Chrome,2,grafik excel,1,gzip deflate,1,halogen,1,handbrake,1,Hanibal Wijayanta,7,Hardware,14,Headline,13,Helium,1,Hidrogen,1,hirarki kebutuhan maslow,1,hotspot,3,HTML,1,http,1,https,1,induktansi,2,induktor,4,Informasi,1,Inovasi,1,Internet,9,ipa,1,Iphone,1,ipv6,11,isotop,1,Jaringan Dasar,26,Jaringan Komputer,32,javascript,11,jquery,3,Kajian Islam,1,kalsium,1,Kapasitor,5,kapasitor elektrolit,1,kapasitor polarized,1,Kapasitor-tetap,1,kapasitor-variabel,1,karbon,1,Keamanan Internet,3,Keamanan Jaringan,24,Keamanan Komputer,1,Kemanan Internet,1,Kemanan Komputer,1,kernel,1,Kimia,40,kimia dasar,33,Klinik Virus,1,Komponen Elektronika,1,Komputer,12,Komputer Dasar,1,Komputer Terapan,59,Komunikasi,2,Komunikasi Data,11,kondensator,1,kromosom,1,lapbook,1,Laptop,1,Laptop gaming,1,Laravel,3,layer aplikasi,1,Layer Network,1,linux,9,LTE,4,macbook,1,Makro,6,Malware,6,Manajemen Router,1,mariadb,1,Masri Sitanggang,1,Matematika,1,Media Belajar,1,Media Transmisi,4,Mendikbud,1,merkuri,1,microsoft,1,Mikrokontroller,3,mikroskop elektron,1,Mikrotik,10,Mobile,8,modulasi,1,mojok,13,Mojok Bersama Danang,7,mojok. opini,1,motivasi,5,Multimedia,4,Mysql,19,Nasional,8,nginx,2,Nirkabel,1,nitrogen,2,nukleus,1,oauth,2,Office,5,oksidasi,1,opini,4,oracle,2,pemantulan,1,Pembiasan,1,Pemrograman,14,Pemrograman Android,1,Pemrograman Dasar,11,Pemrograman PHP,9,Pemrograman Shell,8,Pemrograman Web,42,Pendidikan,5,Penistaan,1,Perakitan Komputer,13,Permrograman PHP,1,Persamaan Linier,1,ph,1,PHP,11,PHP Framework,1,Physics,1,Power Supply,1,Pramuka,1,Processor,1,Propagasi,1,proses akuntansi,1,proteksi PDF,1,putty,1,Python,1,Rancang Bangun Jaringan,1,Rancang Bangun Jaringan LAN,2,Rancang Bangun Jaringan WAN,1,ransomware,2,reduksi,1,rehat,1,repository,1,Resistor,5,rip dvd,2,Router,2,s7,1,samsung,1,santai,1,sariroti,1,screencapture,1,sejarah,1,sejarah indonesia,2,Seluler,1,Semikonduktor,3,siklus akuntansi,1,silikon,1,Simulasi Digital,16,Sinyal,5,sirkuit,1,Sirkuit kapasitor,1,Sistem Komputer,8,Sistem Operasi,6,Sistem Operasi Jaringan,21,softskill,5,solar energy,1,spektroskopi,1,Spoofing,1,spu,5,SSH,1,STP,1,Struktur Data,2,Switch,1,switching,1,Teknologi,6,Teknologi Nirkabel,41,telkom,1,TestingWhiz,1,The dude,1,tipe konduktor,1,Tips dan Trik,21,Topologi,1,traffic light,1,transformator,4,Troubleshooting,1,Ubuntu,3,Unix,12,unsur,2,update,2,upgrade routeros,1,user manager,1,userman,1,Vanadium,1,variabel,1,variabel-kapasitor,1,VBA,7,vicon,1,video,1,Video Conference,1,virus,1,vlan,2,vlc,1,vpn,1,Wannacry,1,Warna,1,Webcam,1,Webmaster,51,webserver,1,wifi,1,Windows,11,WIndows 10,14,windows apps,1,Windows Explorer,1,Wireless,17,Wordpress,2,XII,1,XIITKJ,98,XITKJ,86,XTKJ,94,ybc,1,yum,1,
ltr
item
MasAgungLearning: Panduan CSS3 14 : Membuat Box Sizing Dengan CSS3
Panduan CSS3 14 : Membuat Box Sizing Dengan CSS3
Panduan CSS3 kali ini kita akan belajar Membuat Box Sizing Dengan CSS3. Properti Box sizing digunakan untuk mengubah tinggi dan lebar elemen.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzC35E8Hq9mYCXURMnztqbFyz1OH9hgxo5c2l2nV4drtc6eT0FLTw_QTfWlYtHKsx1Br7dFrBpYNoOBJRrA7Ogli2IU4k8MsAE6HY8aonlxOUOnpVwO1iJA5i8pmsx111xsBVEf4Y1TX0Z/s320/css3.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzC35E8Hq9mYCXURMnztqbFyz1OH9hgxo5c2l2nV4drtc6eT0FLTw_QTfWlYtHKsx1Br7dFrBpYNoOBJRrA7Ogli2IU4k8MsAE6HY8aonlxOUOnpVwO1iJA5i8pmsx111xsBVEf4Y1TX0Z/s72-c/css3.jpg
MasAgungLearning
https://masagunglearning.blogspot.com/2016/10/membuat-box-sizing-dengan-CSS3.html
https://masagunglearning.blogspot.com/
https://masagunglearning.blogspot.com/
https://masagunglearning.blogspot.com/2016/10/membuat-box-sizing-dengan-CSS3.html
true
3233199725437061161
UTF-8
Load Semua Posting Tidak ditemukan satupun LIHAT SEMUA Baca Lanjut Ulang Gagalkan Mengulang Hapus Oleh Home HALAMAN POSTING Lihat Semua DIREKOMENDASIKAN ANDA KATEGORI ARSIP PENCARIAN SEMUA POSTING Tidak ditemukan post apapun yang sesuai dari yang anda minta Kembali Ke Beranda Minggu Senin Selasa Rabu Kamis Jum'at Saturday Sun Mon Tue Wed Thu Fri Sat Januari Februari Maret April Mei Juni Juli Agustus September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy