Antara muka pengguna CSS3

Modul antara muka pengguna CSS3 menyediakan lebih banyak kesan dan pilihan untuk prestasi UI halaman.

Menambah beberapa ciri antara muka pengguna baharu untuk melaraskan saiz elemen, saiz kotak dan sempadan luar.

saiz semula atribut

Takrifan atribut dan arahan penggunaan

saiz semula atribut menentukan satu Sama ada elemen itu diubah saiz oleh pengguna.

Nota: Atribut ubah saiz sesuai untuk mengira sama ada nilai limpahan unsur lain adalah "kelihatan".

Nilai lalai: tiada

Diwarisi: tidak

Versi: CSS3

Sintaks JavaScript: object.style.resize="both"

Sokongan penyemak imbas: Firefox 4 + , Chrome dan Safari menyokong atribut ubah saiz.

Sintaks

saiz semula: tiada|kedua-duanya|mendatar|menegak:

tiada: Tidak membenarkan pengguna mengubah saiz elemen. Jangan benarkan pengguna mengubah saiz elemen.

kedua-duanya: Pengguna boleh melaraskan lebar dan ketinggian elemen.

mendatar: Pengguna boleh melaraskan lebar elemen

menegak: Pengguna boleh melaraskan ketinggian elemen.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
<style>
  .box {   
        width: 600px;   
        height: 300px;   
        border: 1px solid #000;   
        resize: both;   
        overflow: auto;   
     }  
</style>
</head> 
<body>
    <p>请注意观察方框右下角</p>
    <div class="box"></div>
</body>  
</html>

atribut saiz kotak
saiz kotak mempunyai dua nilai: kotak kandungan dan kotak sempadan.

box-sizing: content-box;
Apabila box-sizing:content-box; tidak termasuk sempadan dan padding.

saiz kotak: kotak sempadan;
Apabila saiz kotak: kotak sempadan ditetapkan, penyemak imbas mentafsir model kotak sama seperti versi pra-IE6 apabila ia mentakrifkan lebar dan tinggi , sempadan dan padding disertakan dalam lebar dan tinggi. Lebar dan tinggi kandungan boleh diperoleh dengan menentukan lebar dan tinggi tolak lebar padding dan sempadan dalam arah yang sepadan. Lebar dan tinggi kandungan mesti dijamin tidak negatif Jika perlu, saiz kotak sempadan elemen akan ditingkatkan secara automatik supaya lebar atau ketinggian kandungan sekurang-kurangnya 0.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
      <style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;                
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
   </style>
  </head> 
  <body>
    <div class="content-box"></div>
      <div class="padding-box"></div>
    <div class="border-box"></div>
  </body>  
</html>

atribut outline-offset

Sifat outline-offset mengimbangi garis besar dan menariknya melepasi tepi sempadan.

Terdapat dua perbezaan antara garis besar dan sempadan:

1 Garis besar tidak mengambil ruang

2 >

Sintaks:

garis luar:<panjang> |

<panjang>: Mentakrifkan nilai bekas jarak kontur.

warisi: Warisan lalai.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style type="text/css">
    div {
        height: 100px;
        width: 100px;
        margin: 50px auto;
        outline: 10px solid rgba(255,255,0,9);
        background: black;
        outline-offset: 10px;
        border:5px solid blue;
    }
   </style>
  </head> 
  <body>
      <div></div>
  </body>  
</html>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; } .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; } .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; } </style> </head> <body> <div class="content-box"></div> <div class="padding-box"></div> <div class="border-box"></div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Antara muka pengguna CSS3

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]