CSS与布局基础：理解并掌握HTML+CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/shilihuakai/article/details/122318409
<!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>黑马HTML第四天</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .a {
            color: red;
        }
        .b {
            color: pink;
        }
        .c {
            color: blue;
            font-size: 14px;
        }
        body {
            color: yellow;
            font: 10px/1.5 'Microsoft YaHei';
        }
        .d {
            color: green;
            font: 20px/1.5 'Microsoft YaHei';
        }
        .nav {
            color: red;
        }

        li {
            color: pink;
        }

        .e {
            width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: dotted;
            border-color: pink;
        }
        .f {
            width: 200px;
            height: 200px;
            border: 5px solid blue;
            border-top: 5px solid red;
        }
        table {
            width: 500px;
            height: 249px;
        }
        table
        ,td
        ,th {
            border: 1px solid pink;
            border-collapse: collapse;
        }
        .g {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .h {
            margin-top: 20px;
        }
        .i {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<!-- 
    css有三个非常重要的三个特性：层叠性，继承性，优先级
    1.层叠性：相同的选择器给设置相同的样式，此时样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
    层叠性原则：
        样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行呢个样式
        样式不冲突不会层叠
    2.继承性：子标签会继承父标签的某些属性，如文本颜色和字号，简单的理解就是子承父业
        行高可以跟单位，也可以不跟单位，如果子元素没有设置行高，则会继承父元素的行高
        此时子元素的行高是，当前子元素的文字大小是设定的，
        body行高1.5这样写法里面最大的优势就是里面子元素可以根据自己文本大小自动调节行高
    3.优先级：当同一个元素指定多个选择器时，就会有优先级的产生。
        选择相同则执行层叠性，选择不同则根据权重执行，执行权重大的。不管父元素的权重有多高，子元素通过继承得到的就是0。
        选择器                      权重
        继承或者*号                 0.0.0.0
        元素选择器                  0.0.0.1
        类选择器伪类选择器           0.0.1.0
        ID选择器                   0.1.0.0
        行内样式style=             1.0.0.0
        !important                无穷大
        权重叠加：如果是复合选择器，则会有权限叠加。需要计算权重
 -->
 <!-- 
     页面布局三大核心：盒子模型，浮动和定位。
     1.看透网页布局本质：
        网页布局过程：
        1.先准备好相关的网页元素，网页元素基本都是盒子box。
        2.利用CSS设置好盒子样式，然后摆放到相应位置。
        3.往盒子里面装内容。
        网页布局的核心本质：就是利用CSS摆盒子
    2.盒子模型组成：
        所谓盒子模型：就是把HTML页面中的布局元素看作一个矩形的盒子。也就是盛装内容的容器。
        CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距，和实际内容
    3.边框border：
        border可以设置元素的边框。边框有三部分组成边框宽度，边框样式，边框颜色。边框会影响盒子大小
        属性            作用
        border-width    定义边框粗细，单位是px
        border-style    边框的样式  solid实线 dashed虚线 dotted点线
        border-color    边框颜色，默认黑色
        边框的复合性写法：border: 1px solid red;没有先后顺序，但是一般都是这样写的
        如果只想要某个边框发生变化：border-top上边框border-bottom下边框border-left左边框border-right右边框
        border-collapse: collapse;合并相邻边框
    4.内边距padding
        padding属性用于设置内边距，即边框与内容之间的距离。内边距也会影响盒子的大小
        如果盒子本身没有指定width和height属性，则此时盒子不会撑开盒子大小
        padding-top上边距padding-bottom下边距padding-left左边距padding-right右边距
        内边距复合写法：padding属性可以有一到四个值。
        一个值(padding: 5px;)                   一个值，代表上下左右都是5像素；
        两个值(padding:5px 10px;)               代表上下是5像素，左右是10像素
        三个值(padding:5px 10px 20px;)          代表上边距5像素，左右边距10像素，下边距20像素
        四个值(padding:5px 10px 20px 30px)      代表上5像素，右10像素，下20像素，左30像素 顺时针
    5.外边距margin
        margin用于设置外边距，即控制盒子与盒子之间的距离。
        属性                作用
        margin-left         左外边距
        margin-right        右外边距
        margin-top          上外边距
        margin-bottom       下外边距
        外边距复合写法：margin属性可以有一到四个值。
        一个值(margin: 5px;)                   一个值，代表上下左右都是5像素；
        两个值(margin:5px 10px;)               代表上下是5像素，左右是10像素
        三个值(margin:5px 10px 20px;)          代表上边距5像素，左右边距10像素，下边距20像素
        四个值(margin:5px 10px 20px 30px)      代表上5像素，右10像素，下20像素，左30像素 顺时针
    6.外边距典型应用
        外边距可以让块级盒子水平居中，但是必须满足两个条件：
            1.盒子必须指定了宽度
            2.盒子的左右外边距都设置为auto
        行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
        使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
            1.相邻块元素垂直外边距的合并
            当上下相邻的两个块元素相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间
            的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
            解决办法：只给一个盒子添加margin。
            2.嵌套块元素垂直外边距的塌陷
            对于两个嵌套关系的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。
            解决方案：
                1.可以为父元素定义上边框
                2.可以为父元素定义上内边距
                3.可以为父元素添加overflow:hidden（比较常用）
    7.清除内外边距
        网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清楚下网页元素的内外边距。
        * {
            margin: 0;
            padding: 0;
        }
        这句话也是我们css的第一行代码
        注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。（设置了也不起作用）
        但是转换为块级和行内块元素就可以了。
  -->
<body>
    <!-- 层叠性 -->
    <div class="a b">长江后浪推前浪，前浪死在沙滩上</div>
    <div class="c">
        <p>龙生龙凤生凤，老鼠生来会打洞</p>
    </div>
    <div class="d">
        继承
    </div>



    <ul class="nav">
        <li>人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>
    <div class="e">

    </div>
    <div class="f">

    </div>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>测试</th>
                <th>测试</th>
                <th>测试</th>
                <th>测试</th>
                <th>测试</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>也是测试</td>
                <td>也是测试</td>
                <td>也是测试</td>
                <td>也是测试</td>
                <td>也是测试</td>
            </tr>
        </tbody>
    </table>
    <div class="g">1</div>
    <div class="g h">2</div>
    <div class="i">
        <span>水平居中</span>
    </div>
</body>
</html>
CSS-04
