编程技术

Document

4.30周报

CSS盒子模型

1.优先级：继承 < 通配符选择器  < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ！important

2.！important卸载属性值的后面，分号的前面！

3.！important不能提升继承的优先级，只要是继承优先级最低！

4.权重叠加计算公式（ 0，0，0，0）行内样式个数，id选择器的个数，类选择器的个数，标签选择器的个数

5.自动内减：

        操作：给盒子设置属性 box-sizing：border-box；即可

        优点：浏览器会自动计算多余大小，自动在内容中减去

6.清除默认样式：
 

 <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>

综合案例：新闻列表

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            /* 所有的标签都可能添加内边距或border，都内减模式 */
            box-sizing: border-box;
        }
 
        .news{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }
 
        .news h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;
 
            /* 行高是一倍，就是字号的大小 */
            line-height: 1;
            padding-bottom: 9px;
        }
 
        /* 去掉列表的符号 */
        ul{
            list-style: none;
        }
        .news li{
            height: 50px;
            border: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }
 
        .news a {
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <!-- 从外到内 -->
    <div class="news">
        <h2>最新文章/New Areiclass</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中的链式编程是什么</a></li>
        </ul>
    </div>
</body>
</html>

CSS浮动

1.结构伪类：

        作用与优势：根据元素在HTML中的结构关系查找元素，减少对于HTML中类的依赖，有利于保持代码的整洁，常用于查找某父级选择器中的子元素

 <style>
        /* 选中第一个 */
        /* li:first-child{
            background-color: green;
        } */
 
        /* 最后一个 */
        /* li:last-child{
            background-color: green;
        } */
 
        /* 任意一个 */
        /* li:nth-child(5){
            background-color: green;
        } */
 
        /* 倒数第xx个 */
        li:nth-last-child(2){
            background-color: green;
        }
    </style>

2.伪元素

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
 
        .father::before{
            /* 内容 */
            /* content必须添加，否则伪元素不生效 */
            content: "老鼠";
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;
 
            /* 默认是行内元素，宽高不生效 */
            display: inline-block;
        }
 
        .father::after{
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签，装饰不重要的小图 -->
 
    <!-- 找父级，在这个父级里面创建了子集标签 -->
 
    <div class="father">爱</div>
 
    <!-- 老鼠爱大米 -->
</body>
</html>

案例：布局

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
 
        .top{
            /* 宽度高度背景色 */
            height: 40px;
            background-color: #333;
        }
 
        .header{
            width: 1226px;
            height: 100px;
            background-color:#ffc0cb;
            margin: 0 auto;
        }
 
        .content{
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }
 
        .left{
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }
 
        .right{
            float: right;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }
 
        /* CSS书写顺序：
            1.浮动/display
            2.盒子模型：margin border padding 宽度 高度 背景色
            3.文字样式 */
    </style>
</head>
<body>
    <!-- 通栏的盒子：宽度和浏览器宽度一样大 -->
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>