CSS3: CSS: width

Thuộc tính CSS width dùng để thiết lập độ rộng của phần tử. Mặc định thì thuộc tính này sẽ thiết lập độ rộng chỉ cho vùng nội dung (không tính đến đường viền), nhưng nếu box-sizing được thiết lập thành border-box thì nó sẽ thiết lập độ rộng bao gồm cả đường viền.

Các thuộc tính min-width và max-width sẽ ghi đè thuộc tính width.

Cú pháp

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

Thuộc tính width được xác định như sau:

• Một trong những từ khóa sau: available, min-content, max-content, fit-content, auto.
• <length> hoặc <percentage>. Những tùy chọn này được áp dụng dựa vào những từ khóa: border-box, content-box.

Giá trị

<length>

Xác định độ rộng như là một giá trị tuyệt đối.

<percentage>

Xác định độ rộng theo dạng phần trăm của độ rộng của khối chứa. Nếu độ rộng của khối chứa phụ thuộc vào độ rộng của phần tử thì kết quả sẽ không được xác định.

border-box 

Nếu áp dụng thì <length> hoặc <percentage> được áp dụng cho kích thước của phần tử tính cả đường bao.

content-box 

<length> hoặc <percentage> được áp dụng cho kích thước của phần tử chỉ tính phần nội dung mà không tính phần đường bao.

auto

Trình duyệt sẽ tính toán và chọn một độ rộng cho phần tử.

fill 

Dùng fill-available kích thức trong dòng hoặc fill-available kích thức khối, nó tương đương với chế độ ghi.

max-content 

Chiều rộng tối đa ưa thích.

min-content 

Chiều rộng tối thiểu mong muốn.

available 

Chiều rộng khối chứa trừ lề ngang, đường viền và phần đệm.

fit-content 

Lớn hơn so với:

• chiều rộng tối thiểu nội tại
• chiều rộng nhỏ hơn của chiều rộng mong muốn nội tại và chiều rộng có sẵn

Cú pháp chính thức

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

Ví dụ

Chiều rộng mặc định

p.goldie {
  background: gold;
}

<p class="goldie">The Mozilla community produces a lot of great software.</p>

pixel và em

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

percentage

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

<div class="percent">Width in percentage</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}

<p class="minblue">The Mozilla community produces a lot of great software.</p>