Đường viền pixel và Tỷ lệ phần trăm theo tỷ lệ Pro232ion

Question

Tôi nghĩ rằng tôi có thể đã biết câu trả lời cho câu hỏi này nhưng tôi cần kiểm tra sự tỉnh táo!

Nói rằng tôi có

#gridtest{ 
width:590px; 
} 

tôi có thể thay đổi chiều rộng để một tỷ lệ phần trăm bằng cách sử dụng KẾT QUẢ = MỤC TIÊU/BỐI CẢNH. Trong trường hợp này bối cảnh là một container với max-width thiết lập để 1000px vì vậy tôi có thể làm điều này:

#gridtestpercent{ 
width:59%; /*590/1000*/ 
} 

Nếu tôi được thu nhỏ cửa sổ xuống div sẽ luôn luôn được theo tỷ lệ container của nó. Nhưng điều gì sẽ xảy ra nếu tôi muốn thực hiện

#gridtest{ 
width:570px; 
border:10px solid red; 
} 

Tôi có thể làm việc chiều rộng dựa trên mục tiêu hiện tại là 570 nhưng khi cửa sổ bị thu hẹp, tất cả các tỷ lệ đều không đồng bộ.

#gridtestpercentnoborder{ 
width:57%; /*570/1000*/ 
border:10px solid red; 
} 

Tôi không thể sử dụng tỷ lệ phần trăm. Tôi không muốn sử dụng JS để tiếp tục kiểm tra ngữ cảnh và tôi không thể sử dụng khai báo đường viền hộp CSS3.

Nếu tôi muốn sử dụng kỹ thuật được mô tả trong thiết kế web đáp ứng bởi Ethan Marcotte, nơi mọi thứ co lại liên quan đến nhau, tôi sẽ không may mắn nếu sử dụng đường viền?

Chúc mừng!

Answer 1

Thật không may, có, bạn đã hết may mắn. Một cách hacky để giải quyết vấn đề này là với một wrapper div mà bạn sử dụng để tạo đường viền của mình. Vì vậy, bên ngoài div sẽ là 57% (trong ví dụ của bạn) với một nền là màu sắc của biên giới mong muốn của bạn. Sau đó, bên trong div sẽ có chiều rộng 96% hoặc hơn (chơi với số chính xác để tìm đường viền phù hợp với thiết kế của bạn).

Answer 2

Nếu bạn muốn giữ ngữ nghĩa, bạn có thể sử dụng div { box-sizing:border-box; } hoặc một số yếu tố hoàn toàn có vị trí :after. Xem các bài How do I add 1px border to a div whose width is a percentage?

Answer 3

Bạn có thể sử dụng một hình chữ nhật hộp bóng thay vì một biên giới:

box-shadow: 0px 0px 0px 10px red inset; 

Chỉ cần pad bên trong container để bù đắp.

Chỉnh sửa: Tôi viết "pad" nhưng tất nhiên nếu bạn sử dụng đệm, nó sẽ loại bỏ kích thước hộp. Thay vào đó hãy thay thế nội dung bên trong.

Answer 4

Liên kết này cung cấp cho lời giải thích tốt đẹp trên hai giải pháp cho vấn đề này:

http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

Answer 5

Bạn có thể sử dụng CSS3 calc() chức năng,

.selector{ 
    border: 5px solid black; 
    width: -moz-calc(50% - 10px); 
    width: -webkit-calc(50% - 10px); 
    width: calc(50% - 10px); 
} 

Sass mixin

@mixin calc($property, $expression) { 
    #{$property}: -moz-calc(#{$expression}); 
    #{$property}: -webkit-calc(#{$expression}); 
    #{$property}: calc(#{$expression}); 
} 
article { 
    border: 1px solid red; 
    @include calc(width, '100% - 2px') 
} 

Answer 6

Nếu có thể, tùy thuộc vào thiết kế của bạn, những gì tôi muốn làm là đặt đường viền như một div tuyệt đối với chiều rộng là 3px (ví dụ) và chiều cao cao hơn div mẹ của nó. Sau đó tôi đặt overflow hidden trên div cha.

Answer 7

Câu trả lời được chấp nhận không chính xác. Bạn thực sự có 2 lựa chọn:

Sử dụng box-sizing tài sản, vì vậy tất cả các miếng đệm và biên giới được coi là một phần của kích thước:

.column { 
    width: 16%; 
    float: left; 
    margin: 0 2% 0 2%; 
    background: #03a8d2; 
    border: 2px solid black; 
    padding: 15px; 
    font-size: 13px; 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Hoặc, sử dụng tài sản outline thay vì tài sản biên giới. Bạn sẽ vẫn gặp vấn đề với các paddings, nhưng nó dễ dàng hơn để thêm vào. Ví dụ:

.column { 
    width: 16%; 
    float: left; 
    margin: 0 2% 0 2%; 
    background: #03a8d2; 

    outline: 2px solid black; 
} 

Full giải thích: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

Answer 8

Trong CSS3 bạn cũng có thể sử dụng thuộc tính box-sizing mới để bao gồm các pixel và đệm đếm vào width của nguyên tố này:

box-sizing: border-box;