学习笔记第七天

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(轮廓)是绘制在元素周围的一条线，位于边框边缘的外围，起突出元素的作用

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

 

transform: translateY(-50%) 实现元素垂直居中效果

posted @ 2019-05-20 14:29  容忍君  阅读(195)  评论(0)    收藏  举报