CSS中的box-sizing属性怎么使用-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

CSS中的box-sizing属性怎么使用

不言

Dec 08, 2018 pm 02:29 PM

box-sizing

box-sizing属性可用于设置更改区域大小，比如，如果你需要并排放置两个带边框的框，可通过将 box-sizing 设置为 border-box实现，下面我们就来看具体的内容。

box-sizing属性是用于更改区域大小计算的设置，使用padding和border属性设定边距和边界线的粗细时，在区域的width和height中加入padding和border的部分，因此，根据padding和border的值，整个区域的大小就会改变。

box-sizing

这是因为区域的大小不包含padding，border的值。

根据box-sizing属性改变设定，可以在区域大小中设置padding和border。这使得可以确定盒子的大小而不受padding和border的影响。

我们接着来看box-sizing的使用方法

box-sizing属性写法如下

box-sizing：value ;

value的值你可以写入content-box和border-box。

content-box：宽度和高度分别应用到元素的内容框；在宽度和高度之外绘制元素的内边距和边框。

border-box：为元素设定的宽度和高度决定了元素的边框盒，也就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

此外，如果输入inherit，则继承父元素的值。

下面我们来看一个具体的例子

代码如下

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
  <p class="content1">content-box(初始值)
  的情况下、padding和border不包括在width和height之中</p>
<p class="content2">border-box的情况下、padding和border包括在width和height之中</p>
</body>
</html>

设置宽度和高度完全相同的两个盒子（宽度400px，高度150px），第一个盒子设置的初始值content-box，第二个盒子设置的值是border-box。

CSS代码

p.content1 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: content-box;
}
p.content2 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: border-box;
}

运行结果

在浏览器上将显示如下效果

box-sizing

Atas ialah kandungan terperinci CSS中的box-sizing属性怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Gaya CSS peringkat seterusnya untuk kursorApr 23, 2025 am 11:04 AM

Kursor adat dengan CSS adalah hebat, tetapi kita boleh mengambil sesuatu ke peringkat seterusnya dengan JavaScript. Menggunakan JavaScript, kita boleh beralih antara negeri kursor, letakkan teks dinamik dalam kursor, gunakan animasi kompleks, dan gunakan penapis.

Dunia bertembung: Pengesanan Perlanggaran Kerangka Key menggunakan pertanyaan gayaApr 23, 2025 am 10:42 AM

Animasi CSS interaktif dengan unsur -unsur yang menghilangkan satu sama lain kelihatan lebih masuk akal pada tahun 2025. Walaupun tidak perlu untuk melaksanakan pong dalam CSS, peningkatan fleksibiliti dan kuasa CSS mengukuhkan kecurigaan Lee '

Menggunakan penapis latar belakang CSS untuk kesan UIApr 23, 2025 am 10:20 AM

Petua dan cara untuk menggunakan harta penapis latar belakang CSS ke antara muka pengguna gaya. Anda akan belajar bagaimana untuk meletakkan penapis latar belakang di antara pelbagai elemen, dan mengintegrasikannya dengan kesan grafik CSS yang lain untuk membuat reka bentuk yang rumit.

SMIL ON?Apr 23, 2025 am 09:57 AM

Nah, ternyata ciri-ciri animasi terbina dalam SVG ' s tidak pernah ditamatkan seperti yang dirancang. Pasti, CSS dan JavaScript lebih mampu membawa beban, tetapi ia baik untuk mengetahui bahawa SMIL tidak mati di dalam air seperti sebelumnya

'Cantik' berada di mata penontonApr 23, 2025 am 09:40 AM

Yay, let ' s melompat untuk teks-wrap: Pretty Landing dalam Pratonton Teknologi Safari! Tetapi berhati -hatilah bahawa ia ' s berbeza dari bagaimana ia berfungsi dalam pelayar kromium.

CSS-Tricks Chronicles XLIIIApr 23, 2025 am 09:35 AM

Kemas kini trik CSS ini menyoroti kemajuan yang ketara dalam almanak, penampilan podcast baru-baru ini, panduan kaunter CSS baru, dan penambahan beberapa penulis baru yang menyumbang kandungan berharga.

Ciri tailwind ' s @ply lebih baik daripada bunyiApr 23, 2025 am 09:23 AM

Kebanyakan masa, orang mempamerkan ciri-ciri Tailwind ' Apabila dipamerkan dengan cara ini, @apply tidak menjanjikan sama sekali. Jadi obvio

Rasa seperti saya tidak mempunyai pelepasan: perjalanan ke arah penyebaran yang warasApr 23, 2025 am 09:19 AM

Menggunakan seperti idiot datang ke ketidakcocokan antara alat yang anda gunakan untuk menggunakan dan ganjaran dalam kerumitan dikurangkan berbanding kerumitan yang ditambah.

See all articles