Day03

子代选择器：

含义：选择div中的所有子代p元素

语法：选择器1>选择器2{属性:属性值;}（选择器之间用大于号连接）

使用场景：在下面演示代码中，如果我们并不想选中div中的所有p，而是只想选中儿子一辈，不想选到li里的，就需要用到子代选择器啦。

<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        div>p{
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 需求：div子代的p标签背景为粉色 -->
    <div>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <ul>
            <li>
                <p>我是段落3</p>
            </li>
        </ul>
    </div>
</body>

后代选择器：

含义：选择div中的所有p元素

语法：选择器1 选择器2{属性:属性值;}（选择器之间用空格连接）

使用场景：在下面演示代码中，如果我们想选中div中的所有p标签，就需要用到后代选择器啦。

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        div p{
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 需求：div中的所有p标签背景为粉色 -->
    <div>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <ul>
            <li>
                <p>我是段落3</p>
            </li>
        </ul>
    </div>
</body>

并集（群组）选择器：

含义：选择多个元素

语法：选择器1,选择器2{属性:属性值;}（选择器之间用逗号连接）

使用场景：在下面演示代码中，如果我们想选中id值为"id3"的元素和class值为"div2"的元素，就可以使用并集选择器。

<head>
    <meta charset="UTF-8">
    <title>并集(群组)选择器</title>
    <style>
        #id3,.div2{
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 需求：让id值为"id3"的元素和class值为"div2"的元素背景为粉色 -->
    <div class="div1">我是盒子1</div>
    <div class="div2">我是盒子2</div>
    <div class="div1" id="id3">我是盒子3</div>
    <p class="div1">我是段落1</p>
</body>

交集选择器：

含义：选择同时满足所有条件的元素

语法：选择器1选择器2{属性:属性值;}（选择器之间直接连接，不要加任何符号）

使用场景：在下面演示代码中，如果我们想选中div中的所有class值为"div1"的元素，而不想选择p中class值为"div1"的元素，就可以使用交集选择器。

<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        div.div1{
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 需求：让div中的所有class值为"div1"的元素背景为粉色 -->
    <div class="div1">我是盒子1</div>
    <div class="div2">我是盒子2</div>
    <div class="div1" id="id3">我是盒子3</div>
    <p class="div1">我是段落1</p>
    <!-- 注意，交集选择器需要同时满足所有条件 -->
</body>

字体属性：

<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        /* 字体 */
        div {
            /* 字体的大小 标准浏览器默认的字体大小是16px*/
            font-size: 18px;

            /* 字体样式:默认的是微软雅黑，设置中文的字体必须要添加双引号,如果设置英文的则不需要 ，如果设置多个字体那么加载顺序是从左往右，如果不支持第一个那么就会去找第二个，一直找到最后一个为止,如果都不支持则加载默认的 */
            font-family: "黑体";

            /* 字体的加粗 100-900之间 100是最细的 900 最粗的  bolder bold*/
            /* bold 就是普通的加粗   bolder 的加粗是依赖其父元素，如果父元素没有设置加粗效果，那么bolder与bold的效果是一样的 一般常用的是 数字700 或者用bold加粗即可*/
            font-weight: normal;

            /* 字体倾斜 normal(正常值 不倾斜) italic(斜体字) oblique(倾斜的字)*/
            font-style: italic;

            /* 字体颜色  英文单词(red),十六进制写法（#000000），rgb的写法(red,green,blue)*/
            /* 进制 一共是36进制  2进制（0,1） 十进制（0-9） 八进制（0-7） 十六进制（0-9a-f）32进制 36进制*/
            /* rgb的范围是0-255之间 rgb(0,0,0) */
            color:pink;
        }
    </style>
</head>

<body>
    <div>我是一个普通的div</div>
</body>

文本属性：

<head>
    <meta charset="UTF-8">
    <title>文本属性</title>
    <style>
        div {
            width: 300px;
            height: 30px;
            background-color: orange;
            color: white;
            /* 文本对齐方式  left(默认值) center right justify*/
            text-align: center;

            /* 行高 如果行高等于高度，那么一行的文本会垂直居中，如果行高小于高度，则偏上，如果行高大于高度，则偏下 */
            line-height: 30px;

            /* 首行缩进 1em等于一个汉字的大小*/
            text-indent: 2em;

            /* 文本的装饰 none(没有下划线) underline (下划线) overline(上划线) line-through（删除线）*/
            text-decoration: underline;
        }

        div:hover {
            color: blue;
            /* 鼠标划过显示小手效果    cursor:move;鼠标滑过显示移动效果*/
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div>我是一个普通的div</div>
</body>

列表属性：

<head>
    <meta charset="UTF-8">
    <title>列表属性</title>
    <style>
        ul li{
            background-color:yellow;
            /* 复合属性 清除列表的默认样式 */
            list-style: none;
        }
        .ul2 li{
            background-color: violet;
            /* 列表的默认样式，可以是数字可以是空心圆，可以是实心圆，方形等等 */
            list-style-type:circle;
        }
        ol li{
            background-color:#f6f6f6;
            /* 列表前面可以插入图片，只需要保证图片的路径正确即可 */
            list-style-image: url(img/01SJB.png);

            /* 列表插入图片的位置，inside outside 填充的时候都是以内容的左边框为参考,默认值是outside */
            list-style-position: inside;
            /* 由于调整位置插入图片不方便，达不到我想要的效果，所以一般使用列表属性的时候直接使用list-style：none 即可 */
        }
    </style>
</head>
<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>  
    </ul>
    <ul class="ul2">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>  
    </ul>
    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
</body>

Day03-css选择器,属性Day03

边框属性：

<head>
    <meta charset="UTF-8">
    <title>边框属性</title>
    <style>
        .div1 {
            width: 50px;
            height: 50px;
            /* 边框  下面这个是复合属性，可以设置边框的粗细和样式，那么默认的颜色就是黑色*/
            border: 5px solid pink;
        }
        .div2 {
            width: 50px;
            height: 50px;
            /* 边框的粗细 */
            border-width: 5px;

            /* 边框的样式的线型  dotted(点线) dashed(虚线) solid(实线) double(双线)*/
            border-style: dotted;
            
            /* 边框的颜色 */
            border-color:orange;
        }
    </style>
</head>
<body>
    <div class=div1>盒子1</div>
    <br>
    <br>
    <div class="div2">盒子2</div>
</body>

单个边框样式：

<head>
    <meta charset="UTF-8">
    <title>单个边框样式</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* 设置单个边框，top：上 、 right：右 、 bottom：下 、 left：左 */
            border-top: 10px dashed orange;
            border-right: 10px solid violet;
            border-bottom: 10px double yellow;
            border-left: 10px dotted pink;
        }
    </style>
</head>
<body>
    <div>小盒子</div>
</body>

用边框画三角形：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画三角形</title>
    <style>
        div{
            width: 0px;
            height: 0px;
            border-top: 100px solid transparent;
            /*transparent 透明  */
            border-right: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 100px solid pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>

背景属性：

<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        div{
            width: 600px;
            height: 400px;
            background-color: orange;
            /* 背景图 */
            background-image: url(img/02BJT.jpg);

            /* 背景平铺 no-repeat repeat-y（沿着y轴平铺） repeat-x（沿着x轴平铺）*/
            /* x轴向右是正值   y轴是向下是正值 */
            background-repeat:no-repeat;

            /* 背景大小 第一个值代表的是宽度的百分比 第二个值代表的是高度的百分比*/
            background-size: 100% 100%;
            /* 背景大小  如果只给一个值，那么会根据宽度的百分比进行高度等比例缩放 */

            /* 背景定位 第一个值是距离x轴的偏移， 第二个值是距离y轴的偏移*/
            background-position: 100px 20px;
            /* 如果只给一个值，代表的是沿x轴的偏移；background-position-x是单独设置X轴的偏移，background-position-y是单独设置y轴的偏移 */
        }
    </style>
</head>
<body>
    <div></div>
</body>

背景固定：

<head>
    <meta charset="UTF-8">
    <title>背景固定</title>
    <style>
        html,body{
            height: 2000px;
        }
        div{
            width: 100%;
            height: 500px;
            background-color:#f0f0f0;
            background-image: url(img/02BJT.jpg);
            background-repeat: no-repeat;
            /* 背景固定 fixed(背景被固定在具体的位置，不随滚动条的滚动而滚动) scroll(默认值,根据盒子的滚动而滚动)
            */
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>

浮动：

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color:orange;
            float: left;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: violet;
            float: left;
        }
        .div3{
            width: 300px;
            height: 300px;
            background-color: pink;
            }
    </style>
</head>
<body>
    <div class="div1">盒子1</div>
    <div class="div2">盒子2</div>
    <div class="div3">盒子3</div>
</body>
    总结：属性：float: left,right,none
        如果只有一个元素浮动，那么正常文档流中该浮动元素后面的元素会补位上来
        如果有两个元素同时浮动，那么查看文档流中的结构谁先被解析谁就在浮动的那一次开始位置排列
        浮动之后的元素会改变类型，比如div，浮动之后会在一行展示，不在独占一行
        浮动只能解决左右布局，不能上下移动
        浮动的元素只会影响盒子不会影响里面的内容(文字)，如果一行放不下那么会自动换行

14 清除浮动：

方式1：
<head>
    <meta charset="UTF-8">
    <title>清除浮动1</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color:orange;
            float: left;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: violet;
            float: left;
        }
        .div3{
            width: 300px;
            height: 300px;
            background-color: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div class="div1">盒子1</div>
    <div class="div2">盒子2</div>
    <div style="clear: both;"></div>
    <div class="div3">盒子3</div>
</body>

方式2：
<head>
    <meta charset="UTF-8">
    <title>清除浮动2</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color:orange;
            float: left;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: violet;
            float: left;
        }
        .div3{
            width: 300px;
            height: 300px;
            background-color: pink;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div1">盒子1</div>
    <div class="div2">盒子2</div>
    <div class="div3">盒子3</div>
</body>

    总结:方式1：在受影响的盒子的上面加空标签<div style="clear: both;"></div>来清除浮动
         方式2：在受影响的盒子的样式中加"clear: both;"来清除浮动

高度塌陷问题：对于父盒子里面的元素添加浮动，如果父盒子没有固定高度，那么会产生高度塌陷。

解决方法：
1. 给父盒子添加高度,这个可以真正解决浮动影响
2. 给父盒子添加overflow:hidden 这个属性，只是解决高度塌陷问题，但是清除浮动不精确

总结：

1.选择器 (层级选择器(子代，后代)，交集(紧挨着)并集(逗号隔开))

2.字体属性(font-size,font-family,font-weight,font-style,color)

3.文本属性(text-align,text-decoration,text-indent,line-height)

4.列表属性(list-style(list-style-type,list-style-image,list-style-position))

5.边框属性(border(border-width,border-style,border-color))

6.背景属性(background-color,-image,-repeat,-position,-size,-attachment)

7.浮动(float:left,right,none)

　　a.高度塌陷

　　　　给父盒子添加高度，给父盒子添加overflow:hidden

　　b.后影响后面的元素

　　　　清除浮动，需要配合你的父盒子高度

　　　　清除浮动写法：给受影响的元素添加clear:both

　　　　　　　　　　　给受影响的元素的前面添加空标签，属性行内样式清除浮动

Day03-css选择器,属性Day03

Day03

继续阅读

一个小小的移动web版音乐播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令详解

Compile workrave under windows &ndash; My exprience 在Windows上编译Workrave

门户通专访草根站长九天狼：做站贵在坚持

如何成为一名.net 工程师?

tabpanel 使用问题

为什么把CSS放头部，script放下面

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

CSS之折叠菜单

web开发之前后端渲染

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

原生微信小程序

layui多任务上传添加进度条