CSS收尾

目录

• 内容概要
• 边框
• 溢出
• display
  • 盒子模型
• 浮动
• 定位
• z-index

内容概要

• 边框
• 盒子模型
• 浮动定位
• 补充说明
• 简易博客页面搭建

边框

        div {
            /*边框的宽度  上边的边框*/
            border-top-width: 10px;
            /*边框的颜色*/
            border-top-color: black;
            /*边框的类型*/
            border-top-style: solid;

            border-left-width: 10px;
            border-left-color: blueviolet;
            border-left-style: dashed;

            border-bottom-width: 10px;
            border-bottom-color: pink;
            border-bottom-style: dotted;

            border-right-width: 10px;
            border-right-color: blue;
            border-right-style: double ;

        }
    /*    相同的可以简写*/
        div{
            border-top: black solid 10px;
            border-right: blue dashed 10px;
            border-left: blueviolet dotted 10px;
            border-bottom: pink dotted 10px;
        }

    /*    如果四个边框相同*/
        div {
            border: blueviolet solid 10px;
        }

        .c1 {
            width: 200px;
            height: 200px;
            overflow: hidden;
            border-radius: 200px;
            margin: auto 500px;

        }
        div img {
            max-width: 100%;
        }
html

    <div class="c1">
        <img src="https://img0.baidu.com/it/u=245015728,700120678&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=668" alt="">
    </div>

溢出

       .c1 {
             width: 200px;
            height: 200px;
            /*我只显示我能显示的*/
            overflow: hidden;
        }

        /*  我可以让你拖动  */
            overflow: auto;

        /*    我不管了 溢出就溢出吧*/
            overflow: visible;

display

"""行内标签是无法设置长宽 只有块儿级标签可以设置"""

display:none  彻彻底底的隐藏标签(页面上是不会显示的)

    <style>
      #p1 {
         display: none;  隐藏
      }
      #p2{
          visibility: hidden;  隐藏
      }
    </style>

html
    <p id="p1">无外乎呼呼</p>
    <p id="p2">五呀呀呀</p>
    <p id="p3">五嘿嘿嘿</p>

盒子模型

我们可以将标签看成是一个将盒子(快递盒子)

1.快递包里面的实际物体           content(内容)
2.物体与内部盒子墙的距离    padding(内边距、内填充)
3.快递盒的厚度                  border(边框)
4.快递盒之间的距离              margin(外边框)

padding:20px;   作用于上下左右
padding: 20px 40px;  上下    左右
padding: 10px 20px 30px; 上  左右   下
padding: 10px 20px 30px 40px  上 右 下 左

margin 与padding 用法一致

针对标签的嵌套 水平方向可以居中

margin：0 auto；

浮动

浮动就是用来做页面布局的

浮动的现象
float:left/right
浮动带来的影响
	浮动的元素是正常脱离文档流的 会造成父标签塌陷
如何解决浮动的影响
	clear
解决浮动带来的影响中级方法
先提前写好样式类
	.clearfix:after{
        content:'';
        display: block;
        clear: both;
    }
谁塌陷了 就给谁添加clearfix样式可以了

.d1 {
          width: 250px;
          height: 250px;
          background: blueviolet;
          float: left;
      }
      .d2 {
          width: 10%;
          height: 10%;
          background: red;
          float: right;
          /*position: fixed;*/
          /*margin-left: 100%;*/

      }
      .d3 img{
          height: 200px;
      }
      .d4 {
          width: 100%;
          background: black;
      }
    </style>

    <div class="d4">
            <div class="d1"></div>
            <div class="d2">
                <p>dsad</p>
            </div>
            <div class="d3">
            <img src="https://img2.baidu.com/it/u=4272362473,744265067&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
            
            </div>
    </div>

定位

标签在默认的情况下都是无法通过定位的参数来移动

针对定位有四种状态

1.static 静态(标签默认的状态 无法移动)

2.relative相对定位(基于标签原来的位置)

3.absolute绝对定位(基于某个定位过的父标签做定位)

4.fixed固定定位(基于浏览器窗口固定不动)

 .d1 {
     width: 250px;
     height: 250px;
     background: blueviolet;
     position: relative;
 }
 .d2 {
     width: 10%;
     height: 10%;
     background: red;
     position: absolute;
     top: 100px;
     left: 100px;

 }
.d3 img{
    height: 200px;
    position: fixed;
    right: 100px;
    bottom: 200px;
}

    
html
<div class="d4">
    <div class="d1"></div>
     <div class="d2">
      	<p>dsad</p>
     </div>
    <div class="d3">
     <img src="https://img2.baidu.com/it/u=4272362473,744265067&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
            
    </div>
</div>

z-index

.d1 {
      width: 200px;
      height: 200px;
    float: left;
      background: blueviolet;
      position: relative;
      z-index: 100;
}
.d2 {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    z-index: 100;
    float: left;
 }

.d1 {
      width: 200px;
      height: 200px;
    float: left;
      background: blueviolet;
      position: relative;
      z-index: 100;
}
.d2 {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    float: left;
    z-index: 99;
 }

z-index 就是让你填写 z轴的坐标

也可以认为让这个标签的浮动高度