css属性 

背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/
支持简写
background:#ffffff url('1.png') no-repeat right top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
参考链接：http://www.w3school.com.cn
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 100px;
            width:100px;
            color: red;
            background-color: green;
        }   
        .c2 {
            height: 600px;
            width: 600px;
            background: url("james.png") no-repeat center bottom;
        }
    </style>
</head>
<body>

<div class="c1">div标签</div>
<div class="c2"></div>

</body>
</html>
css背景
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--名字以及内容-->
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--告诉IE以最高级模式渲染文档-->
    <title>背景固定</title>
    <style>
        * {margin: 0;}
        .box {
            width:100%;
            height: 500px;
            background: url("嗯嗯.jpg") no-repeat center center fixed;
            /*背景图片，不重复，中心位置，固定*/
        }   
        .d1 {
            height:500px;
            background: tomato;
        }
        .d2 {
            height: 500px;
            background: steelblue;
        }
        .d3 {
            height: 500px;
            background:mediumorchid ;
        }
    </style>
</head>
<body>

<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>

</body>
</html>
背景固定
边框
边框属性： 
    border-width——大小
    border-style——样式
    border-color——颜色
{border: 2px solid red;} 简写
边框样式：
    none—无边框
    dotted—点状虚线边框
    dashed—矩形虚线边框
    solid—实线边框
border-radius  50%
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 100px;
            width: 100px;
            border: 5px dashed red;
        }   /*矩形虚线边框*/
        .c2 {
            width: 100%;
            height: 50px;
            border-left:10px solid red;
        }   /*在左边添加实线边框*/
        .c3 {
            height: 100px;
            width: 100px;
            background-color: red;
            border-radius: 50%;
        }   /*画一个圆*/
        .c3:hover {background-color: green}
        /*鼠标悬浮变色*/
        .c4 {
            height: 100px;
            width: 100px;
            background-color: red;
            border-radius: 10px;
        }   /*不到50可以画圆角边框*/
    </style>
</head>
<body>

<div class="c1"></div>
<hr>
<div class="c2"></div>
<hr>
<div class="c3"></div>
<div class="c4"></div>

</body>
</html>
边框示例
display属性：用于控制HTML元素的显示效果。
display:"none"——HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"——默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。块级元素，前后有换行符
display:"inline"——按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。内联元素，无换行，默认！
display:"inline-block"——使元素同时具有行内元素和块级元素的特点。
display:"none"与visibility:hidden的区别：
    visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
    display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 100px;
            width: 200px;
            background-color: red;
            border: 1px solid black;
            /*display: none;*/   /*隐藏但不继续占用空间*/
            display: inline-block;   /*兼具行内元素和块级元素*/
             /*visibility:hidden*/   /*隐藏但是仍然占用空间*/
        }
        .c2 {
            height: 100px;
            width: 200px;
            background-color: green;
            border: 1px solid black;
            display: block;  /*默认占满宽度，设置宽后间距补齐*/
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>

<span class="c2"></span>
<span class="c2" style="display: none"></span>
<span class="c2"></span>

</body>
</html>
display—显示效果
css盒子模型
margin(外边距)：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
border(边框)：围绕在内边距和内容外的边框。
padding(内边距)：用于控制内容与边框之间的距离。
content(内容)：盒子的内容，显示文本和图像。

 

 

margin外间距
margin-test {
      margin-top:5px;
      margin-right:10px;
      margin-bottom:15px;
      margin-left:20px;
}
简写： {margin: 5px 10px 15px 20px;}
顺序：上右下左
常见居中：{margin: 0 auto;}
padding内填充
简写：{ padding: 5px 10px 15px 20px;}
顺序：上右下左(顺时针)
padding的常用简写方式：
    提供一个，用于四边；
    提供两个，第一个用于上－下，第二个用于左－右；
    如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
    提供四个参数值，将按上－右－下－左的顺序作用于四边；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin: 0;}
        .c1 {
            height: 200px;
            width: 300px;
            background-color: red;
            border: 10px dashed yellow;
            padding: 20px;
            /*padding内间距，内容到边框的距离*/
            margin: 100px;
            /*margin元素与元素之间的距离*/
        }
        .c4, .c5 {
            height: 200px;
            width: 400px;
            border: 1px solid black;
        }
        .c4 {
            margin-bottom: 1px;
        }
        .c5 {
            margin-top: 100px;
        }   /*c4和c5两个相邻，c4下方外间距和c5上方外间距是同一段距离，取两个之间最大的外间距*/
    </style>
</head>
<body>

<div class="c1">今天不开心没有关系，反正明天也不会好过</div>
<div class="c1">今天不开心没有关系，反正明天也不会好过</div>
<hr>

<div class="c4"></div>
<div class="c5"></div>

<span class="c2">点我啊</span>

</body>
</html>
css盒子模型
           float
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
浮动的两个特点：
    浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。(浮动即上天，不存在地面上了，但是会遮盖)
三种取值：
left：向左浮动
right：向右浮动
none：默认值，不浮动
           clear
clear属性规定元素的哪一侧不允许其他浮动元素。
left：在左侧不允许浮动元素。
right：在右侧不允许浮动元素。
both：在左右两侧均不允许浮动元素。
none：默认值。允许浮动元素出现在两侧。
inherit：规定应该从父元素继承 clear 属性的值。
clear属性只会对自身起作用，消除自身因为浮动影响显示的效果，而不会影响其他元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin: 0;}
        .left {
            width: 80%;
            height: 999px;
            background-color: deepskyblue;
            float: left;
        }
        .right {
            width: 20%;
            height: 999px;
            background-color: deeppink;
            float: right;
        }
    </style>
</head>
<body>

<div class="left"></div>
<div class="right"></div>

</body>
</html>
float简单示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin: 0;}
        .c1 {
            border: 1px solid black;
        }
        .c2 {
            height: 100px;
            width: 200px;
            background-color: red;
            border:1px solid black;
        }
        .c3 {
            width: 100%;
            height:200px;
            background-color: deepskyblue;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>

<div class="c1">
    <div class="c2 left"></div>
    <div class="c2 right"></div>
</div>
<div class="c3"></div>

</body>
</html>
float副作用：浮动的元素会遮盖下一个元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin: 0;}
        .c1 {
            border: 1px solid black;
        }
        .c2 {
            height: 100px;
            width: 200px;
            background-color: red;
            border:1px solid black;
        }
        .c3 {
            width: 100%;
            height:200px;
            background-color: deepskyblue;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .clearfix:after {
            content:'';
            display:block;
            clear: both;
        }   /*就是在浮动的元素后面加空内容，指定为block，即块级元素，下一个元素换行，并且不能有浮动*/
    </style>
</head>
<body>

<div class="c1 clearfix">
    <div class="c2 left"></div>
    <div class="c2 right"></div>
    <!--约定俗成的用clearfix表示清除浮动-->
</div>
<div class="c3"></div>

</body>
</html>
解决方式
overflow溢出
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width:200px;
            height: 50px;
            border: 3px solid black;
            /*overflow: hidden;   !*超出范围的会隐藏*!*/
            /*overflow: visible;  !*默认，超出的也会显示，直接显示*!*/
            /*overflow: scroll; !*多出的内容会以滚动条的形式查看*!*/
            /*overflow: auto;  !*超出的内容滚动条形式，只有上下滚动条*!*/
        }
        .avatar {
            height: 120px;  /*头像的高*/
            width: 120px;  /*头像的宽*/
            border:4px solid green;  /*头像的边框*/
            border-radius: 50%;  /*设置成圆头像*/
            overflow: hidden;  /*多余的部分隐藏*/
        }
        .avatar>img {
            width: 100%;
        }   /*头像下面的图片全部在头像里*/
    </style>
</head>
<body>

<div class="c1">
    断剑重铸之日，骑士归来之时。断剑重铸之日，骑士归来之时。断剑重铸之日，骑士归来之时。
</div>
<hr>
<div class="avatar">
    <img src="james.png" alt="出现了一个未知的错误">
</div>

</body>
</html>
文字和头像示例
定位  position
static：默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
reletive(相对定位)：该元素相对于自己原有位置，偏移一定距离。相对的是自己。
position：relative的一个主要用法：方便绝对定位元素找到参照物
absolute(绝对定位)：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，
　　　　　　　　　　　直到找到body位置为止。设置了绝对定位之后，它的最初的位置就会轮空，相当于改变了它的初始位置，然后相对于父元素的位置移动。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题
　　　　，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin:0;}
        .c1, .c2 {
            height:200px;
            width:200px;
        }   /*给c1c2统一高宽*/
        .c1 {
            background-color: red;
        }   /*给c1设置背景颜色*/
        .c2 {
            background: green;  /*c2背景颜色*/
            position: relative;  /*c2定义一个相对定位*/
            left:400px;  /*c2相对于自己在左边空400px，即向右移动400px*/
            top: -200px;  /*相对于自己现在的位置上边空-200px，即向上移动200px*/
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>

</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin:0;}
        .c1,.c3,.c4{
            height: 200px;
            width: 200px;
        }  /*给c134分别设置宽高，c2为c3的父元素*/
        .c1 {
            background-color: deepskyblue;
        }
        .c2 {
            position:relative;
            left:200px;
            top:200px;

        }   /*给c2定义相对定位，然后相对于自己的位置向右移动200px，即c3向右移动200px*/
        .c3 {
            background-color: deeppink;
            position:absolute;  /*给c3设置绝对定位，设置成功那一刻开始，c3的原始位置就空了，c4会自动往上移动*/
            top:200px;   /*c3相对于父元素的位置向下移动200px*/
            left: 200px;  /*依据自己现在位置向右移动200px*/
        }   /*☆只有父元素有相对定位时，它的子元素才可以设置绝对定位，且子元素的移动依据父元素的位置移动，随后根据自己位置移动，取而代之？*/
        .c4 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
    <div class="c3"></div>
</div>
<div class="c4"></div>

</body>
</html>
绝对定位
fixed固定
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 
注意点：一个元素若设置了position:absolute|fixed;则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，
 　　　　另一个是“定位流”。但是relative却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin: 0;}
        .c1 {
            border:3px solid black;  /*返回顶部的边框*/
            width:80px;   /*按钮的宽*/
            height:40px;   /*按钮的高*/
            line-height: 40px;  /*将行高设置成标签的高度可以实现垂直居中*/
            text-align: center;  /*返回顶部存在的位置*/
            position: fixed;  /*固定位置*/
            bottom: 50px;   /*距离最下面50px*/
            right: 50px;   /*距离最右边50px*/
        }
    </style>
</head>
<body>

<div class="c1">返回顶部</div>

</body>
</html>
返回顶部按钮固定样式
z-index
{z-index: 999;}
设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效。
opacity：用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            position:fixed;  /*把盖上的固定*/
            top:0;
            right:0;
            bottom: 0;
            left:0;  /*全覆盖*/
            background-color: rgba(0,0,0,0.4);
            z-index:99;  /*层叠顺序值,小的在下面*/
            /*opacity:0.4 也是清晰度为0.4*/
        }
        .modal {
            background-color: white;  /*弹窗的背景色*/
            height: 300px;   /*弹窗高*/
            width: 400px;   /*弹窗宽*/
            z-index:1000;   /*弹窗的层叠顺序值*/
            position:absolute;   /*弹窗相对定位*/
            top:50%;
            left:50%;
            margin-top:-150px;
            margin-left:-200px;
        }
    </style>
</head>
<body>

<div>打工是不可能打工的，这辈子都不可能打工的，做生意又不会，就是只有偷东西才可以维持的了生活这样子。</div>

<div class="cover"></div>
<div class="modal">
    <form action="">
        <label>用户名：
            <p><input type="text"></p>
        </label>
        <label>密码
            <p><input type="password"></p>
        </label>
        <label>提交
            <p><input type="submit"></p>
        </label>
    </form>
</div>
</body>
</html>
模态框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 100px;
            width: 100%;
            color: red;
            background-color: rgba(0,0,0,0.4);
        }   /*rgba第四位调透明度*/
        .c2 {
            height: 100px;
            width:100%;
            color:red;
            background-color: rgb(0,0,0);
            opacity: 0.4;
        }    /*opacity调透明度*/
    </style>
</head>
<body>
<div class="c1">
    打工是不可能打工的，这辈子都不可能打工的，做生意又不会，就是只有偷东西才可以维持的了生活这样子。
</div>
<div class="c2">
    打工是不可能打工的，这辈子都不可能打工的，做生意又不会，就是只有偷东西才可以维持的了生活这样子。
</div>
</body>
</html>
opacity和rgba的区别
opacity和rgba区别：
    opacity是整体的透明度进行调整
    rgba仅仅是调整的背景色

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            width:100%;
            height: 40px;
            background-color: #3d3d3d;
        }
        .c2 {
            width:80%;
            height:40px;
            margin: 0 auto;
        }
        .c3 {
            float: right;
            line-height: 40px;
            color: #eeeeee;
            padding:0 15px;
            position:relative;
        }
        .c3:hover {
            background-color: #eeeeee;
            color: orange;
        }
        .c3:hover>.c4 {
            display:block;
        }
        .c4 {
            width: 240px;
            height: 120px;
            background-color: #2b99ff;
            position:absolute;
            right:0;
            top:40px;
            display:none;
        }
    </style>
</head>
<body>

<div class="c1">
    <div class="c2">
        <div class="c3">购物车
            <div class="c4">空空如也</div>
        </div>
    </div>
</div>

</body>
</html>
购物车定位示例

 

border-radius: 50%
posted @ 2018-10-11 15:48  .why  阅读(247)  评论(0)    收藏  举报
Live2D