web前端-css | 盒子

https://www.cnblogs.com/qianguyihao/p/7297736.html

1.css层叠样式表三种引用方式

　　行内样式

　　内接样式

　　外接样式

    <link rel="stylesheet" href="">
    <style type="text/css">
        #h1{
            color: bisque;
        }
    </style>
</head>
<body>
<!--行内样式 : 块居中 块中文字居中-->
<h1 style="background-color: chocolate;width: 500px;margin: 0 auto;">hello</h1>
<h1 style="background-color: chocolate;width: 500px;text-align: center">hello</h1>
<!--内接样式需要选择器: 并且需要将style标签写到head标签中-->
<h1 id="h1">hello</h1>
<!--外接样式: 需要link标签,link标签中使用文件或地址-->
</body>
</html>

2.选择器

　　基本选择器

　　　　标签选择器:选中所有标签不好用

　　　　id选择器:唯一选择

　　　　类选择器:自定义类赋予类

    <style>
/*标签选择器,作用所有标签不好用*/
        h1{
            color: chocolate;
        }
/*id选择器*/
        #h1{
            color: cornflowerblue;
        }
/*类选择器 */
        .test{
            color: aqua;
        }
    </style>
</head>
<body>
<h1>q1</h1>
<h1 id="h1">q2</h1>
<h1 class="test">q3</h1>
</body>
</html>

3.高级选择器

　　后代选择器: .test1 .test2 .a1{}

　　子代选择器: .test1 > .test2{}

　　组合选择器: 所有的h1标签和a标签 h1,a{}

　　交集选择器

4.css的权重

　　行内1000 > id选择器100 > 类选择器10 > 标签选择器1 　　#可以根据权重积累 ,判断出标签应该的样式,继承的权重为0

5.css的height-wight

　　c1盒子是子盒子 height: 50%继承父盒子的一半大小，同理width也是

　　div盒子的默认宽度与父盒子一直 ,高度为0 ,但是可以通过内容填充

    <style>
        .d1{
            background-color: antiquewhite;
            height: 50px;
            width: 600px;
        }
        .c1{
            height: 50%;
            width: 50%;
        }
    </style>
</head>
<body>
<div class="d1">
<!-- span内容撑起了盒子-->
    <div class="c1"></div>
    <span>Text</span>
</div>

6.css修饰字体文本

　　文本

　　　　居中: text-align文字水平居中, line-height=盒子高度那么文字垂直居中

　　　　修饰text-decoration: underline下划线 ,overline上划线 ,line-through删除线

　　字体

　　　　字体font-family: 指定各种字体

　　　　样式font-style: noraml正常 ,italic斜体 ,oblique倾斜字体

　　　　粗细font-wight: noraml正常 ,bold粗体 ,light细体

　　　　大小font-size: larger大 small小

    <style>
        div{
            font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
        }
        .t1{
            font-style: italic;
            font-weight: bold;
        }
        .t2{
            font-size: xx-large;
        }
        .t3{
            text-decoration: line-through;
            /*text-align文字水平居中*/
            text-align: center;
            /*line-height=盒子高度 那么文字垂直居中*/
            line-height: 280px;
            width: 280px;
            height: 280px;
            background-color: antiquewhite;
        }

    </style>
</head>
<body>
<div class="t1">
    hello my homie
</div>
<div class="t2">
    yes my homie
</div>
<div class="t3">
    help gogogo

7.标签类型转换

　　html中的行内标签 ,块标签特征明显 ,在css中可以通过display将标签类型进行转换

　　display:none (隐藏) ,block(转换为块级标签) ,inline(转换为行内标签) ,inline-block(转换为行内块)

    <style>
        #sp1{
            display: block;
        }
        #sp2{
            display: none;
        }
    </style>
</head>
<body>
<div class="t1">
    <a href="">点击一下</a>
    <a href="">点击100下</a>
    <span id="sp1">行内span1</span>
    <span id="sp2">行内span2</span>
</div>
<div style="width: 100px;height: 100px;background-color: blueviolet;display: inline-block"></div>
<div style="width: 100px;height: 100px;background-color: darkorange;display: inline-block"></div>
<div></div>
</body>

8.盒子的margin ,padding ,border

　　盒模型的大小是由内容撑起来的 ,padding可以改变盒子与内容的距离 ,margin可以改变盒子与盒子之间的距离因为盒子和盒子是紧贴的 ,border就是盒子边框

　　padding 20px　　#四个方向内填充20px内容挤了一点

　　margin 20px　　 #四个方向外边距生成20px和其他盒子保持具体

　　border 2px soild bule　　 #四个方向的边框2px ,蓝色

　　三种都可以设置方向 bottom top right left

    <style>
        .d1{
            padding: 20px;
            margin: 30px;
            /*border: 2px solid blue;*/
            border-bottom: 3px solid sandybrown;
            border-left: 3px solid blueviolet;
        }
    </style>
</head>
<body>
<div class="d1" style="width: 100px;height: 100px;background-color: antiquewhite;display: inline-block">ok</div>
<div style="width: 100px;height: 100px;background-color: darkorange;display: inline-block"></div>

　　三角型

    <style>
        .d1{
            /*border: 2px solid blue;*/
            border-top:  30px solid sandybrown;
            border-left: 30px solid white;
            border-right: 30px solid white;
        }
    </style>
</head>
<body>
<div class="d1" style="background-color: white;width: 0"></div>
</body>

9.css浮动

　　浮动可以使盒模型并排显示 ,要浮动一起浮动, 有浮动清除浮动

　　现象: 1.紧贴父盒子 2.脱离标准流在页面不占位置 3.标准盒子压住浮动盒子 4.浏览器变化div盒子会有贴靠效果 5.可以使用清除浮动来隔离

　　clear: both清除浮动影响自己

10.css的伪类选择器

#直接作用于标签a 
       a:hover{　　　　　　#鼠标悬浮效果
            color: chartreuse;
        }
        a:active{　　　　　　#鼠标点击效果
            color: blue;
        }

#直接作用于类选择器上

　　　　.ko1:hover{
    　　　　color: chartreuse;
　　　　}

11.css的文字图标

　　1.@font-face连接生成代码

　　2.设置字体font-family

　　3.引用value=""

    <style>
        /*连接生成的代码*/
        @font-face {
      font-family: 'iconfont';  /* project id 1109953 */
      src: url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.eot');
      src: url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.woff') format('woff'),
      url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_1109953_hteo4kkmpxf.svg#iconfont') format('svg');
}
        .iconfont{
        font-family:"iconfont";}

    </style>
</head>
<body>
<div>
    <input type="submit" class="iconfont" value="&#xe600;">
</div>
</body>

12.css属性选择器

　　根据标签的属性做选择!如 input标签的type属性

    <style>
        input[type=text]{
            height: 30px;
        }
    </style>
</head>
<body>
<input type="text" name="key" value="">
<input type="text" name="key1" value="">
<input type="text" name="key2" value="">
</body>
</html>

13.css的定位

　　position: relative 相对定位 ,以原位置为参考点向(top-left-botten-right)四个方向移动 ,并没有脱离标准流

　　　　　　absolute 绝对定位 ,脱离标准流 ,用于子盒子

　　　　　　fixed 固定定位 ,可以将标签固定在浏览器的位置 ,如回到顶部

　　子绝父相:父盒子用相对定位 ,子盒子用绝对定位 ,子盒子使用父盒子做参考点压盖　

    <style>
        .d1{
            position:relative;
            width: 300px;
            height: 200px;
            background-color: antiquewhite;
        }
        .d2{
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: burlywood;
            left: 20px;
            top: 20px;
        }
        #top{
            position: fixed;
        }
    </style>
</head>
<body>
<div class="d1">
    <div class="d2">

    </div>
</div>
<div id="top"><a href="#">top</a></div>
<div style="height: 10000px"></div>
</body>
</html>