HTML+CSS_01-CSDN博客

本文链接：https://blog.csdn.net/lijiaxuan_/article/details/122383421

1.盒子模型分为四个区
由内到外分为内容区，填充区，边框区，外边距区
在这里插入图片描述

2.内容区：width（宽），height（高） div一般不设置高
在这里插入图片描述

3.填充区：padding：顺时针，上右下左
在这里插入图片描述

padding=:1px 1px 1px 1px;
padding-top(上)
padding-right(右)
padding-bottom(下)
padding-left(左)

4.边框区：border 有四个方向和三个方面
border-(上下左右)-style:边框的样式
border-width:边框的宽度
border-color:边框的颜色
border-style: solid;border-color: green;border-width: 20px;
border:10px solid green;

5.外边距区：margin
margin：100px
margin：auto（左右居中）

6.去掉默认的距离
在head里 <style> *{ margin:0; padding:o; } </style>
7.内部样式

<head> <!-- 内部样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*selecter {
            property:value;
            ...
            ...
        }*/
        
        .boy {
            /*class选择器*/
            background-color: red;
            width: 200px;
            height: 200px;
            display: inline;
        }
        
        #ll {
            /*id选择器*/
            background-color: rgb(54, 41, 41);
            width: 200px;
            height: 200px;
            display: inline;
        }
        
        .girl {
            background-color: rgb(134, 158, 98);
            width: 200px;
            height: 200px;
            display: inline;
        }
        
        .content {
            background-color: red;
            width: 100px;
            height: 100px;
            padding: 10px 20px 30px 40px;
            border-style: solid;
            border-color: green;
            border-width: 20px;
        }
        
        div {
            /*元素选择器*/
        }

        div,
        body,
        span {
            /*组合选择器*/
        }
    </style></head>

<body>
<div class="boy" id="ll">div1</div>
    <div class="boy">div2</div>
    <div class="girl">div3</div>
</body>

8.class可以重复，id不允许重复

9.外部样式
head中

<link href="index.css" rel="stylesheet">

.css文件中
写修饰代码，也是各种选择器

10.优先级：行内样式>内部样式>外部样式

11.如果子div用float修饰，父div要加overflow：hidden（自适应）

12.box-sizing: border-box;
盒子的大小是整个盒子的大小

13.display: flex; 弹性盒子布局，横着布局。可以嵌套使用
如果要竖着布局，用flex-direction: ;(控制排列方向)
row 横着 -reverse 反转
column 竖着

flex-wrap: wrap; 换行

/* 排列方向的分布方式 /
/ justify-content: space-between; */
在这里插入图片描述

baseline（以基准线对齐）
在这里插入图片描述