Chiều cao css: kế thừa

bài 10. Chiều cao/Chiều rộng CSS

Nội dung

• Cài đặt chiều cao (Chieu cao) và chiều rộng (Chiều rộng) trong CSS
  • • Ví dụ 1
    • Ví dụ 2
  • Max-width setting setting
    • Ví dụ 3
  • Ví dụ minh họa
  • Tất cả các thuộc tính về chiều cao và chiều rộng trong CSS

Cài đặt chiều cao (Chieu cao) và chiều rộng (Chiều rộng) trong CSS

Hai thuộc tính chiều cao và chiều rộng được sử dụng để đặt chiều cao và chiều rộng tương ứng cho một phần tử trong CSS

Thuộc tính chiều cao và chiều rộng có thể được thiết lập giá trị mặc định là tự động. Ngoài ra giá trị của 2 thuộc tính này sử dụng các đơn vị đo có trong CSS bao gồm pixel (px), centimet (cm), điểm (pt), phần trăm (%)…

Ví dụ minh họa dưới đây cho một phần tử có chiều cao 200 pixel và chiều rộng là 50%

Ví dụ 1

div {
height: 200px;
width: 50%;
background-color: powderblue;
}

Ví dụ dưới đây minh họa cho một phần tử có chiều cao 100 pixel và chiều rộng 500 pixel

Ví dụ 2

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

Chú thích. Thuộc tính

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

4 và 

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

5 không bao gồm phần đệm, đường viền(đường viền) hoặc lề(lề) của một phần tử mà chính bằng phần chiều cao/chiều rộng nằm phía trước trong phần đệm, đường viền và lề

---

Max-width setting setting

Thuộc tính chiều rộng tối đa được sử dụng để thiết lập chiều rộng tối đa cho một phần tử

chiều rộng tối đa có thể nhận các giá trị chiều dài bao gồm pixel (px), centimet (cm), điểm (pt), phần trăm (%). or value none (ở đây là giá trị mặc định)

Sẽ có một vấn đề đặt ra đó là khi cửa sổ duyệt số của chúng ta có chiều rộng nhỏ hơn chiều rộng của một phần tử (500px) thì phần tử đó hiển thị như thế nào? . Sau đó trình duyệt sẽ thêm thanh cuộn ngang vào trang

Thay vì công việc phải sử dụng chiều rộng tối đa, trong trường hợp này, sẽ xử lý các trình duyệt được duyệt khi có cửa sổ nhỏ

Mạch nhỏ. Chúng ta cho cửa sổ duyệt xuống nhỏ hơn 500px, để thấy sự khác biệt giữa hai thẻ

Khi làm việc với Box Model nói riêng và CSS Layout nói chung thì ngoài công việc chúng ta cần tinh chỉnh cách hiển thị cho mỗi phần tử thì còn có một công việc khác nữa mà bạn cũng sẽ rất thường xuyên làm đó là thiết lập kích thước cho

Trong CSS thì hiện tại có tất cả 6 thuộc tính để bạn tùy chọn chiều rộng và chiều cao của phần tử bao gồm

Tên thuộc tínhMô tảCác loại giá trị chiều caoThiết lập chiều cao của một phần tử. auto
length
%
inheritmax-heightThiết lập chiều cao tối đa của một phần tử. none
length
%
inheritmax-widthThiết lập chiều rộng tối đa của một phần tử. none
length
%
inheritmin-heightThiết lập chiều cao tối thiểu của một phần tử. length
%
inheritmin-widthThiết lập chiều rộng tối thiểu của một phần tử. length
%
inheritwidthThiết lập chiều rộng của phần tử. auto
độ dài
%
kế thừa

Tại các cột các kiểu giá trị,

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

6 nghĩa là kiểu giá trị kèm theo đơn vị như

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

7,

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

8,

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

9,

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

0 và

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

1,

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

2 là bỏ thiết lập,

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

3 là tự động tính toán theo chiều còn lại và

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

4 là kế thừa giá trị

Và xin lưu ý thêm là bạn chỉ có thể thiết lập kích thước cho các phần tử Block, Table và các đối tượng (hình ảnh, video, flash,…) chứ không thể thiết lập cho các phần tử nội tuyến

Đối với các thuộc tính dạng

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

5,

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

70 thì có nghĩa là nó sẽ sử dụng độ dài của phần tử dựa trên các nội dung bên trong nhưng sẽ có kích thước tối thiểu/tối đa được phép sử dụng. Ví dụ bạn có phần

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

71, bên trong

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

71 bạn có phần

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

73 và thiết lập chiều rộng cho

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

73 là 500px. Thì nếu bạn đặt thuộc tính

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

75 cho #content là 400px thì cái thằng

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

73 nó cũng chỉ giãn được tối đa là 400px chứ không thể hơn

Lời kết

Như vậy thì cuối bài bạn cũng đã có thể biết toàn diện vì các thuộc tính thay đổi kích thước của các phần tử khối để sau này bạn có thể biết rằng áp dụng khi sử dụng, mọi thứ cũng đơn giản thôi mà chỉ cần bạn thực hiện

Sự hiểu biết của tôi là

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

6 cho phép chiều rộng của phần tử giống như cha mẹ của nó, trong khi

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

7 chỉ làm điều đó khi chiều rộng của cha mẹ được xác định rõ ràng. Điều này có phải là sự hiểu biết đúng không?

Nếu vậy, tôi có vẻ như khi

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

7 hoạt động, thì

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

6 sẽ luôn hoạt động, vì vậy bạn luôn có thể sử dụng cái sau. Sau đó, mục đích của công việc viết

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

7 là gì?

Nếu sự hiểu biết của tôi là sai, sự khác biệt giữa hai người là gì?

Tương tự với

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

2

TIGT

1. 6702 Huy hiệu vàng17 Huy hiệu bạc37 Huy hiệu đồng2 huy hiệu vàng17 huy hiệu bạc37 huy hiệu đồng

hỏi ngày 21 tháng 2 năm 2012 lúc 8. 47 21/02/2012 lúc 8. 47

Xem jsfiddle http. //jsfiddle. net/bt5nj/2/ và http. //jsfiddle. net/bt5nj/3/

Chiều rộng kế thừa

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

3 được xác định bởi cha mẹ. cha mẹ

HTML

  

      

  
​

CSS

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

Điều này làm cho

Chiều rộng của

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

4 là 25%, nhưng nếu tôi xác định lại nó bằng

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

5, thì nó sẽ xác định chiều rộng là

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

4 50%

​

MANU động mạch

8. 1435 huy hiệu vàng56 Huy hiệu bạc67 Huy hiệu đồng5 huy hiệu vàng56 huy hiệu bạc67 huy hiệu đồng

Đã trả lời ngày 21 tháng 2 năm 2012 lúc 8. 55 21/02/2012 lúc 8. 55

Chuck Norrischuck Norris Chuck Norris

14. 8K12 Huy hiệu vàng89 Huy hiệu bạc122 Huy hiệu đồng12 huy hiệu vàng89 huy hiệu bạc122 huy hiệu đồng

4

Từ khóa kế thừa CSS tạo phần tử lấy giá trị tính toán của thuộc tính từ phần tử cha của nó. Nó có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm cả tốc độ tài liệu của CSS. Đối với các thuộc tính được kế thừa, điều này củng cố hành vi mặc định và chỉ cần thiết để ghi lại một quy tắc khác