【UdemyJS】Section6笔记（共5节）HTML&CSS选修

6-3 Attributes, Classes and IDs

使用

(表单) 代替

(通用框，无意义)

//form相比div语义更强(semantic)，易于SEO检索
<form id="your-name">
  <h2>Your name here</h2>
  <p class="first">Please fill in this form :)</p>

  <input type="text" placeholder="Your name" />
  <button>OK!</button>
</form>

6-5 Introduction to the CSS Box Model

global reset：网页元素一般有预置的margin和padding，有时会创造一些问题。

一般会使用星号选择器重置所有元素的属性：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

关于border-box：border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

子选择器的写法：

.parent .child{
}
#parent .child{
}
parent child{
}
parent #child{
}
....

Title: 【UdemyJS】Section6笔记（共5节）HTML&CSS选修
Author: Artificial-Fool
Created at : 2024-12-09 00:20:32
Updated at : 2024-12-13 18:28:32
Link: https://space.bilibili.com/636023121/2024/12/09/UdemyJS-note6/
License: This work is licensed under CC BY-NC-SA 4.0.

#UdemyJS

Comments