css 基础

css3基础

html嵌套样式:

1.外部 比较推荐的方法

2.内部

3.内联 不建议使用

样式表写法

img{
    background: red;
    border-radius: 200px;
    /*  方法叫做内部 */
}

css优先级

1 内联styl

2 id选择器 id是唯一 不能重复

3 class选择器

4 标签

css长度单位

1 px

2 em 倍数

css选择器

1 常用选择器

2 基本选择器

3 层级选择器

4 伪类选择器

5 属性选择器

常用选择器：

1.标签选择器 html span h1 h2 from …

2.id选择器 -> 前面有#

3 类选择器 —>前面有 点

<style>
    img{
        background: red;
        border-radius: 200px;
        /*  方法叫做内部 */
    }
    #imgid {
        background:yellow;
    }
    .imgclass{
        background: chocolate;
    }
</style>

 <img src="1.jpg" id="imgid" class="imgclass" alt="1">

4 关联选择器

父类往下找

<style>
    .div2 .imgclass{
        background: chocolate;
        border-right: double;
    }
</style>

<div class="div1">
        <img src="1.jpg" id="imgid1" class="imgclass" alt="1">
</div>
<div class="div2">
        <img src="1.jpg" id="imgid" class="imgclass" alt="1">
</div>

5 组合选择器

并列使用同一种样式

<style>
    .div2 .imgclass, .div3 .imgclass{
        background: chocolate;
        border-right: double;
    }
</style>

<div class="div1">
        <img src="1.jpg"  class="imgclass" alt="1">
</div>
<div class="div2">
        <img src="1.jpg"  class="imgclass" alt="1">
</div>
<div class="div3">
        <img src="1.jpg"  class="imgclass" alt="1">
</div>

基本选择器

  • :first-child

    有四张图片，只有第一个生效， 找到四个元素，但是只有第一个生效

    <style>
        img:first-child{
            background: chocolate;
            border-right: double;
        }
    </style>

    <body>
        <img src="1.jpg"  class="imgclass" alt="1">
        <img src="1.jpg"  class="imgclass" alt="1">
        <img src="1.jpg"  class="imgclass" alt="1">
        <img src="1.jpg"  class="imgclass" alt="1">
    </body>

    ?

  • : first-letter

    `第一个字符`

             <!DOCTYPE html>
             <html lang="en">
             <head>
                 <meta charset="UTF-8">
                 <title>css</title>
             <style>
    * {
        font-family: "微软雅黑 Light";
    }
    p:first-letter {
        font-size: 80px;
        margin-left: 20px;
        /*  段落标签 第一个字符大小为80x,且缩进20 px */
    }
    </style>


    <h1>css测试</h1>
<p>系统linux front test linux front testlinux front testlinux front testlinux front test</p>




      ?

    * :first-line

      `第一行`

      ```html
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>css</title>
      <style>
          * {
              font-family: "微软雅黑 Light";
          }
          p:first-line {
              font-size: 40px;
              margin-left: 202px;
              /*  段落标签 第一个字符大小为80x,且缩进20 px */
          }
      </style>

      </head>
          <body>
              <h1>css测试</h1>
              <p>系统 linux front test linux front
                  testlinux front testlinux front testlinux front test</p>
          </body>
      </html>

    ?

  • :last-child

    和first-child 相反只有最后一个元素生效

  • :nth-child(3)

    选择三个生效

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css</title>
    <style>
        img:nth-child(3) {
            background: chocolate;
            border-right: double;
        }
    </style>

        
    </head>
    <body>
        <img src="1.jpg"  class="imgclass" alt="1">
        <img src="1.jpg"  class="imgclass" alt="1">
        <img src="1.jpg"  class="imgclass" alt="1">
        <img src="1.jpg"  class="imgclass" alt="1">
    </body>
    </html>

    ?

层级选择器

a,b
a b
a>b

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "微软雅黑 Light";
    }
    .div1>h1{
        background: #ccc;
        /* 查找div1 中的子元素 其他的不包括在内*/
    }
</style>

</head>

<body>
    <div class="div1">
        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa1</h1>
        <!-- 只有这一行符合 -->
        <div class="div11">
            <div class="div111">
                <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa11</h1>
                <h1>dsfsdfasdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
            </div>
        </div>
    </div>
    <div class="div2">

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

a+b

后面的第一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "微软雅黑 Light";
    }
    .div1+h1{
        background: #ccc;
        /* 查找div1 中的子元素 其他的不包括在内*/
    }
</style>

</head>

<body>
    <div class="div1">
        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa1</h1>
        <!-- 只有这一行符合 -->
        <div class="div11">
            <div class="div111">
                <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa11</h1>
                <h1>dsfsdfasdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaa111</h1>
            </div>
        </div>
    </div>
    <!-- 找到 div1 后面的一个元素 所以以下第一行-->
    <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa a</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa b</h1>
</body>
</html>

伪类选择器

  • :hover
  • :focus
  • ::selection

:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "微软雅黑 Light";
    }
    img:hover {
        background: blueviolet;
        border-bottom: 2px;
        /* 当鼠标移到图片的时候 背景颜色变为紫色  且显示为圆形*/
    }
</style>

</head>

<body>
    <img src="1.jpg" alt="">
</body>
</html>

:focus

表单元素获得焦点聚焦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "微软雅黑 Light";
    }
   .username:focus {
       background: #ff0;

       /* 轮廓的颜色 青色*/
       outline-color: chartreuse;
   }
    /* 当鼠标移到表单username位置时 输入框的位置会变成黄色， 获得到焦点 */
</style>

</head>

<body>
    <form action="">
        <p>用户名:</p>
        <p><input type="text" class="username"></p>
        <p><input type="submit" value="ok"></p>
    </form>
</body>
</html>

::selection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "微软雅黑 Light";
    }
    /* 注意有两个冒号 */
    p::selection {
        background: darkmagenta;
        /* 当鼠标选定到字符时 背景会变成紫色 */
    }
</style>

</head>
    <body>
        <h1>css测试</h1>
        <p>系统 linux front test linux front
            testlinux front testlinux front testlinux front test</p>
    </body>
</html>

属性选择器

  • [id]

  • ?
    [id=us] 等于us

  • ?
    [name*=us] name包含us 既满足条件

  • ?
    [name^=en] name以en开头既满足条件

    [name$=en] name以en结尾即满足条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "微软雅黑 Light";
    }
    input[name=username] {
        outline-color: darkred;
        /* input标签 name=username的标签 边框为棕色,当鼠标点击上去的时候 */
    }
    input[name=username] {
        outline-color: darkred;
        /* input标签 name=username的标签 边框为棕色,当鼠标点击上去的时候 
            可以是其他标签  不一定name
        */
    }
    input[name=passwd] {
         outline-color: blue;
        /* input标签 name=passwd的标签 边框为蓝色,当鼠标点击上去的时候 */
    }
</style>

</head>

<body>
    <form action="">
        <p>用户名:</p>
        <p><input type="text" name="username" class="username"></p>
        <p>密码:</p>
        <p><input type="password" name="passwd"  class="passwd"></p>
        <p>邮箱:</p>
        <p><input type="email" name="email"  class="email"></p>
        <p><input type="submit" value="ok"></p>
    </form>
</body>
</html>

<!-- 标签所有拥有的属性也能作为选择的依据  -->

常见的样式属性和值

1字体与颜色

2背景属性

3文本属性

4边框属性

5鼠标光标属性

6样式属性

7定位属性

8内外边框

9浮动和清除浮动

10滚动条

11显示和隐藏

1字体与颜色

font

1 font-family //字体类型

//字体名称:楷体 宋体 黑体…

2 font-size //字体大小

//30px

3 font-style //字体样式

// normal | itaic

4 font-weight //字体粗细

//bold

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "新宋体";
        /*
            1. 字体类型
        */
        
        /*
        自定义字体 :
            font-family: "自定义";
            src: url('自定义.ttf');
        */
    }

    h1 {
        font-size: 100px;
        /*
           2。 字体大小
        */
    }
    p {
        font-style: inherit;
        /*  
            3. 斜体 
        */
        font-weight: bold;
        /* 
            4. 字体粗细
         */
    }

</style>

</head>

<body>
    <h1>字体</h1>
    <p>dsffjsafdsfadsfadsfadssssssssssfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdddddddddddddddddddddddd</p>
</body>
</html>

2背景属性

background

1. background-color

2. background-image

3. background-repeat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "新宋体";
    }
    div {
        width: 500px;
        height: 500px;
        background-color: #ccc ;
        /*  设置默认背景颜色为灰色 */


        background-image:url("1.jpg");
        /*    背景图   */
        background-repeat: no-repeat;
        /* 不重复图片  */
    }

</style>

</head>

<body>
    <div>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
    </div>
</body>
</html>

4.background-attachment

5. background-psoition

? 1.水平: left center right; 垂直:top center bottom

? 2.50px 50px

? 3.-50px -50px

4. 50% 50% 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "新宋体";
    }
    body  {

        background-color: #ccc ;
        /*  设置默认背景颜色为灰色 */


        background-image:url("1.jpg");
        /*    背景图   */
        background-repeat: no-repeat;
        /* 不重复图片  */

        background-attachment: fixed;
        /*  随着页面滚动 而滚动  适用于body */

        background-position: 50% 50%;
        /*   图片出现在页面宽高50% 的地方   */
      
        background: #ccc url("1.jpg") no-repeat fixed 50% 50%;
        /*    缩写形式   */
    }

</style>

</head>

<body>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>
        <h1>os  linux   apache  nginx</h1>

</body>
</html>

3文本属性

word-spacing 词间距

letter-spacing 字间距

text-decoration

值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。

属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进 元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

字体行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "新宋体";
    }
    p{
        /*letter-spacing: 15px;*/
        /*!*
         字间距
         *!*/

        /* word-spacing: 12px;*/
        /*!**/
         /*词间距*/
         /**!*/

        /* color: darkmagenta; */
        /*!**/
            /*颜色*/
        /**!*/

        /*line-height: 20px;*/
        /*!**/
            /*行高*/
        /**!*/

        /*text-decoration: underline;*/
        /*!**/
            /*下划线 上划线 中划线....*/
        /**!*/

    }

</style>

</head>

<body>
    <h1>字体</h1>
    <p>linux unix dsffjsafdsfadsfadsfadssssssssssfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdddddddddddddddddddddddd</p>
</body>
</html>

对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
<style>
    * {
        font-family: "新宋体";
    }
    p{
        text-align: center;
        text-align: left;
        text-align: right;

        /*  文字对齐 */
    }

</style>

</head>

<body>
    <h1>字体os</h1>
    <p>linux unix forgt apple blue</p>
</body>
</html>

4 边框属性

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        div{
            width: 1000px;
            height: 100px;
            background: #ccc;
            border:12px solid #f0f;
            /* 边框线 1像素 solid 实线条  红色 都是缩写*/

            /* dotted 点连成的线条  dashed 横线连起来的线条 虚线 双线
                凹进去的槽线 凸出来的槽线 grove 凹进去 ridge 凸出来
             */

        }
    </style>
</head>

<body>
    <div>
        <span>html5 + css3 </span>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        div{
            width: 1000px;
            height: 100px;
            border-right: 10px ridge #f22;
            /*  右侧边框  left 左 top 上  bottom下 */
            /*  上下左右边框方位 */
        }
    </style>
</head>

<body>
    <div>
        <span>html5 + css3 </span>
    </div>
</body>
</html>

可以控制字体方位的应用

5鼠标光标属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        p {
            width: 100px;
            height: 10px;
            border-left: 11px ridge #f22;
            cursor: crosshair;
            /*  当鼠标放到文字上变成十字架 */
            /* pointer 小手势（较为常用）  wait 等待状态(漏斗)
                text 默认I    default 按原来什么都不变
                help 获取帮助样式鼠标?
            */
        }
    </style>
</head>

<body>

        <p>html5 + css3 </p>
        <p>html5 + css3 </p>
        <p>html5 + css3 </p>
        <p>html5 + css3 </p>

</body>
</html>

列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        ul{
            background: forestgreen;
            padding: 0px;  /* 靠左边 */
            list-style-type: none ;
            /*
                none 什么都没有
                disc 实心圆 默认
                circle 空心圆

                square 实心方块
                decimal 数字   有序列表使用这个

                lower-roman  小写罗马数字
                upper-roman  大写罗马数字

                lower-roman  小写字母
                upper-alpha  大写字母
            */
        }

        ul a{
            color: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="">百度</a></li>
        <li><a href="">百1度</a></li>
        <li><a href="">百2度</a></li>
        <li><a href="">百3度</a></li>
        <li><a href="">百4度</a></li>
    </ul>
</body>
</html>

使用ul制作导航菜单

尺寸

weight

min-weight

最小宽度

限定文本框textarea样式

resize:none

width:200px

height:300px

样式继承特点：与文字有关的都会被继承

表格

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
      table{
          width: 1000px;
           border: 3px solid chartreuse;
          border-collapse: collapse;
          /*   合并 */
      }
        td,th{
            text-align: center;
            /* 文本居中 */
             border: 3px solid chartreuse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
        <th>编号</th>
        <th>用户名称</th>
        <th>密码</th>
        </tr>
        <tr>
            <td>1</td>
            <td>user1</td>
            <td>passssd123432</td>
        </tr>        <tr>
            <td>1</td>
            <td>user1</td>
            <td>passssd123432</td>
        </tr>        <tr>
            <td>1</td>
            <td>user1</td>
            <td>passssd123432</td>
        </tr>        <tr>
            <td>1</td>
            <td>user1</td>
            <td>passssd123432</td>
        </tr>        <tr>
            <td>1</td>
            <td>user1</td>
            <td>passssd123432</td>
        </tr>        <tr>
            <td>1</td>
            <td>user1</td>
            <td>passssd123432</td>
        </tr>
    </table>
</body>
</html>

定位

1.position: absolute; 绝对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        *{
            margin: 0px;

        }
        img {
            position: absolute;
            /* 绝对定位 */
            left: 20px;
            top:20px;
        }
    </style>
</head>
<body>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <img src="5.png" alt="">
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>

</body>
</html>

2.position:relative; 相对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        *{
            margin: 0px;

        }
        img {
            position: relative;
            /*
                相对定位原来所占用的空间不会释放

                绝对定位 绝对定位
                相同点： 都脱离了文档流
                不同点   坐标系不同，绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角；
                        占不占位， 相对占位；
             */
            left: 20px;
            top:200px;
        }
    </style>
</head>
<body>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <img src="5.png" alt="">
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>
        <h1>sssssssssssssss</h1>

</body>
</html>

z-index 定位高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        *{
            margin: 0px;

        }
        img {
            position: absolute;
            left: 200px;
            top:200px;
        }
        .img1{
            z-index: 1;
            /* 本来下下面  */
        }
    </style>
</head>
<body>
        <img src="5.png" class="img1">
        <img src="5.png" class="img2">
</body>
</html>

实现div绝对居中的方法:

1 父div: position: relative;

2.子div：position: absolute;

父定位子绝对，子的坐标是父的左上角

8内外边框

margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        *{
          font-family: "Colonna MT";
            margin: 0px;
            /* 去掉所有边距  */
        }
    .img{
        background: #ff1;
        margin-bottom: 10px;
        /*  下部外边距 */
    }
        .img:last-child{
            margin-bottom: 0px;
            /* 去掉最后一图片的外边距  */
        }
    </style>
</head>
<body>
       <div class="img"><img src="5.png"></div>
       <div class="img"><img src="5.png"></div>
       <div class="img"><img src="5.png"></div>
       <div class="img"><img src="5.png"></div>
</body>
</html>

margin:20px; 上下左右
margin:5px 0px; 上下,左右面
margin:0px 5px 5px; 上，左右， 下
margin:0px 5px 0px 5px; 上右下左;

9浮动

值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        *{
          font-family: "Colonna MT";

            /* 去掉所有边距  */
        }
    .img{
        background: #ff1;
        margin-bottom: 10px;
        /*  下部外边距 */
    }
        .img{
            background: #ccc;
            width: 200px;
            height: 200px;
            float: left;
            margin-left: 100px;


        }
        .row{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="row">
       <div class="img"><img src="5.png"></div>
       <div class="img"><img src="5.png"></div>
       <div class="img"><img src="5.png"></div>
       <div class="img"><img src="5.png"></div>
    <div style="clear: both"></div>
    </div>

       <div class="img"><img src="5.png"></div>
       <div class="img"><img src="5.png"></div>
       <div class="img"><img src="5.png"></div>
       <div class="img"><img src="5.png"></div>
    <div style="clear: both"></div>
  <!-- 清除浮动 -->
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background: #ccc;
            float: left;
        }
        .div2 {
            width: 105px;
            height:105px;
            background: red;
        }
        .div3 {
            width: 105px;
            height:105px;
            background: darkslategray;
            clear: left;
            /* 不给左侧有其他 ， 如果有会自动在新的一行 */
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>
清除浮动:
1.clear:left
#浮动之后左侧不能有人

2.clear:right
#浮动之后右侧不能有人

3.clear:both
#浮动之后左右侧都不能有人
#可以有效的防止盒子回缩

10滚动条

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        div{
            width: 1000px;
            height:200px;
            border: 2px solid #ccc;

            overflow: scroll;
            /* 对溢出的内容固定  */
        }
    </style>
</head>
<body>
    <div class="div1"><h1> linux os appcle linux os appclelinux os appclelinux os appclelinux os appclelinux os appclelinux os appclelinux os appcle linux os appclelinux os appclelinux os appcle</h1></div>

</body>
</html>

11显示和隐藏

1.display

）。）。）。）。 ）。）
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似
table-header-group 此元素会作为一个或多个行的分组来显示（类似
table-footer-group 此元素会作为一个或多个行的分组来显示（类似
table-row 此元素会作为一个表格行显示（类似
table-column-group 此元素会作为一个或多个列的分组来显示（类似
table-column 此元素会作为一个单元格列显示（类似
table-cell 此元素会作为一个表格单元格显示（类似 和 ）
table-caption 此元素会作为一个表格标题显示（类似
）
inherit 规定应该从父元素继承 display 属性的值。

display 显示要注意是行 还是块block

2.visibility

值 描述
visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit 规定应该从父元素继承 visibility 属性的值。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
            .line1{
                display: none;
                /* 不显示，不占位置 */
                visibility: hidden;
                /*  隐藏 占位  */
            }
            
    </style>
</head>
<body>
    <h1 class="line1">1 aaaaaaaaaaaaaaaaa</h1>
    <h2 class="line2">2 aaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbb</h2>
    <h2 class="line3">3 aaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbb</h2>
</body>
</html>

css3

边框样式

属性 描述 CSS
border-image 设置所有 border-image-* 属性的简写属性。 3
border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
box-shadow 向方框添加一个或多个阴影。 3 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
            div{

                background: #ccc;
                width: 200px;
                height: 200px;
                border-radius: 5px;

                border-radius: 5px 20px;
                /* 对角线 */

                border-radius: 5px 20px 20px;
                /* 中间是对角线  */
            }

    </style>
</head>
<body>
    <div>
        <img src="23.jpg" alt="">
    </div>
</body>
</html>

box-shadow

值 描述 测试
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊距离。 测试
spread 可选。阴影的尺寸。 测试
color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
inset 可选。将外部阴影 (outset) 改为内部阴影。 测试