nên ảnh hưởng đến bố cục?

Question

Sử dụng một bố cục cơ bản như ...

<div class="span-23 last" id="main"> 
    <div class="span-18" id="column1"> 
     <div class="clear span-10" id="body1"> </div> 
     <div class="span-6 prepend-1 append-1" id="body2"> </div> 
    </div> 
    <div class="span-5 last" id="column2"> </div> 
</div> 

Khi tôi xác định đường biên giới trên bất kỳ của div họ hoặc không hiển thị hoặc di chuyển các yếu tố trang xung quanh. Vì vậy, làm biên giới thực sự mất một số px bên ngoài của một div? Nếu vậy làm thế nào tôi có thể nhận được xung quanh này?

Tôi đã thấy một số đề cập đến sử dụng position:relative; nhưng đó không phải là vấn đề ở đây khi tôi sử dụng rộng rãi như vậy.

Answer 1

Có, đường viền chiếm không gian vật lý. Vì vậy, nếu bạn đặt div là 100%, sau đó cung cấp cho nó đường viền 1px, nó sẽ rộng hơn 2px so với vùng chứa.

Để khắc phục, bạn có thể quyết định không đặt chiều rộng (hoặc 'tự động') để nó sẽ tự động điều chỉnh thành tài khoản cho phần đệm và đường viền.

Hoặc, bạn có thể lồng các phần tử, tạo ra một div ngoài có chiều rộng cụ thể, sau đó là đường viền bên trong đường viền.

Còn các tùy chọn khác.

PHỤ LỤC:

Ah, có vẻ như bạn đang sử dụng blueprint.css

Blueprint.css là không được thiết kế để xử lý thêm đường viền vào các container bố trí. Điều này sẽ phá vỡ lưới điện.

Tôi đã sửa đổi blueprint.css trong quá khứ để chứa điều này.Thông thường tôi sẽ thêm một số lớp duy nhất có thể được áp dụng cho span-x divs:

.span-border {border: 1px solid black;} 
.span-8.span-border {margin-left: -1px; margin-right: 9px;} 

Ở trên dựa trên 10px 'máng xối' giữa các cột. Những gì bạn làm là làm giảm máng xối ở mỗi bên của một khoảng-x có một biên giới áp dụng cho nó để chứa không gian biên giới chiếm.

Answer 2

Chỉ cần không chỉ định chiều rộng cho bất kỳ phần tử cấp khối nào của bạn. Sau đó, biên giới sẽ được tính toán.

Answer 3

Đường viền được tính vào toàn bộ chiều rộng và chiều cao của phần tử.
Để tránh điều này, hãy sử dụng outline.

.element{ 
    outline: 1px solid black; 
} 

Answer 4

Mô hình hộp CSS định nghĩa border và padding là ngoài width và height, có nghĩa là, width và height xác định kích thước khu vực nội dung duy nhất, và không bao gồm border hoặc padding.

Các cũ IE hộp mô hình, bằng cách này, đó là những gì bạn nhận được trong IE < 6, và chế độ quirks, bao gồm border và padding trong width và height. outline có phần giống như border nhưng không tăng kích thước phần tử.

Answer 5

Đường viền chiếm pixel bên ngoài phần tử thực tế ... vì vậy, nếu bạn có div trong số width: 20px và border: 1px, chiều rộng đầy đủ là 22px. Một cách để vượt qua nó là có một vùng chứa với chiều rộng được chỉ định của bạn, sau đó có một div bên trong không có chiều rộng được chỉ định và đường viền.

Dưới đây là ví dụ: http://jsfiddle.net/pWB9U/

Answer 6

Đường viền có ảnh hưởng đến bố cục không? Không. Peter Paul Koch said it best at quirksmode.org, (quoting himself):

Về mặt logic, một hộp được đo từ biên giới đến biên giới. Lấy một hộp vật lý, bất kỳ hộp nào. Đặt một cái gì đó trong đó là rõ ràng nhỏ hơn so với hộp. Yêu cầu bất kỳ ai đo chiều rộng của hộp. Anh ta sẽ đo khoảng cách giữa các cạnh của hộp ('biên giới'). Không ai sẽ nghĩ đến việc đo lường nội dung của hộp.

Nhà thiết kế web tạo hộp để giữ nội dung quan tâm về kích thước có thể nhìn thấy của hộp, khoảng cách từ biên giới đến đường viền. Các đường viền và không phải là nội dung là các dấu hiệu trực quan cho người dùng của trang web. Không ai quan tâm đến chiều rộng của nội dung.

Nhưng biên giới do ảnh hưởng đến bố cục? Đáng buồn thay, câu trả lời là có. Cân nhắc div này:

.foo { 
    width: 500px; 
    padding: 5px; 
    border: 1px solid blue; 
} 

div này sẽ thực sự là 512px rộng, vì width bộ chiều rộng của nội dung, không phải là div. Bạn phải thêm đệm và đường viền để có chiều rộng thực tế.

Edit: Để khắc điên rồ này sử dụng box-sizing:

.foo { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; /* FireFox requires the -moz- prefix */ 
    width: 500px; 
    padding: 5px; 
    border: 1px solid blue; 
} 

div Đây sẽ là 500px rộng, ngay cả với các padding và biên giới.

Demo at jsFiddle

^{Nó không làm việc trong IE7 (trong đó có ít hơn 1% thị phần).}