vw単位
ブラウザの横幅に対する相対的な値となり、1vwはブラウザの横幅の1%に相当します。 たとえば、ブラウザ幅が1200pxのとき1vwは12px、ブラウザ幅が768pxのとき1vwは7.68pxを表すことになります。 ただ、全体的なレイアウトなどにvw単位を使うと意図しない余白が生まれることがあります。 vw単位はスクロールバーの幅を含む仕様のため、width: 100vw;を指定するとスクロールバーの幅分、横スクロールが発生します。 なので、全体的なレイアウトには%単位のほうが適しているといえます。 しかし、%単位は常に親要素に依存するため、ブラウザ幅を基準としたい場合には使えないので、その点便利ですね。 つまり、vw単位と%単位は、rem単位とem単位の関係性とほぼ同じです。

px単位を用いる派
すべてのCSSをpx単位で指定する場合です。 すべてpx単位で指定するとブラウザの設定から文字サイズを変更しても一切反映されないことになってしまいます。px単位をすべてに用いるとアクセシビリティを無視してしまう可 能性があります。

clampの意味は

かすがい。動留め金具で固定する、または留める。

clamp()関数とは

2つの定義された値（最小値と最大値）の間をクランプすることです。
3つのパラメーター（最小値、推奨値、最大値）を使用します

みかん	10箱
りんご	20盛
バナナ	50房
メロン	8個
すいか	2玉
レモン	20袋
ライチ	80個
キウイ	50個
ぶどう	30房

---

指定の文字列を線で囲むスタイルは、

div.sample h2 ~ p {プロパティ名:値;｝
例 ｛border: 3px dotted #000000;}

div_CSS_border.html詳細は 以下に転載

none css- p.sample1 {border-style: none; background: #ADD8E6;}

hidden css- p.sample2 {border-style: hidden; background: #B0C4DE;}

solid css- p.sample3 {border-style: solid; background:#87CEFA;}

double css- p.sample4 {border-style: double; background: #B0E0E6;}

groove css- p.sample5 {border-style: groove; background: #AFEEEE;}

ridge css- p.sample6 {border-style: ridge; background: #87CEEB;}

inset css- p.sample7 {border-style: inset; background: #66CDAA;}

outsetcss- p.sample8 {border-style: outset; background: #7FFFD4;}

dashed css- p.sample9 {border-style: dashed; background: #98FB98;}

dotted css- p.sample10 {border-style: dotted; background: #90EE90;}

上下solid、左右double css- p.sample11 {border-style: solid double; background: #F0E68C;}

上solid、左右double、下groove css- p.sample12 {border-style: solid double groove; background: #EEE8AA;}

上solid、右double、下groove、左ridge css- p.sample13 {border-style: solid double groove ridge; background: #FFE4B5;}