Hướng Dẫn Và Ví Dụ CSS Box-sizing - Openplanning

Trang chủ » Box Sizing Border Box Là Gì » Hướng Dẫn Và Ví Dụ CSS Box-sizing - Openplanning

Có thể bạn quan tâm

  • Tất cả tài liệu
  • Java
    • Java Basic
    • Java Collections Framework
    • Java IO
    • Java New IO
    • Java Date Time
    • Servlet/JSP
    • Eclipse Tech
      • SWT
      • RCP
      • RAP
      • Eclipse Plugin Tools
    • XML & HTML
    • Java Opensource
    • Java Application Servers
  • Maven
  • Gradle
  • Servlet/Jsp
  • Thymeleaf
  • Spring
    • Spring Boot
    • Spring Cloud
  • Struts2
  • Hibernate
  • Java Web Service
  • JavaFX
  • SWT
  • Oracle ADF
  • Android
  • iOS
  • Python
  • Swift
  • C#
  • C/C++
  • Ruby
  • Dart
  • Batch
  • Database
    • Oracle
    • MySQL
    • SQL Server
    • PostGres
    • Other Database
  • Oracle APEX
  • Report
  • Client
  • ECMAScript / Javascript
  • TypeScript
  • NodeJS
  • ReactJS
  • Flutter
  • AngularJS
  • HTML
  • CSS
  • Bootstrap
  • OS
    • Ubuntu
    • Solaris
    • Mac OS
  • VPS
  • Git
  • SAP
  • Amazon AWS
  • Khác
    • Chưa phân loại
    • Phần mềm & ứng dụng tiện ích
    • VirtualBox
    • VmWare
Hướng dẫn và ví dụ CSS box-sizing
  1. CSS box-sizing:content-box
  2. CSS box-sizing:border-box
  3. CSS box-sizing:padding-box (!)

1. CSS box-sizing:content-box

CSS Box Modal là một bộ chứa (container) được tạo ra từ nhiều thành phần, bao gồm content (nội dung), paddings, margins, borders. Dưới đây là hình ảnh minh họa một Box Model:CSS {box-sizing:content-box}CSS box-sizing có giá trị mặc định là content-box, điều này có nghĩa là phần tử mặc định là một "Context-Box".Trong trường hợp phần tử là một "Content-Box" thì CSS width/height sẽ là chiều rộng và chiều cao của hình chữ nhật chứa nội dung của phần tử, điều đó có nghĩa là khi một phần tử được thiết lập padding hoặc border (hoặc cả hai) nó sẽ làm phần tử to hơn.box-model-example.html<div style="border: 1px solid gray;width:200px;height:100px;"> border: 1px solid gray; <br/> width:200px; <br/> height:100px; </div> <div style="margin: 20px;padding:30px; border: 10px solid gray;width:200px;height:100px;"> margin: 20px; <br /> padding:30px; <br/> border: 10px solid gray; <br/> width:200px; <br/> height:100px; </div>Kích thước thực tế của một phần tử loại "Content-Box" được tính theo công thức:realWidth = contentWidth + cssBorderWidthLeft + cssBorderWidthRight + cssPaddingLeft + cssPaddingRight realHeight = contentHeight + cssBorderWidthTop + cssBorderWidthBottom + cssPaddingTop + cssPaddingBottomTrong đó:// box-sizing:content-box (Default): // We have: contentWidth = cssWidth contentHeight = cssHeight

2. CSS box-sizing:border-box

Đôi khi bạn muốn thiết lập border, padding cho phần tử và không muốn làm phần tử tăng kích thước, điều này hoàn toàn khả thi nếu bạn sử dụng CSS box-sizing:border-box. Khi đó phần tử này sẽ được coi là một "Border-Box".Nếu một phần tử là một "Border-Box" thì CSS width/height sẽ là "chiều rộng/chiều cao" của hình chữ nhật bao gồm cả padding và borders.box-sizing-border-box.html<!DOCTYPE html> <html> <head> <title>CSS box-sizing</title> <meta charset="UTF-8"/> <style> .my-box { box-sizing:border-box; width:250px; height:120px; margin: 20px; padding:30px; border: 10px solid gray; } </style> </head> <body> <h3>CSS {box-sizing:border-box;}</h3> <div class = "my-box"> box-sizing:border-box; <br/> width:250px; <br/> height:120px; <br/> margin: 20px; <br/> padding:30px; <br/> border: 10px solid gray; </div> </body> </html>

3. CSS box-sizing:padding-box (!)

Chú ý: Hầu hết các trình duyệt không hỗ trợ CSS box-sizing:padding-box (Hoặc không còn hỗ trợ nữa).
Một phần tử được thiết lập CSS box-sizing:padding-box nó sẽ được coi là một "Padding-Box". Khi đó CSS width/height chính là chiều rộng và chiều cao của hình chữ nhật chứa padding, nhưng không bao gồm borders.

Các hướng dẫn CSS

  • Các đơn vị tính trong CSS
  • Hướng dẫn và ví dụ CSS Selectors cơ bản
  • Hướng dẫn và ví dụ CSS Attribute Selector
  • Hướng dẫn và ví dụ CSS Selectors kết hợp
  • Hướng dẫn và ví dụ CSS Backgrounds
  • Hướng dẫn và ví dụ CSS Opacity
  • Hướng dẫn và ví dụ CSS Padding
  • Hướng dẫn và ví dụ CSS Margins
  • Hướng dẫn và ví dụ CSS Borders
  • Hướng dẫn và ví dụ CSS Outline
  • Hướng dẫn và ví dụ CSS box-sizing
  • Hướng dẫn và ví dụ CSS max-width và min-width
  • Các từ khóa min-content, max-content, fit-content, stretch trong CSS
  • Hướng dẫn và ví dụ CSS Links
  • Hướng dẫn và ví dụ CSS Fonts
  • Tìm hiểu về Generic Font Family trong CSS
  • Hướng dẫn và ví dụ CSS @font-face
  • Hướng dẫn và ví dụ CSS Align
  • Hướng dẫn và ví dụ CSS Cursors
  • Hướng dẫn và ví dụ CSS Overflow
  • Hướng dẫn và ví dụ CSS Lists
  • Hướng dẫn và ví dụ CSS Tables
  • Hướng dẫn và ví dụ CSS visibility
  • Hướng dẫn và ví dụ CSS Display
  • Hướng dẫn và ví dụ CSS Grid Layout
  • Hướng dẫn và ví dụ CSS Float và Clear
  • Hướng dẫn và ví dụ CSS Position
  • Hướng dẫn và ví dụ CSS line-height
  • Hướng dẫn và ví dụ CSS text-align
  • Hướng dẫn và ví dụ CSS text-decoration
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn ECMAScript, Javascript

Các hướng dẫn CSS

  • Các đơn vị tính trong CSS
  • Hướng dẫn và ví dụ CSS Selectors cơ bản
  • Hướng dẫn và ví dụ CSS Attribute Selector
  • Hướng dẫn và ví dụ CSS Selectors kết hợp
  • Hướng dẫn và ví dụ CSS Backgrounds
  • Hướng dẫn và ví dụ CSS Opacity
  • Hướng dẫn và ví dụ CSS Padding
  • Hướng dẫn và ví dụ CSS Margins
  • Hướng dẫn và ví dụ CSS Borders
  • Hướng dẫn và ví dụ CSS Outline
  • Hướng dẫn và ví dụ CSS box-sizing
  • Hướng dẫn và ví dụ CSS max-width và min-width
  • Các từ khóa min-content, max-content, fit-content, stretch trong CSS
  • Hướng dẫn và ví dụ CSS Links
  • Hướng dẫn và ví dụ CSS Fonts
  • Tìm hiểu về Generic Font Family trong CSS
  • Hướng dẫn và ví dụ CSS @font-face
  • Hướng dẫn và ví dụ CSS Align
  • Hướng dẫn và ví dụ CSS Cursors
  • Hướng dẫn và ví dụ CSS Overflow
  • Hướng dẫn và ví dụ CSS Lists
  • Hướng dẫn và ví dụ CSS Tables
  • Hướng dẫn và ví dụ CSS visibility
  • Hướng dẫn và ví dụ CSS Display
  • Hướng dẫn và ví dụ CSS Grid Layout
  • Hướng dẫn và ví dụ CSS Float và Clear
  • Hướng dẫn và ví dụ CSS Position
  • Hướng dẫn và ví dụ CSS line-height
  • Hướng dẫn và ví dụ CSS text-align
  • Hướng dẫn và ví dụ CSS text-decoration
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn Bootstrap
  • Các hướng dẫn ECMAScript, Javascript

Các bài viết mới nhất

  • Dart Stream Single và Broadcast
  • Xử lý lỗi trong Dart Stream
  • Hướng dẫn và ví dụ Dart Stream
  • So sánh đối tượng trong Dart với thư viện Equatable
  • Flutter BloC cho người mới bắt đầu
  • Xử lý lỗi 404 trong Flutter GetX
  • Ví dụ đăng nhập và đăng xuất với Flutter Getx
  • Hướng dẫn và ví dụ Flutter NumberTextInputFormatter
  • Hướng dẫn và ví dụ Flutter multi_dropdown
  • Hướng dẫn và ví dụ Flutter flutter_form_builder
  • Hướng dẫn và ví dụ Flutter GetX obs Obx
  • Hướng dẫn và ví dụ Flutter GetX GetBuilder
  • Từ khoá part và part of trong Dart
  • Hướng dẫn và ví dụ Flutter InkWell
  • Hướng dẫn và ví dụ Flutter Radio
  • Bài thực hành Flutter SharedPreferences
  • Hướng dẫn và ví dụ Flutter Slider
  • Hướng dẫn và ví dụ Flutter SkeletonLoader
  • Chỉ định cổng cố định cho Flutter Web trên Android Studio
  • Tạo Module trong Flutter
Show More
  • Các hướng dẫn CSS

Từ khóa » Box Sizing Border Box Là Gì