ＣＳＳ的简单学习（４）

最新推荐文章于 2023-04-25 22:19:49 发布

wqksoul

最新推荐文章于 2023-04-25 22:19:49 发布

阅读量166

点赞数

文章标签：学习 css html

本文链接：https://blog.csdn.net/wqksoul/article/details/128002788

版权

０１文档流

文档流（normal flow）

网页是一个多层的结构，css可以给每一层设置样式

最终我们看到的是最上面的一层

文档流是网页最底下的一层

元素分为两种状态：在文档流中;脱离文档流

之前将元素分成三类，块元素，行内元素，行内块元素

分别具有一些特点，这些特点都是元素在文档流中的特点

块元素：

不会独占一行，宽是父元素内容区宽度，高是被内容撑开的

行内元素：

不会独占一行，宽高是被内容撑开的，不可以自定义宽高

行内块元素：

兼具块元素，行内元素的特点

注意：

1、一旦元素脱离文档流，，以上分类的特点都不复存在

2、我们创建的元素默认是在文档流

０２盒子模型＋边距

布局相关样式

文档流默认的布局，浮动，定位，弹性盒子等

盒模型、盒子模型、框模式（box model）

网页中也有很多元素，将各种元素摆放在合适的位置

盒模型将网页所有元素的形状都统一了，你在布局时，只需要考虑到元素的

大小即可

盒模型

内容区 content

内边距 padding

边框 border

外边距 margin

<!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>盒子模型</title>
    <style type="text/css">
    .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-width: 10px 20px 30px;
            /*  border-width: 10px 20px 30px 40px; */
            border-color: green;
            border-style: solid;
            border-color: transparent transparent transparent orange;
        }
    </style> 
</head>
<body>
    <div class="box"></div>
</body>
</html>

边框

边框（border）边框用来隔开盒子内部和盒子外部

设置边框，三个要素，缺一不可

边框的宽度 border-width

1、可以设置多个值，以空格隔开即可

如果设置了4个值，那值的顺序为上，右，下，左

如果设置了3个值，那值得顺序为上，左右，下

如果设置了1个值，那值的顺序为上下左右

2、单独设置某一边的宽度

border-top-width 上边

border-bottom-width 下边

border-left-width 左边

border-right-width 右边

3、border-width 默认值黑色

边框的颜色 border-color

1、可以设置多个值

用法规则和border-width一样

2、也可以单独设置一边的颜色

border-top-color

border-bottm-color

border-left-color

border-right-color

3、小箭头的用法

border-color:... transparent ... transparent ... transparent ...

"..."输入颜色，red，green等

写在在第一个"..."箭头向下;写在第二个，箭头向左，

写在第三个，箭头向上;写在第四个，箭头向右

4、border-color 默认值黑色

边框的样式 border-style

1、边框样式的种类

solid 实线

dotted 点状的虚线

dashed 虚线

double 双线

2、可以写多个样式

规则跟border-width一样

3、单独设置某一边样式

border-XXX-style:;

XXX:top、right、bottom、left

4、border-style 默认值是none

-->

<!--

边框 border

1、语法： border: 大小颜色样式;

三要素顺序是无所谓

2、单独设置某一边的边框

border-top

border-right

border-bottom

border-left

3、 border-bottom: none; 不要某边边框

1:border-width 默认值一般是3px

使用border-width可以分别指定四个边框的宽度

除了border-width，CSS中还提供了四个border-xxx-width

xxx的值可能是top right bottom left

专门用来设置指定边的宽度

2:border-color 设置边框的颜色默认值是黑色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-xxx-color

3:border-style

* 设置边框的样式

* 可选值：

* none，默认值，没有边框

* solid 实线

double 双线

dashed [dæʃt] 虚线

* dotted ['dɔtid] 点状边框

* style也可以分别指定四个边的边框样式，规则和width一致，

* 同时它也提供border-xxx-style四个样式，来分别设置四个边

* border

* - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

* - 而且没有任何的顺序要求

* - border一指定就是同时指定四个边不能分别指定

* border-top border-right border-bottom border-left

* 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

０３内边距

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px green solid;
        /* padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-left: 30px; */
        padding: 10px 40px;
      }
     .box2 {
        width: 100%;
        height: 100%;
        background-color: red;
      }
      *{
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <!-- <div class="box1">
      <div class="box2"></div>
    </div> -->
    <ul>
      <li>11</li>
      <li>11</li>
      <li>11</li>
    </ul>
  </body>
</html>

内边距 padding 是边框和内容区之间的距离

1、可以单独设置某一边的内边距

padding-top:;

padding-right: ;

padding-bottom:;

padding-left:;

2、内边距padding简写

可以写多个值，规则跟border-width是一样

０４外边距

<!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>外边距</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* margin-top:-50px ; */
            /* margin-left: -50px; */
            /* margin-bottom: 50px; */
            /* margin-right: -5000px; */
            margin: 40px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
     </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

外边距 margin

不影响盒子的大小，可以改变盒子的位置

margin-top 设置元素上外边距，如果正值，元素向下移动，如果负值，元素向上移动

margin-right 设置元素右外边距，没有任何效果

margin-bottom 设置元素下外边距，值为正值，别的元素向下移动，值为负值，别的元素向上移动

margin-left 设置元素左外边距，值为正值，元素向右；值为负值，元素向左

margin简写

margin可以设置多个值，规则跟padding一样

０５水平布局

<!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>
      .outer {
        width: 600px;
        height: 200px;
        border: 10px red solid;
      }
    .inner {
        width:100px;
        height: 100px;
        background-color: #bfa;
        border: 20px solid green;
        /* margin-left:auto ;
        margin-right:auto; */
        margin: 0 auto;
        padding: 0;

      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>