zoukankan html css js c++ java

前端CSS(补充)

一. 盒子模型

margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)
border:盒子的包装厚度(边框)
padding:内部物体与盒子之间距离(文本与边框之间的距离)
content:物体大小(文本内容)

补充知识:去除ul中自带的样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            padding-left: 0;
        }
    </style>
</head>
<body>

<ul>
    <li>书籍1</li>
    <li>书籍2</li>
 
</ul>
</body>
</html>

相对浏览器页面margin设置为0 (可简写 margin:0;)

body {
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 0;
        }

margin参数的个数不同分别对应的位置:

             20px;
            height: 20px;
            border: 3px solid black;
            margin: 10px 20px 30px 40px; /* !*上右下左*!*/

           /*第一个参数是上下，第二个参数是左右, auto水平居中*/
             margin: 10px 20px;

             margin: 20px  auto;

padding参数的个数不同分别对应的位置 (与margin相同):

             200px;
            height: 200px;
            border: 3px solid green;

            /*padding-top: 50px;*/
            padding: 10px 20px 30px 40px;   /*!*上右下左*!*/
            /*第一个参数是上下，第二个参数是左右*/

             padding: 10px 20px;

二. 浮动

1.float

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

 .c1 {
             50px;
            height: 50px;
            background-color: red;
         
            float: left;
        }
 .c2 {
             50px;
            height: 50px;
            background-color: green;
      
            float: left;
        }

可用left,right,none三种取值, 存在父标签塌陷问题(边框内无任何内容):

2.浮动页面布局(2,8开):

        body {
            margin: 0;
        }
        .c1 {
            height: 1000px;
             20%;
            float: left;
            background-color: red;
        }
        .c2 {
            height: 1000px;
             80%;
            float: right;
            background-color: green;
        }

3.清除浮动的副作用（父标签塌陷问题）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            border: 3px solid black;

        }
        .c2 {
             80px;
            height: 80px;
            background-color: red;
            float: left;
        }
        .c3 {
             80px;
            height: 80px;
            background-color: green;
            float: left;
        }
        /*.c4 {*/
            /*clear: left;  !*规定标签的左边不能有浮动的元素*!*/
        /*}*/
        .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }
   .c4 {
             40px;
            height: 40px;
            background-color: tomato;
        }
    </style>
</head>
<body>
<div class="c1 clearfix">
    <span class="c4">span</span>
    <div class="c2"></div>
    <div class="c3"></div>

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

三.overflow溢出属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 50px;
             50px;
            border: 3px solid red;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div>
    fasdfhsfhdlhksdfsdklafklsdafkjsdakfjklsjdafklsjdafkljsdaklfj;skldajfksjdaf
</div>
</body>
</html>

圆形头像示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: darkgray;
        }
        .c1 {
             80px;
            height: 80px;
            border: 5px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        img {
             100%;
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="3.png" alt="">
</div>
</body>
</html>

效果:

四.定位

相对定位(relative): 相对于标签本身原来的位置

    100px;
            height: 100px;
            background-color: red;
            top: 100px;
            left: 100px;
            position: relative;       (static, 默认值，无定位)

绝对定位(absolute): 相对于已经定位过的父标签(小米购物车)

            height: 200px;
             400px;
            background-color: pink;
            position: absolute;
            top: 50px;
            left: 100px;

固定定位(fix): 相对于浏览器窗口固定在某一个位置 (回到顶部)

            border: 3px solid black;
             80px;
            height: 80px;
            position: fixed;
            right: 20px;
            bottom: 20px;

是否脱离文档流:
脱离文档流:
1.浮动
2.绝对定位
3.固定定位

不脱离文档流:
1.相对定位

五. 模态框(z-index): 设置对象的层叠顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2 {
            background-color: rgba(128,128,128,0.4);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999;
        }
        .c3 {
             200px;
            height: 50px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top: -25px;
            margin-left: -100px;
        }
    </style>
</head>
<body>
<div class="c1">的大数据科技科技手段</div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

六.透明度参数的区别 (rbga第4个参数是文本内容的透明度,opacity是背景的透明度):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
             200px;
            height: 50px;
            background-color: rgba(128,128,128,0.3);
        }
        .c2 {
            opacity: 0.3;
        }
    </style>
</head>
<body>
<div class="c1">fjskdafdsfklskdfl</div>
<div class="c2">fjksdjfkjdsfjklsdf;lkdsf</div>
</body>
</html>

效果:

七 . cnblog页面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="3.png" alt="">
       </div>
       <div class="blog-title">
           <p>Hansome的博客</p>
       </div>
       <div class="blog-info">
           <p>这个人很懒,什么都没留下</p>
       </div>
       <div class="blog-link">
           <ul>
               <li><a href="">about me </a></li>
               <li><a href=""> 微博</a></li>
               <li><a href="">微信公众号</a></li>
           </ul>
       </div>
       <div class="blog-tag">
           <ul>
               <li><a href="">#Python </a></li>
               <li><a href="">#JAVA </a></li>
               <li><a href="">#GOlang </a></li>
           </ul>
       </div>

   </div>
   <div class="blog-right">

       <div class="article-list">
           <div class="article-title">
               <span class="title">寻隐者不遇</span>
                <span class="date">2019-5-30</span>
            </div>
             <div  class="article-body">
                <p>松下问童子,言师采药去,只在此山中,云深不知处</p>
             </div>
             <div class="article-bottom">
                 <span>#Python</span>
                 <span>#Javascript</span>
             </div>
        </div>
        <div class="article-list">
           <div class="article-title">
               <span class="title">悯农</span>
                <span class="date">2019-5-31</span>
            </div>
             <div  class="article-body">
                <p>锄禾日当午,汗滴禾下土,谁知盘中餐,粒粒皆辛苦</p>
             </div>
             <div class="article-bottom">
                 <span>#Python </span>
                 <span>#Javascript</span>
             </div>
        </div>
   </div>

</body>
</html>

css代码:

/*这是博客页面的css样式表*/

/*通用样式*/
body {
    margin: 0;
    background-color: azure;
}
a {text-decoration: none;}
ul {
    list-style-type: none;
    padding-left:0 ;
}
.clearfix:after {
    content: "";
    clear:   both;
    display: block;
}
/*博客左侧样式*/
.blog-left {
    float:left;
    position:fixed;
    left:0;
     20%;
    height:100%;
    background-color: cadetblue;
}
.blog-avatar{
     150px;
    height:150px;
    border:5px solid white;
    border-radius: 50%;
    margin: 20px auto;
    overflow: hidden;
}
.blog-avatar img {  100%;}

.blog-title,.blog-info{
    color:darkgray;
    text-align: center;
}

.blog-link a,.blog-tag a {
    color: darkgray;
}

.blog-link a:hover,.blog-tag a:hover {
    color: white;
}

.blog-link ul,.blog-tag ul {
    text-align: center;
    margin-top: 60px;
}

/*博客右侧样式*/
.blog-right {
    float: right;
     80%;
}

.article-list {
    background-color: white;
    margin: 20px 40px 20px 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
.article-title {
    border-left: 5px solid red;
}

.title {
    font-size: 36px;
    margin-left: 10px;
}
.date {
    float: right;
    font-size: 18px;
    margin-top: 20px;
    margin-right: 10px;
}

.article-body {
    border-bottom: 1px solid black;
}

.article-body p {
    font-size: 18px;
    text-indent: 18px;
}
.article-bottom span{
    margin-left: 20px;
}

效果:

补充:

显示与隐藏的三种方式:

一. display:
值为none时，盒子会被隐藏，且不在页面中占位,底下的盒子会顶上来
值为block时,盒子会显示
因为none与block之间没有一个过渡态,所以不会呈现一个动画效果

二. opacity:

值为0~1，控制盒子的透明度，但是消失后，在页面中占位

.box4 {
/*背景颜色不能操作文本*/
/*background-color: rgba(0,0,0,0);*/
opacity: 0;
/*过度效果*/
transition: 1s;
}
.box3:hover ~ .box4 {
opacity: 1;
}
.box4:hover {
opacity: 1;
}

三. 支持动画渐变过程,也不占位
.box6 {
0;
height: 0;
/*超出content以外的内容如何处理：hidden隐藏*/
overflow: hidden;
transition: 1s 0s ease;
/*过渡得我属性个数可以自定义*/
/*transition-property: width, background-color, height;*/
transition-property: all;
}
.box5:hover ~ .box6 {
200px;
height: 200px;
background-color: pink;
}
.box6:hover {
200px;
height: 200px;
background-color: pink;

盒子阴影

.box {
200px;
height: 200px;
background-color: orange;
margin: 200px auto;
/*opacity: 0;*/
transition: .3s;
}

.box {
/*x轴偏移 y轴偏移虚化程度阴影宽度阴影颜色*/
/*box-shadow: -300px 0 10px 0 red, 300px 0 10px 0 blue;*/
}
.box:hover {
margin-top: 195px;
box-shadow: 0 5px 10px 0 #333;
}

三大定位:
一.固定定位:

.box {
260px;
height: 420px;
background-color: orange;
}
/*固定定位
1、定位属性值：fixed
2、在页面中不再占位(浮起来了)
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、固定定位的参考系是页面窗口(不是页面中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上
*/
.box {
position: fixed;
/*left: 10px;*/
right: 10px;
/*bottom: 50%;*/
top: calc(50% - 210px);
}

二.绝对定位:

<style>
.sup {
180px;
height: 260px;
background-color: orange;
margin: 100px auto;
}
.sub {
50px;
height: 80px;
background-color: red;
}

/*绝对定位：
1、定位属性值：absolute
2、在页面中不再占位(浮起来了)，就无法继承父级的宽度(必须自己自定义宽度)
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、绝对定位的参考系是最近的定位父级(不是父级中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上
6、当父级定位了，子级参照父级定位，又可以重新获取父级宽度(也可以在计算中拿到父级高度)
*/
.sub {
position: absolute;
left: calc(50% - 25px);
right: 0;
bottom: 0;
top: calc(50% - 40px);
}
/*需求：
1）父级需要定位 - 辅助自己绝对定位，作为自己绝对定位的参考系
2）父级定位了，但是不能影响自身原有布局 - 虽然定位，但是不浮起来
结论：相对定位 => 父相子绝
*/
.sup {
/*父级相对定位的目的：1）不影响自身布局 2）辅助自己绝对定位布局*/
position: relative;
}

三.相对定位
.box {
300px;
height: 300px;
background-color: orange;
margin: 0 auto;
}
h1 {
margin: 0;
}
/*相对定位：
1、定位属性值：relative
2、在页面中依旧占位，完全保留之前的所有布局
3、一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
4、相对定位的参考系是自身原有位置(当前位置)(不是自身中的哪一点，而是四边参照四边)
5、左右同时存在，取左；同理上下取上，布局移动后，也不影响自身原有位置(兄弟布局也不会变化)
作用：辅助于子级的绝对定位布局，一般不用于自身布局
*/
.box {
position: relative;
/*left: -10px;*/
bottom: 20px;
top: 400px;
}

查看全文

相关阅读:
A JavaScript Tree component which implements the J.Q.Walker II layout algorithm
决策树Ecotree（转）
Elasticsearch中关于transform的一个问题分析
 转发sqlserver http://www.cnblogs.com/jiazengtao/archive/2013/05/29/3102803.html
时间GMT
C#去掉json字符串中的换行符
 收藏的好的Jquery+css3
存储过程中日期的转换
 关于头文件
 关于头文件

原文地址：https://www.cnblogs.com/sima-3/p/10951948.html