css边框，盒子模型、浮动、定位

1|0边框，盒子模型、浮动、定位

1|1一、边框

 
border-width  : 边框宽度
border-style  : 边框样式
    1.solid  实线
    2.none   无边框
    3.dotted  点状虚线边框
    4.dashed  矩形虚线边框
border-color  : 边框颜色
通常情况下这样写：
  border: 2px solid cornflowerblue;
圆角边框：
  border-radius: 50%;

1|2二、display属性

 
用于HTML元素显示效果
行内标签是无法设置长宽的，只有块级可以设置
display:none;可以隐藏某个元素，隐藏的元素不会占用任何空间
visibility:hidden;可以隐藏某个元素，但是隐藏的元素会占用空间，会任然影响布局   

display:block; 默认占满整个页面的宽度，如果设置了宽度，则会用margin
填充剩下的部分：
display:inline; 按行内元素设置，此时再设置元素的width,heigth
display:inline-block; 使元素具有 行内元素和块级元素的特点

1|3三、背景案例

 
background-attachment:fixed;属性
background-attachment设置背景图像是否固定或者随着页面的其他部分滚动
属性值：
fixed:背景图片不会随着页面的滚动而滚动
scroll：背景的图片随着页面的滚动而滚动，这个属性是默认的
local:背景图片会随着元素内容的滚动而滚动
inherit:指定background-attachment的设置应该从父元素继承

1|4四、盒子模型

 
盒子模型：盒模型，框模型
css将页面汇总所有的元素的都设置为一个个矩形的盒子。将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置，每一个盒子，都有以下几个部分:
内容区(content):所有的元素
边框(border):设置边框
内边距(padding):指的是盒子内容和边框之间的距离
外边框(margin):指的是盒子和盒子之间的距离

img

1.边框（border） ：元素设置边框
可以分别设置四个边框的宽度：
设置四个值：  上 右 下 左
设置三个值：  上 左右 下
设置两个值：  上下 左右
设置一个值：  上下左右
border-xxx-width:可以设置某一个边框的宽度
一般这样写：border: 2px solid cornflowerblue;

2.内边距（padding）：指的是盒子的内容和边框之间的距离
一共有四个方向：
   1.padding-top
   2.padding-right
   3.padding-left
   4.padding-bottom
padding:10px 20px 10px 20px;
设置的顺序也是：上右下左

3.外边距(margin):决定当前盒子和其他盒子的距离(盒子的可见框大小)
外边距不会影响可见框的大小，而是影响盒子的位置
盒子有四个方向的外边距：
margin-top:上边距，也可以设置负值
margin-right:右边距，一般情况下没有效果
margin-bottom:下外边距，设置一个正值，其下面的元素会向下移动，挤别人
margin-left:左外边距，设置正值，元素向右移动   
margin:10px 20px 10px 20px;
设置的顺序也是：上右下左
也可以设置：margin:0 auto;

img

1|5五、浮动

 
1.浮动
   在我们布局的时候用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置
2.浮动原理
    使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动的边缘
3.属性
    left  ------>>   元素向左浮动
    right  ------>>   元素向右浮动
    none  ------>>   默认值。元素不浮动，并会显示在其在文本中出现的位置。
    inherit  ------>>   规定应该从父元素继承 float 属性的值。
4.浮动带来的影响
    浮动的元素是脱离正常的文档流，会造成父标签塌陷
5.解决浮动带来的影响的解决方法
  .clearfix:after{
      content:'';
      display:block;
      clear:both;
  }
哪个塌陷了给哪个添加上就好了

1|6六、溢出属性

 
overflow:visible  默认值，内容不会被修剪，会呈现在元素框之外
overflow:hidden   内容会被修剪，并且其余内容是不可见的
overflow:scroll   内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
overflow:auto     内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容,右侧和底部都有滚动条
overflow:inherit   规定应该从父元素继承overflow属性的值
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

1|7七、定位

 
标签在默认情况下是无法通过定位的参数来移动
针对移动有四种方法：
1.static(静态)：标签默认的状态，无法定位移动
2.relative(相对定位)：基于标签原来的位置
3.absolute(绝对定位)：基于某个定位过的父标签做定位
4.fixed(固定定位)：基于浏览器固定不变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      .d1 {
        height: 100px;
        width: 100px;
        background-color: cornflowerblue;
        position: relative;
        left: 100px;
      }
      .d2 {
        height: 100px;
        width: 100px;
        background-color: crimson;
        position: relative;
        /*left: 100px;*/
      }
      .d3 {
        height: 100px;
        width: 100px;
        background-color: goldenrod;
        position: absolute;
        left: 300px;
      }
      .d1 {
        height: 100px;
        width: 100px;
        background-color: darkblue;
        position: fixed;
        right: 100px;
      }
  </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2">
      <div class="d3">
      </div>
    </div>
    <div class="d4"></div>
</body>
</html>

1|8八、z-index

 
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。

img

z-index无论设置多高都不起作用情况，这种情况发生的条件有三个：
1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。
eg:z-index层级不起作用，浮动会让z-index失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .cover{
        background-color: rgba(127,127,127,0.6);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 999;
      }
      .modal {
        height: 200px;
        width: 500px;
        background-color: white;
        z-index: 1000;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -350px;
        margin-top: -300px;
      }
    </style>
</head>
<body>
   <div>我在最底下</div>
   <div class="cover"></div>
   <div class="modal">
     <form action="">
       <p>username:<input type="text"></p>
       <p>password:<input type="password"></p>
     </form>
   </div>
</body>
</html>

image

1|9九、简易博客页面搭建

 
html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cnblog</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <div class="blog-left">
        <!--   头像     -->
        <div class="blog-avatar">
         <img src="1.png" alt="">
       </div>
<!--        标题-->
        <div class="blog-title">
            <span>这是一篇好书推荐</span>
        </div>
        <div class="blog-info">
            <span class="blog-info1">&nbsp;&nbsp;&nbsp;&nbsp;生活，其实是没有好坏的，那只是我们在短暂的几十年光景里的一种生命体验。每一寸光阴，都值得收藏。仅此一次的分分秒秒，我们应该怎么去对待？</span>
        </div>
        <div class="blog-link">
            <ul>
                <li><a href="">更多的美文</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">向我们投稿</a></li>
            </ul>
        </div>
        <div class="blog-course">
            <ul>
                <li><a href="">《小王子》</a></li>
                <li><a href="">《云边有个小卖部》</a></li>
                <li><a href="">《月亮与六便士》</a></li>
            </ul>
        </div>

    </div>

    <div class="blog-right">
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活着》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
            </div>
            <div class="article-end">
                <span>#探寻活着的意义</span>
                <span>#心态平和地面对人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活着》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
            </div>
            <div class="article-end">
                <span>#探寻活着的意义</span>
                <span>#心态平和地面对人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活着》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
            </div>
            <div class="article-end">
                <span>#探寻活着的意义</span>
                <span>#心态平和地面对人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活着》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
            </div>
            <div class="article-end">
                <span>#探寻活着的意义</span>
                <span>#心态平和地面对人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活着》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
            </div>
            <div class="article-end">
                <span>#探寻活着的意义</span>
                <span>#心态平和地面对人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活着》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>讲述了主人公福贵一生的荣与辱、起与落、盛与衰</span>
            </div>
            <div class="article-end">
                <span>#探寻活着的意义</span>
                <span>#心态平和地面对人生</span>
            </div>
        </div>



        </div>
    </div>
</body>
</html>

/*页面通用的样式*/
body{
    margin: 0;
    background-color: #eeeeee;
}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
    padding-left: 0;
}
/*首页左侧样式*/
.blog-left{
    float: left;
    width: 20%;
    height: 100%;
    background-color: cadetblue;
    position: fixed;
    left: 0;
    top: 0;
}
.blog-avatar{
    border: 4px solid aliceblue;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin: 37px ;
    /*margin: 18px auto;*/
    overflow: hidden;
}
/*使得图片放全*/
.blog-avatar img{
    max-width: 100%;
}
.blog-title ,.blog-info{
    color: black;
    text-align: center;
    margin: 37px auto;
}
.blog-info1 {
    border: 2px solid white;
    margin: 8px;
}
.blog-link,.blog-course{
    text-align: center;
    margin: 50px auto;
}
.blog-link ul>li,.blog-course ul>li{
    padding: 8px;
}
.blog-link a,.blog-course a{
    color: black;
    font-size: 16px;
}
.blog-link a:hover,.blog-course a:hover{
    color: darkgrey;
}
/*右侧样式*/
.blog-right{
    float: right;
    width: 80%;
    height: 100%;
}
.article-list{
    background-color: white;
    margin: 20px 50px 20px 20px;
    box-shadow: 20px 20px 20px rgba(0,0,0,0.5);
    border-left: 5px solid cadetblue;
}
.article-list .article-title .img1{
    /*float: left;*/
    max-width: 100%;
    border: 4px solid aliceblue;
    width: 120px;
    height: 120px;
    border-radius: 30%;
    margin: 17px ;
    /*margin: 18px auto;*/
    overflow: hidden;
    transition: all 0.2s linear;
}

.article-list .article-title .img1:hover{
    transform: scale(0.9);
    transition: all 0.2s linear;
}

.blog-right .article-list .article-title .title {
    float: right;
    font-size: 38px;
    margin-top: 8vh;
    padding-right: 90vh;
}

.blog-right .article-list .article-title .date {
    float: right;
    font-size: 18px;
    margin-top: -12vh;
    margin-right: 5vh;
    /*padding-right: 70vh;*/
}


/*.article-list .article-title .title{*/
/*    font-size: 38px;*/
/*    !*float: left;*!*/
/*    margin-top: 0;*/
/*    padding-left: 10px;*/
/*}*/


/*.article-list .article-title .date{*/
/*    font-size: 18px;*/
/*    font-weight: bolder;*/
/*    float: right;*/
/*    margin: 40px 40px;*/
/*}*/

.article-desc {
    font-size: 20px;
    font-weight: lighter;
    text-indent: 20px;
    border-bottom: 1px solid black;
}

.article-end {
    padding: 10px 10px 10px 20px;

}

image


__EOF__

本文作者：泡芙有点甜
本文链接：https://www.cnblogs.com/zx0524/p/16945790.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   小王应该在学习！  阅读(161)  评论(0)  编辑  收藏  举报
相关博文：
· 课程表数据录入，课程分类接口， 所有课程接口(过滤，排序)， 课程详情接口（没有章节和课时的内容），所有章节接口(按课程过滤)，课程列表前端，课程详情前端
· 表单标签补充及css层叠样式
· 前端css之边框，盒子模型，浮动，定位，补充。简易博客页面搭建
· CSS边框，定位 ，浮动，溢出 盒子模型
· 边框属性，display属性，css盒子模型，浮动、溢出、定位、z-index属性和建议博客页面搭建
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示