前端基础内容（五）

最新推荐文章于 2024-03-18 13:34:46 发布

vinoMamba0908

最新推荐文章于 2024-03-18 13:34:46 发布

阅读量228

点赞数

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_38091402/article/details/106310342

版权

css布局

1、文档流

文档流
- 网页是一个多层的结构，一层摞着一层
- 通过CSS可以分别为每一层来设置样式
- 作为用户只能看到最上面一层
- 这些层中，最底下的一层称之为***文档流***，文档流是网页的基础
  - 我们所创建的元素，默认都是在文档流中进行排列
- 对于元素主要有两个状态
  - 在文档流中
  - 不再文档流中（脱离文档流）
- 元素在文档文档流中的特点
  - 块元素
    - 块元素会在页面中独占一行（自上向下排列）
    - 默认宽度是父元素的全部(会把父元素撑满)
    - 默认高度是被子元素撑开
  - 行内元素
    - 不会独占一行，只占自身的大小
    - 行内元素在页面中自左向右水平排列，如果一行之中不能容纳所有元素，就换另换一行继续排列
    - 行内元素的默认宽高度是被内容撑开

2、盒子模型

CSS将页面中的所有元素都设置为了一个***矩形的盒子***
将元素设置为矩形之后，页面的布局就变成了将不同的盒子摆放在相应的位置
每一个盒子都有一下几个部分组成
- 内容区（content）
- 边框（border）
- 内边距（padding）
- 外边距（margin）

1、内容区（content）

元素中所有的子元素和文本内容都在内容区中排列
- 内容区的大小由height和width两个属性来设置
  - height设置内容区高度
  - width设置内容区宽度

2、边框（border）

边框属于盒子的边缘
- 边框的大小会影响盒子整个盒子的大小
- 设置比边框，需要至少设置三个样式
  - 边框的宽度：border-width
    - 默认值，一般都是3个像素
    - 可以用来指定四个方向的边框宽度
      - 四个值的时候：上、右、下、左
      - 三个值：上、左右、下
      - 两个值：上下、左右
      - 一个值：上、下、左、右
    - border-xxx-width
      - border-top-width
      - border-right-width
      - border-bottom-width
      - border-left-width
  - 边框的颜色：border-color
    - 用来指定边框的颜色，同样可以分别指定四个边框的颜色
      - 规则和border-width一样
      - 默认值black
  - 边框的样式：border-style
    - 实线：solid
    - 点状虚线：dotted
    - 线状虚线：dashed
    - 双线：double
- 简写的方式：border：width color style

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box {
    
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            border-width: 10px;
            border-color: blue;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3、内边距（padding）

内容区和边框的之间的距离
一共有四个方向的内边距
- padding-top
- padding-right
- padding-bottom
- padding-left
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
盒子的可见大小，由内容区、边框、内边距共同决定

4、外边距（margin）

外边距不会影响盒子可见的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距
margin可以设置成负值

3、水平布局

元素在其父元素中水平方向的位置由以下几个属性共同决定
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
一个元素在其父元素中，水平布局必须满足以下的等式
- margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容的宽度（必须满足）
- 以上等式必须满足，如果相加结果使等式不成立，则成为过度约束，则等式会自动调整
  - 调整情况
    - 如果七个值中没有为auto的情况，则浏览器会自动调整margin-right，使等式满足
- 这七个值中有三个值可以设置为auto
  - width
  - margin-left
  - margin-right
    - 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
    - 如果将宽度和外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
    - 如果将三个值都设置为auto，则外边距都是0，宽度最大
    - 如果将两个外边距设置成auto，宽度固定值，则会将外边距设置成相同的值
      - width：xxpx;
      - margin：0 auto;
        
        是一个元素水平居中
```
<!DOCTYPE html>
```

最低0.47元/天解锁文章

vinoMamba0908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础内容（五）

css布局1、文档流文档流网页是一个多层的结构，一层摞着一层通过CSS可以分别为每一层来设置样式作为用户只能看到最上面一层这些层中，最底下的一层称之为***文档流***，文档流是网页的基础我们所创建的元素，默认都是在文档流中进行排列对于元素主要有两个状态在文档流中不再文档流中（脱离文档流）元素在文档文档流中的特点块元素块元素会在页面中独占一行（自上向下排列）默认宽度是父元素的全部(会把父元素撑满)默认高度是被子元素撑开行内元素不会独占一行，只占自身
复制链接

扫一扫