CSS 的布局盒子

news2024/11/15 9:34:40

目录

块级元素和行内元素

块级元素

特点：

行内元素

特点：

行内元素和块级元素的区别

改变显示模式（把行内元素变成块级元素)

盒模型

盒模型图

边框基础属性

内边框、外边框

基础写法：

复合写法

块级元素水平居中

前提：

去除浏览器默认样式

弹性布局

什么是 flex 弹性盒子?

基础概念：

常用属性

justify-content 设置主轴上子元素的排列方式

align-items 设置侧轴上的元素排列方式

块级元素和行内元素

块级元素

h1 - h6 p div ul ol li

特点：

独占一行
高度、宽度、内外边距、行高都可以进行控制
宽度默认和父级元素一样宽
是一个容器（盒子)，里面可以放行内元素和块级元素

行内元素

a strong b em i del s ins u span

特点：

不独占一行，一行可以显示多个
设置高度、宽度、行高无效
左右外边距有效（上下无效) ，内边距有效
默认宽度只能是本身内容
行内元素只能容纳本文和其他行内元素，不能放块级元素

行内元素和块级元素的区别

块级元素独占一行，行内元素不独占一行
块级元素可以设置宽高，行内元素不能设置宽高
块级元素四个方向都能设置外边距，行内元素垂直方向不能设置

改变显示模式（把行内元素变成块级元素)

display：block 改成块级元素（常用)
display：inline 改成行内元素（很少用)
display：inline-block 改成行内块元素

盒模型

盒模型图

每个 HTML元素 就相当于是一个矩形的 “盒子”

css的盒模型由里到外包括：content(内容)，padding(内边距)，border(边框)，margin(外边距)

边框基础属性

粗细：border-width
样式：border-style （默认没有边框，solid实线、dashed虚线、dotted点线边框)
颜色：border-color
让边框不会撑大盒子：box-sizing：border-box；

内边框、外边框

格式都一样无非外边框替换成 margin，下面拿padding(内边框)举例子

基础写法：

padding-top 设置上面的边距

padding-bottom 设置下面边距

padding-left 设置左边边距

padding-right 设置右边边距

复合写法

padding：5px 10px 15px 20px（设置上:5px 下:10px 左:15px 右:20px)

块级元素水平居中

前提：

指定宽度
把水平margin 设为 auto

例如：

<style>
        div {
            width: 500px;
            height: 200px;
            background-color: aqua;
            margin: auto;
        }
</style> 
<div>
    你好
</div>

去除浏览器默认样式

浏览器会给元素加上一些默认样式，尤其是内外边距，而不同的浏览器会有不同的默认样式，为了让我们的网页在任何地方显示的样式统一，我们往往会去除浏览器的默认样式

使用通配符：给所有元素加上格式

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

弹性布局

初体验

1. 默认
    <style>
        div{
            width: 100%;
            height: 100%;
            background-color: blue;
        }
        div>span{
            background-color: green;
            width: 100px;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
2. 当我们给div加上 display：flex

3. 再给 div 加上 justify-cotent:space-around;

4. 把 justify-cotent:space-around; 改成 justify-content：flex-end；