About the understanding of clientwidth scrollwidth offsetwidth

• ClientWidth: Width of element visible area clientwidth=padding+width-scroll bar
• ScrollWidth: The width of the actual content of the element scrollwidth=padding+width (the actual content of the element)
• Offsetwidth: Height of element visible area + border offsetwidth=border+width+padding

Code settings

textarea{
    border:5px solid red;
    width:200px;
    height:200px;
    padding:5px;
}
When the content is not beyond the viewable area
        Clientwidth=5+200+5
        Scrollwidth=5+200+5
        Offsetwidth=5+5+200+5+5

When the content is outside the viewable area

        Clientwidth=5+200+5
        scrollwidth=5+ Actual width +5
        Offsetwidth=5+5+200+5+5

The problems encountered in the practice

does not add <! to the top of the document DOCTYPE html>

TextArea is set by the browser as the default property has the Box-sizing:border-box property, the width of the high is fixed padding and border are included in the width of the

About the understanding of clientwidth scrollwidth offsetwidth