zoukankan html css js c++ java

前端基础学习之css二

1.水平对齐方式属性：

　　left:把文本排列在左边。默认值：由浏览器决定

　　right：把文本排列在右边

　　center:把文本排在中间

　　 justify:实现两端对齐文本效果

2.用于调图标的属性

　　font family:调节字体

　　 font weight:调节粗细

　　 font size:调节字体大小 lighter/bold/border/

　　 text indent:首行缩进

　　 font-stye:italic 文字样式

　　 lettrt-spacing：字母间距

　　 word-spacing:单词间距

　　 line-height:文本行高

　　 vertical-align:设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效

　　 text-decoration:none :用来删除文本的下划线

　　 text-transform: 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大

3.背景属性：

　　background-color +颜色就行

　　background-image+url（"图片路径"）

　　这两个只能选一个用 background repeat :重复方式 background no repeat:不重复

　　background-position ： center 背景图片的位置居中

　　如果显示窗口小于背景图片那就只显示一部分，比如老师课堂讲的小黄人的例子，这个后面在html 中我会举这个例子。

　　话说上面这四个可以简写成一句： background:red ulr("图片路径") no-repeat right top;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .smallPeopleyellow{
            vertical-align: -20px;
        }
        .btn{
            text-decoration: none;
        }
         /*利用了后代选择器*/
        .handler li .btn{
          font-size: 16px;
            color: red;
        }
    </style>
</head>
<body>
<div class="c1">
    <div>风景<img src="4.jpg " style=" 30px ; height: 30px"></div>

</div>
<ul class="handler">
    <li><a href="" class="btn">click</a></li>
    <li><a href="" class="btn">click</a></li>
    <li><a href="" class="btn">click</a></li>
</ul>

</body>
</html>

小黄人例子

4.边框属性：

　　 border-设置边框的宽度

　　 border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

　　只有当这个值不是 none 时边框才可能出现。

5.列表属性：

　　 list-style-type:设置列表项标志的类型

　　 list-style-image:将图像设置为列表项标志

　　 list-style-position:设置列表中的列表项的位置

　　 list-style:简写属性，用于把所有用于列表的属性设置于一个声明中

6.diaplay属性

　　 none: 隐藏某标签

　　 block：将内联标签设置为块级标签注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。　

　　 inline：将块级标签设置为内联的标签 inline-block 可做列表布局

这边咱们再说一下：display:none和visibility:hidden的区别：

visibility:hidden：可以隐藏某元素，但是就算是隐藏了可是他的空间还是要占用，而且并没有缩小，和隐藏前的一样，影响布局

　　 display:none：可以隐藏某个元素。并且隐藏了以后就不会占用任何空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color:deepskyblue ;
            display:inline;
        }
     span{
      display: block;
      width: 200px;
      height: 200px;
      background-color: lawngreen;

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            border-right: solid red 2px;

        }
        ul{''
            padding: 0;
        }
        ul li{
            list-style:none;
        }
    </style>

</head>
<body>

</body>
<div class="c1"></div>
<ul>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
</ul>
</html>

border属性

7.外边距（margine）和内边距（padding）

　　也就是我们这几天一直在讲的盒子模型

　　margine：用于控制元素与元素之间的距离； margine的最基本用途就是控制元素周围空间的间隙，从视觉上达到互相隔开的目的

　　 padding：用于控制内容与边框之间的距离;

　　border: 围绕在内边距和内容外的边框；

　　content: 盒子的内容，显示文本和图像

8.margine（外边距）

　　 margine-top: 距顶端的距离

　　 margine-bottom：距低端的距离

　　 margine-left：距左边的距离

　　margine-right: 距右边的距离

简写的格式： margine：10px 20px 20px 10px;

　　　　　　　　　　上边距右边距下边距左边距

　　　　　　margine：10px 20px 10px;

　　　　　　　　　　上边距左右边距下边距

　　　　　　margine：10px 20px

　　　　　　　　　　上下边距左右边距

　　　　　margin: 20px

　　　　　　　　上下左右都是25px

margine：0 auto；居中应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*.c1{*/
            /* 200px;*/
            /*height: 200px;*/
            /*background-color: royalblue;*/
            /*padding: 50px;*/
            /*!*padding: 50px 20px 10px 10px;*!*/
            /*border: 5px solid red;*/
            /*!*margin-bottom: 20px;*!*/
        /*}*/

         /*.c2{*/
            /* 200px;*/
            /*height: 200px;*/
            /*background-color: gold;*/
            /*padding: 50px;*/
            /*!*padding: 50px 20px 10px 10px;*!*/
            /*border: 5px solid red;*/
            /*margin-top: 20px;*/
        /*}*/

         /*.s1{*/
             /*background-color: rebeccapurple;*/
             /*padding: 10px;*/
             /*margin-right: 100px;*/
             /*margin-left: 50px;*/
         /*}*/
        /*.s2{*/
            /*background-color: green;*/
            /*padding: 10px;*/
            /*margin-left: 20px;*/
        /*}*/

        /*margin 的居中操作*/
        .c3{
            width: 80%;
            height: 300px;
            background-color: gray;

            margin: 100px auto;
        }

    </style>
</head>
<body>


<!--<div class="c1">DIV</div>-->
<!--<div class="c2">DIV</div>-->

<!--<span class="s1">span1</span>-->
<!--<span class="s2">span2</span>-->



<div class="c3"></div>
</body>
</html>

内外边距

9. margine collapse(边界的塌陷或说边界的重叠)

　　1.兄弟的div:

　　　　上面的margine-bottom和下面的margine-top会塌陷，也就是会取上下两者margine里面最大值作为显示值

　　 2.父子div：

　　　　 if 父级中没有border,padding,inlinecontent，子级的margine会一直向上找直到找到某个标签包括border padding inline content中的其中一个，然后按照div进行margine

　　解决边界塌陷的问题:overflow:hidden 他会把溢出的都隐藏起来，弄了半天，反正当你遇到边界塌陷问题就用overflow：hidden

10.overflow

　　scroll：溢出就会出一个滚动条

　　auto：溢出就会出一个滚动条

　　hidden:溢出则隐藏

　　 inherit

　　visible

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;

          overflow: hidden;
        }
    </style>

</head>
<body>
<div class="c1">
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
    <h1>yuan</h1>
</div>

</body>
</html>

View Code

11.padding(内边距)

　　单独使用填充属性可以改变上下左右的填充，缩写填充也可以使用，一旦改变一切都改变设置同margine

12.float属性

　　a.基本浮动规则：

　　　　 block元素和inline元素在文档流中的排列方式。

　　　　 block就是块级标签，独占一行,多个block都是自己另起一行，默认block元素会填满其父元素的宽度，他可以设置:width、margin、padding属性

　　　　 inline不会独占一行，多个行内元素会排列在同一行，直到一行元素排不下，才会换新一行，宽度随元素的内容而变化,inline元素设置width、heigth无效

b.常见的块级元素：

　　　　div form table p pre hi~h5 dl ol ul等等

　c.常见的内联元素：

　　　　span a strong en lable input select textatea img br等

　　文档流：元素排版布局过程中，元素会自动从左往右，从上往下的流式排列

　　脱离文档流：将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当作脱离文档流的元素不存在而进行定位。

　　 d.非完全脱离文档流左右结构div盒子重叠现象，一般由于相邻两个div一个使用浮动而一个没有使用浮动

　　这样会导致div不在同一个平面上，但是内容不会造成覆盖现象，只有div形成覆盖现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
            background-color: green;
            width: 200px;
            height: 200px;
            float: left;
        }


         .c2{
            background-color: wheat;
            width: 400px;
            height: 100px;
             float: left;
        }
         .c3{
            background-color: royalblue;
            width: 100px;
            height: 300px;
             float: right;
        }
    </style>
</head>
<body>

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

</body>
</html>

View Code

13.清除浮动

　　clear语法：

取值：

　　 none：默认值，允许两边都可以有浮动对象

　　　　 left:不允许左边有浮动现象

　　　　 right:不允许右边有浮动现象

　　　　 both:不允许有浮动对象

　　　　注意：clear属性只会对自身起作用，而不会影响其他元素

　　　　把握住两点：1.元素从上到下，从左到有一次加载

　　　　　　　　2.clear left对自身起作用，一旦左边有浮动，就切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题

清除浮动

14.position（定位）

　　static:默认值，无定位，不能当作绝对的参照物，并且设置标签对象的left top等值是不起作用的

　relative:相对定位，参照物是自己，不会脱离文档流，可以使用top left解决定位

　absoulte:脱离了文档流，按照已定位的父级定位，没有的话直接以border定位。

　fixed：完全脱离文档流固定定位

15.选择器的优先级

！important（非规则的）最高

在规则内：

　　　　内嵌---》id---》class---》element

　　如果优先级一样，按加载顺序，谁先救谁执行

16.伪类

　　 a:link（没有接触过的链接）,用于定义了链接的常规状态。也就是例子中的未点击状态

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。例子中的悬浮在上面时的状态

　　a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。点击时的状态

　　a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。点击之后的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*!*#a1:link{*!   未点击状态*/
            /*color: darkorange;*/
        /*}*/
        /*!*#a1:hover{*!    悬浮时*/
            /*color: green;*/
        /*}*/
        /*!*#a1:active{*!   点击*/
            /*color: red;*/
        /*}*/
        /*!*#a1:visited{*!   点击之后的颜色*/
            /*color:violet;*/
        /*}*/
        /*可以给他设长宽是因为它是块级标签，就是下面的这一种情况*/
        .c1{
            width: 300px;
            height:200px;

            background-color: green;
        }
        /*设置c1悬浮时的样式*/
        .c1:hover{
            background-color: red;

        }

        /*不能给span做长宽，因为他是内联标签，但是可以给他设置背景*/
       span {
           background-color: crimson;
           width: 200px;
           height: 300px;
       }

    </style>
</head>
<body>

<a href="" id="a1">hellocss</a>
<div class="c1"></div>
<span>span</span>

</body>
</html>

伪类

17.brfore after伪类:

　　p:before 在每个<p>元素之前插入内容

　　p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}

　　p:after 在每个<p>元素之后插入内容

　　p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.inner1,.inner2{*/
            /* 200px;*/
            /*height: 200px;*/
            /*border: blue;*/
        /*}*/
        /*!*块级独占一行*!*/
        /*.inner1{*/
            /*background-color: crimson;*/
        /*}*/
        /*.inner2{*/
            /*background-color: yellow;*/
        /*}*/

        /*.outer{*/
            /*border: 2px solid red;*/
            /* 100%;*/
            /*height: 400px;*/
            /*background-color: darkorange;*/
        /*}*/
        /*!*注意这里hover后面有个空格，然后才是.inner1，没有为什么，因为不这样写就会错，这就是hover这个伪类*!*/
       /*.outer:hover .inner1{*/
           /*background:darkkhaki;*/
       /*}*/

        /*接下来我们来看一下before和after这个伪类*/
        /*为了某种布局效果我们自己就加一个伪类*/
        .c3:after{
            content: "hello";
            color: red;



        }


    </style>
</head>
<body>
<!--<div class="outer">-->
    <!--<div class="inner1"></div>-->
    <!--<div class="inner2"></div>-->

<!--</div>-->
<div class="c3">
    div
</div>



</body>
</html>

View Code

18.inline-block 的间隙，

正好也是我迷茫的一个地方

inline-block默认的空格符就是标签与标签之间的空隙造成的。

(1) 我们可以通过margin:-3px来解决，但是

1.我们布局肯定很多元素，不可能每个都添加margin负这样维护成本太大了

2.我们线上代码如果压缩，那么我们就不存在哪个4px的问题了，那么我们的margin负就回造成布局混乱！

(2)我们可以给几个标签加一个父级div，然后

div{word-spacing: -5px;}　

19.后台管理布局

个人认为这个就是用来调节页面布局的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
        }
        a{
            text-decoration: none;
        }

        .header{
            width: 100%;
            height: 44px;
            background-color: #2459a2;
        }

        .leftmenu{

            width: 250px;
            background-color:#ededed;
            border: 1px solid red;
            position: fixed;
            top: 44px;
            left: 0;
            bottom: 0;

        }
        .Con{

            /*margin-left: 30px;*/

            position: fixed;
            top:44px;
            left: 250px;
            right: 0;
            bottom: 0;
            background-color: wheat;

            overflow: auto;
        }
        .leftmenu .title{
            list-style: none;
        }

        .leftmenu .title a{

            font-size: 16px;
            color: white;


            /*display: inline-block;*/
            /*float: left;*/
        }

        .title li{
            width: 160px;
            height: 30px;
            background-color: grey;
            text-align: center;
            padding: 5px 30px;
            margin-top: 20px;
            line-height: 30px;


        }
        .Con h1{
            margin-left: 30px;
        }

        .leftmenu ul{
            width: 100%;
            padding: 0;
            margin-left: 15px;

        }
    </style>
</head>
<body>

<div class="header"></div>

<div class="content">
    <div class="leftmenu">
        <ul class="title">
            <li><a href="">菜单一</a></li>
            <li><a href="">菜单二</a></li>
            <li><a href="">菜单三</a></li>
        </ul>
    </div>
    <div class="Con">
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        <h1>yuan</h1>
        
    </div>
</div>

</body>
</html>

View Code

20.流程控制语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

         // if else if ...  else
      /*
        var num=76;
        if (num>90){
            alert("优秀")
        }
        else if (num>80){
            alert("凑合")
        }
        else {
            alert("挺好的！")
        }

        */

      // switch-case语句
      /*
        var x=15;

        switch (x){

            case 1:alert("星期一");break;
            case 2:alert("星期2");break;
            case 3:alert("星期3");break;
            case 4:alert("星期4");break;
            case 5:alert("星期5");break;
            case 6:alert("星期6");break;
            default:alert("日");
        }

        */


      // 循环 for while


        // for 条件循环（推荐使用）

         for (var i=0;i<100;i++){
             console.log(i)
         }

        // ==================
         var arr=[11,44,"hello",true];

         for(var i=0;i<arr.length;i++){
             console.log(arr[i])
         }



          遍历for循环
         for(var i in arr){
             console.log(i);
             console.log(arr[i])
         }


         // while 循环

        var count=0;
        while (count<100){
            console.log(count);
            count++;
        }





    </script>
</head>
<body>

</body>
</html>

View Code

21.选择器的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*p{*/
          /*color: green;*/
      /*}*/
      /*id优先级最高*/
      /*#s1{*/
          /*color: darkorange;*/
      /*}*/
    /*.c1{*/
        /*color: lightpink;*/
        /*}*/

      /*优先级是这样的比如 id 是100  class是10  element是1，所以id的优先级最高*/
    .c2 .c3 div{
          color: red;
      }
      .c2 .c4{
            color: green;
        }
        .c3 span{
            color: black !important; 非规则的，比内嵌的还高
        }
        #s4{
            color: yellow;
        }
        .c2 span{
            color: darkkhaki;
        }
        .c3 span{
            color: blue;
        }
    </style>
</head>
<body>
<DIV>div</DIV>
<p class="c1" id="s1">PPP</p>

<div class="c2" id="s2">
    <div class="c3" id="s3">
        <!--<div class="c4" id="s4">0000</div>-->
        <span class="c4" id="s4" style="color:firebrick;">0000</span> 这是内嵌式，比id的优先级还高
     </div>
     <p>PPP</p>



</div>


</body>
</html>

选择优先级!important(非规则的)最高
在规则内：
  内嵌>id>class>element
如果优先级一样,按加载顺序，谁先就谁执行

View Code

查看全文

相关阅读:
asp.net IIS session丢失 session Key丢失
 本地时间和GMT(UTC)时间的转换（C#）
<img/>标签onerror事件在IE下的bug和解决方法
 ASP.NET 页面传值方法
 asp.net中URL参数加密解密过程
 Windows 7 MVC2.0部署到IIS7【原创】
WHENCREATERECORD的三大定律一大推论
 OAF页面查找数据源
 查询用户客户化的文件配置
 EBS AP、AR所有含CCID的业务表

原文地址：https://www.cnblogs.com/1996-11-01-614lb/p/7581487.html