CSS选择器与图片尺寸控制-优快云博客

css选择器 类选择器 element.classList 可以拿到element元素中所有class

id选择器 element.id 可以拿到element元素中唯一id

　　　　　元素选择器 element.tagName 可以拿到element元素的标签名（拿到的为大写）//html标签浏览器不区分大小写，一般用小写

凡是选择器，要按照选择器格式选择。例如后代选择器。为class的后代p元素添加css .class p {} 后代类添加css .class .class{}

img路径向上一层 ../

css元素后代选择器优先级别大于img标签内width，height的长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>

        .box-slide .box-slide-image {
            width: 150px;
            height: 100px;
        }  <!-- 显示此部分的长，宽 -->
    </style>

</head>
<body>

<div class="box">

    <div class="box-slide" data-imgs="3" data-active="0">
        <img id="id-boximage-0" class="box-slide-image "
             src="cool1.jpg" width="100px" height="100px" alt="1">
    </div>

</div>
</body>
</html>

left: 0; 离父元素左边距离为0 当数字为0 可以省略px left：50%；（同理 top right ）

max-width ：10%；为只占父元素的百分比不超过父亲元素长宽等比例缩放。（比较好照片不失真）

width ：10% 会失真长宽不等比例缩放

outline(轮廓)是绘制在元素周围的一条线，位于边框边缘的外围，起突出元素的作用

轮廓线不会占用空间，也不一定是矩形