zoukankan      html  css  js  c++  java
  • CSS 基础篇

    一、简介

    1、CSS 定义

    CSS是Cascading Style Sheets的简称,中文称为层叠样式表。

            属性和属性值用冒号隔开,以分号结尾。

    2、 CSS 引入方式

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>引入css</title>
     7     <!-- 2.内嵌样式 -->
     8     <style>
     9         p{color:darkkhaki;}
    10     </style>
    11 
    12     <!-- 3.外部引入 -->
    13     <link rel="stylesheet" href="./ceshi.css" type="text/css">
    14 </head>
    15 <body>
    16     <!-- 1.行内样式 -->
    17     <div style="color:darkgreen">学习css 层叠样式表</div>
    18     <p>这是一段话</p>
    19     
    20 </body>
    21 </html>
    CSS 引入方式

    3、样式应用顺序

    • 行内样式优先级最高
    • 针对相同的样式属性,不同的样式属性将以合并的方式呈现
    • 相同样式并且相同属性,呈现方式在<head>中的顺序决定,后面会覆盖前面属性
    • !important 

       指定样式规则应用最优先

    二、 选择器(Selector

    1、 基本选择器

    (1)通用元素选择器

     * 表示应用到所有的标签。

    * {color: yellow}

    (2)标签选择器

    匹配所有使用 div 标签的元素(可以匹配所有标签)

    div {color: yellow}

    (3)类选择器

        匹配所有class属性中包含info的元素。

        语法:.类名{样式}(类名不能以数字开头,类名要区分大小写。)

    .Mycolor {color: yellow}
    <h3 class="Mycolor">nick</h3>

    (4)ID选择器

    使用id属性来调用样式,在一个网页中id的值都是唯一的(是W3C规范而不是规则,所以不会报错)。

    语法:#ID名{样式}(ID名不能以数字开头)

    #Mycolor {color: yellow}
    <h3 id="Mycolor">Nick.</h3>
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>常用选择器</title>
     7     <style>
     8         /* 通配选择器 *号代表所有标签 */
     9         *
    10         {background-color: indianred;}
    11         /* 标签选择器 */
    12         h1
    13         {color:darkmagenta}
    14 
    15         /* 类选择器 */
    16         .ceshi1
    17         {color:darkolivegreen}
    18 
    19         /* ID选择器 */
    20         #ceshi2
    21         {color:darkorange}
    22 
    23         /* 组合选择器 */
    24         /* 越具体指定,越详细,优先级就越高 */
    25         h2.ceshi1
    26         {color:darkred;}
    27         h3#ceshi2
    28         {color:darkseagreen}
    29 
    30         h1,h2,h3,h4
    31         {background-color: darkviolet;}
    32 
    33 
    34     </style>
    35 </head>
    36 <body>
    37     <!-- 
    38         标签选择器 : 具体指定标签种类
    39         类选择器   : 具体指定一类标签(用class修饰的类选择器)
    40         ID选择器   : 具体指定一个标签(用id修饰的ID选择器) 
    41     -->
    42 
    43     <h1>一级标签</h1>
    44     <h2 class="ceshi1" >二级标签</h2>
    45     <h3 id="ceshi2" >三级标签</h3>
    46     <h4 class="ceshi1">四级标签</h4>
    47 
    48     
    49 </body>
    50 </html>
    View Code

    2、组合选择器

     

       同时匹配h3,h4标签,之间用逗号分隔。

    h3,h4 {color: yellow;}
    <h3>Nick</h3>
    <h4>Jenny</h4>
    h2.ceshi1{color:darkred;}
    h3#ceshi2{color:darkseagreen;}
    <h2 class="ceshi1" >二级标签</h2>
    <h3 id="ceshi2" >三级标签</h3>

    3、关系选择器

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>关系选择器</title>
     7     <style>
     8         
     9         /* 包含(后代)选择器 */
    10         ul li
    11         {color:tan;}
    12         /* 父子选择器 */
    13         ul>li
    14         {color:red;}
    15         /* 兄弟选择器 特指一堆 */
    16         ol~li
    17         {color:yellowgreen;}
    18         /* 相邻选择器 特指一个 */
    19         ol+li
    20         {color:teal;} 
    21 
    22     </style>
    23 </head>
    24 <body>
    25         <ul>
    26             <li>梅花</li>
    27             <li>三国演义</li>
    28             <li>水浒传</li>
    29             <ol>
    30                 <li>羞答答的玫瑰,静悄悄的开</li>
    31                 <li>钢铁是怎么弄折的</li>
    32                 <li>盛和稻夫</li>
    33             </ol>
    34             <li>西游记</li>
    35             <li>红楼梦</li>
    36         </ul>
    37     
    38 </body>
    39 </html>
    View Code

    4、属性选择器

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>属性选择器</title>
     7     <style>
     8         input[name]
     9         {background-color: thistle;}
    10         input[name=username]
    11         {background-color: teal;}
    12         input[type=password]
    13         {background-color: violet;}
    14         input[abc=nihao]
    15         {background-color: yellow;}
    16 
    17     </style>
    18 </head>
    19 <body>
    20     
    21     <form action="" method="">
    22         用户名: <input type="text" name="username">
    23         <br>
    24         密码  <input type="password" name="pwd">
    25         <br>
    26         邮箱 <input type="email" name="email">
    27         <br>
    28         <!-- input表单框里面可以自定义属性 -->
    29         年龄 <input type="text" abc="nihao" >
    30         <br>
    31         <input type="submit">
    32 
    33 
    34     </form>
    35 
    36 </body>
    37 </html>
    View Code

    5、伪类选择器

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>伪类选择器</title>
     7     <style>
     8         /*在鼠标悬停在a标签时,触发代码*/
     9         a:hover
    10         {color:yellowgreen;}
    11         /* 特指列表中的第一个 */
    12         ul li:first-child
    13         {color:blue;}
    14         /* 特指列表中的最后一个 */
    15         ul li:last-child
    16         {color:brown}
    17         /* 特指列表中的某一个 */
    18         ul li:nth-child(6)
    19         {color:cornflowerblue;}
    20         /* 特指偶数个 */
    21         ul li:nth-child(even)
    22         {color:red;}
    23         /* 2n 代表偶数个 */
    24         ul li:nth-child(2n)
    25         {color:cyan;}
    26     
    27         /* 特指奇数个 */
    28         ul li:nth-child(odd)
    29         {color:green;}
    30         /* 2n-1 代表奇数个 */
    31         ul li:nth-child(2n-1)
    32         {color:tan;}
    33         ul li:hover
    34         {background-color: crimson;color:white;}
    35     </style>
    36 </head>
    37 <body>
    38     <a href="#"> 百度 </a>
    39     
    40     <ul>
    41         <li>李琦</li>
    42         <li>李雅琪</li>
    43         <li>李炯辉</li>
    44         <li>薛宇健</li>
    45         <li>吴赔偿</li>
    46         <li>王雨涵</li>
    47         <li>石磊</li>
    48         <li>王生福</li>
    49     </ul>
    50 
    51 
    52 </body>
    53 </html>
    View Code

    6、伪对象选择器

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>伪对象选择器</title>
     7     <style>
     8         #ceshi
     9         {background-color: darkgreen;color:white}
    10         /* 在内容之前插入数据 */
    11         #ceshi::before
    12         {
    13             content:"请问:";
    14             color:red;
    15         }
    16         /* 在内容之后插入数据 */
    17         #ceshi::after
    18         {
    19             content:"对✔";
    20             color:orange;
    21         }
    22         /* 鼠标选中后的样式 */
    23         #ceshi::selection
    24         {
    25             background-color:darkslategray;
    26             color:dodgerblue;
    27         }
    28 
    29 
    30     </style>
    31 
    32 </head>
    33 <body>
    34 
    35     <span id="ceshi">明天是周六,放假,对不对?</span>
    36     
    37 </body>
    38 </html>
    View Code

    7、 选择器的优先级

    原则: 泛指的标签元素优先级低,特指的元素优先级更高 , 越具体越高

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>选择器的优先级</title>
     7     <style>
     8         font
     9         {color:deeppink}
    10         .one
    11         {color:forestgreen;}
    12         #two
    13         {color:gold;}
    14         font
    15         {color:indianred!important;}
    16 
    17     </style>
    18 </head>
    19 <body>
    20     <!-- 原则: 泛指的标签元素优先级低,特指的元素优先级更高 , 越具体越高 -->
    21     <!-- 标签选择器 -> 类选择器 -> id选择器 -> 行内样式 -> !important(强制把优先级提升到最高) -->
    22     <font style="color:blue;" class="one" id="two">234234</font>
    23     
    24 </body>
    25 </html>
    View Code

     三. 常用属性

    1.颜色属性

    color:

    • HEX(十六进制色:color: #FFFF00 --> 缩写:#FF0)
    • RGB(红绿蓝,使用方式:color:rgb(255,255,0)或者color:rgb(100%,100%,0%))
    • RGBA(红绿蓝透明度,A是透明度在0~1之间取值。使用方式:color:rgba(255,255,0,0.5))       

      

    transparent :

    • 全透明,使用方式:color: transparent;  

     opacity:

    • 元素的透明度,语法:opacity: 0.5;
    • 属性值在0.0到1.0范围内,0表示透明,1表示不透明。

      

    2.字体属性

    1. font-style: 用于规定斜体文本

    • normal  文本正常显示
    • italic  文本斜体显示
    • oblique  文本倾斜显示

    2.  font-weight: 设置文本的粗细

    • normal(默认)
    • bold(加粗)
    • bolder(相当于<strong>和<b>标签)
    • lighter (常规)
    • 100 ~ 900 整百(400=normal,700=bold)

    3. font-size: 设置字体的大小

    • 默认值:medium
    • <absolute-size>可选参数值:xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
    • <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值:smaller、 larger
    • <percentage>百分比指定文字大小。
    • <length>用长度值指定文字大小,不允许负值。

    4 . font-family:字体名称

    • 使用逗号隔开多种字体(优先级从前向后,如果系统中没有找到当前字体,则往后面寻找)

    5 . font简写属性

    • 语法:font:字体大小/行高 字体;(字体要在最后)
    • font:italic bold  14px "楷体"; 

    6.自定义字体名字

    • @符号是用来制定字体的规则,用来设置自定义的字体文件

      

     @font-face
            {
                font-family:"王文";
                src:url("./font/方正舒体.TTF");
            }
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>字体属性</title>
     7     <style>
     8         /* @符号是用来制定字体的规则,用来设置自定义的字体文件 */
     9         @font-face
    10         {
    11             font-family:"王文";
    12             src:url("./font/方正舒体.TTF");
    13         }
    14 
    15         /* ul li:nth-child(1)
    16         {background-color: red;} */
    17         #one
    18         {
    19             background-color: yellow;
    20             /* 字体倾斜 */
    21             font-style:italic;
    22             /* 字体粗线  */
    23             font-weight: bold;
    24             /* 字体大小 */
    25             font-size: 14px;
    26             /* 字体类型 : 微软雅黑 黑体 楷体 宋体... */
    27             font-family:"楷体";        
    28         }
    29 
    30         #two
    31         {
    32             background-color: red;
    33             font:italic bold  14px "楷体";
    34         }
    35 
    36         #three
    37         {
    38             background-color: blue;
    39             color:white;
    40             font:16px/4 "宋体";
    41         }
    42 
    43         #four
    44         {
    45             font:32px/4 "王文";
    46         }
    47 
    48         ul
    49         {
    50             /* 去掉列表前面的点 */
    51             list-style: none;
    52             /* 改变鼠标样式 */
    53             cursor:cell;
    54         }
    55 
    56 
    57     </style>
    58 </head>
    59 <body>
    60     <ul>
    61         <li id="one">设置字体的相关样式1</li>
    62         <li id="two">设置字体的相关样式2</li>
    63         <li id="three">设置字体的相关样式3</li>
    64         <li id="four">设置字体的相关样式4</li>
    65     </ul>
    66 
    67 
    68 </body>
    69 </html>
    试例

    3. 文本属性

     1.  white-space: 设置元素中空白的处理方式

    • normal:默认处理方式。
    • pre:保留空格,当文字超出边界时不换行
    • nowrap:不保留空格,强制在同一行内显示所有文本,直到文本结束或者碰到br标签
    • pre-wrap:保留空格,当文字碰到边界时换行
    • pre-line:不保留空格,保留文字的换行,当文字碰到边界时换行

    2. text-align: 水平文字居中位置

    • left
    • center
    • right

    3.line-height: 文本行高

    • height 和 line-height 如果数值相同,代表垂直方法居中
    • normal 默认

    4. text-decoration 设置上下划线

    • none 默认。
    • underline 下划线。
    • overline 上划线。
    • line-through 中线。

    5. text-shadow:文本阴影

    • 第一个参数是左右位置
    • 第二个参数是上下位置
    • 第三个参数是虚化效果
    • 第四个参数是颜色
    • text-shadow: 5px 5px 5px #888;

    6.  word-wrap:自动换行

    • word-wrap: break-word;

    7. text-indent: 文本缩进

          em单位 1em = 1个元素的大小, 按照文字比例进行调整

    • text-indent: 2em;
    • text-indent: 32px;

    8.vertical-align: 文本所在行高的垂直对齐方式

    • baseline 默认
    • sub 垂直对齐文本的下标,和<sub>标签一样的效果
    • super 垂直对齐文本的上标,和<sup>标签一样的效果
    • top 对象的顶端与所在容器的顶端对齐
    • text-top 对象的顶端与所在行文字顶端对齐
    • middle 元素对象基于基线垂直对齐
    • bottom 对象的底端与所在行的文字底部对齐
    • text-bottom 对象的底端与所在行文字的底端对齐

     9. letter-spacing: 添加字母之间的空白

     10.  word-spacing: 添加每个单词之间的空白

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <title>文本属性</title>
      7     <style>
      8         /* 1.把公共部分的样式提炼出来,减少冗余代码 */
      9         .common
     10         {
     11             width:200px;
     12             height:200px;
     13             font-size:14px;
     14             background-color: red;
     15             /* em单位 1em = 1个元素的大小, 按照文字比例进行调整 */
     16             /* 设置缩进 text-indent: 32px; */
     17             text-indent: 2em;
     18         }
     19 
     20         /* 2.如果是纯英文,不会默认换行 */
     21         .d1
     22         {
     23             /* 强制换行 */
     24             word-wrap: break-word;
     25         }
     26 
     27         /* 3.如果是中文,会默认换行 */
     28         .d2
     29         {
     30             /* 强制不换行 */
     31             white-space:nowrap ;
     32         }
     33 
     34         /* 4.height 和 line-height 如果数值相同,代表垂直方法居中 */
     35         .d3
     36         {
     37             width:200px;
     38             height:50px;
     39             line-height:50px;
     40             background-color: rosybrown;
     41         }
     42 
     43         /* 5.text-align 水平文字居中位置 left / center /right */
     44         .d4
     45         {
     46             width:500px;
     47             height:50px;
     48             line-height:50px;
     49             background-color: rosybrown;
     50             text-align: center;
     51         }
     52 
     53         /* 6.text-decoration 设置上下划线 */
     54         .lianjie
     55         {
     56             /* text-decoration:none; */
     57             /* text-decoration: overline ; 上划线*/
     58             text-decoration:line-through;  /*中划线*/
     59             text-decoration: underline ;   /*下划线*/
     60         }
     61 
     62         /*  7.vertical-align 文字和图片的上下位置关系 */
     63         .d5 img
     64         {
     65             /* top   middle  bottom  百分比*/
     66             vertical-align: -900%;
     67         }
     68 
     69 
     70         /* 
     71         8.text-shadow  设置文字阴影
     72         none: 无阴影 
     73         <length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
     74         <length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
     75         <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
     76         <color>: 设置对象的阴影的颜色。  
     77         */
     78         .d6
     79         {text-shadow:4px 4px 3px black;}
     80     </style>
     81 
     82 </head>
     83 <body>
     84     
     85     <div class="common d1">sdflsdfjkasdjkfasdjfkasjdkfjalsdfjlaskdjflakjsdlfkasdf</div>
     86     <br>
     87     <div class="common d2">水电费234水电费水电费水电费234水电费水电费水电费</div>
     88     <br>
     89     <div class="d3">设置行高</div>
     90     <br>
     91     <div class="d4">水平居中</div>
     92     <br>
     93     <a href="" class="lianjie">我是a连接</a>
     94     <br>
     95     <div class="d5">
     96         <img src="../../images/xiao.gif" alt="">
     97         小孩要喝奶
     98     </div>
     99     <br>
    100     <div class="d6">这是文字阴影效果</div>
    101     <br>
    102     <br>
    103     
    104 </body>
    105 </html>
    试例

    4.背景属性

    1. background-color:背景颜色:

    2. background-image 设置图像为背景

    • url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png");  图片地址
    • background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

     3. background-position 设置背景图像的位置坐标

    • background-position: center center; 图片置中,x轴center,y轴center
    • 1px -195px  截取图片某部分,分别代表坐标x,y轴

    4.  background-repeat 设置背景图像不重复平铺

    • no-repeat 设置图像不重复,常用
    • round 自动缩放直到适应并填充满整个容器

    • space 以相同的间距平铺且填充满整个容器

    5.  background-size:背景图片大小

      参数1:控制水平方向  参数2:控制垂直方向 

    • background-size: 100% 100%; 
    • background-size: 100% auto;

     6. background-attachment 背景图像是否固定或者随着页面的其余部分滚动(了解)

      7. background 简写

    • background: url("o_ns.png") no-repeat 0 -196px;
    • background: url("o_ns.png") no-repeat center bottom 15px;
    • background: url("o_ns.png") no-repeat left 30px bottom 15px;
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>背景属性</title>
     7     <style>
     8         #c1
     9         {
    10             width:500px;
    11             height:500px;
    12             border:solid 1px red;
    13             background-color: blue;
    14             /* 引入背景图 */
    15             background-image: url("../images/tupian1.png");
    16             /* 设置是否平铺: repeat-x  repeat-y  no-repeat  */
    17             background-repeat: no-repeat;
    18             /* 参数1:控制水平方向  参数2:控制垂直方向 */
    19             /* background-position: 200px  50px; */
    20             background-position: 50% 50%;
    21             /* 固定背景图片(了解) */
    22             background-attachment: fixed;
    23         }
    24 
    25         #c2
    26         {
    27             width:500px;
    28             height:500px;
    29             border:solid 1px red;            
    30             background:url("../images/tupian1.png") no-repeat 50% 50%;
    31             background-color:green;
    32         }
    33 
    34     </style>
    35 </head>
    36 <body>
    37     <div id="c1"></div>
    38     <div id="c2"></div>
    39     <div style="height:1000px;"></div>
    40     
    41     
    42 </body>
    43 </html>
    试例1
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>背景图片引入</title>
     7     <style>
     8 
     9         .c1
    10         {
    11             width:55px;
    12             height:50px;
    13             border:dotted 5px green;
    14             background: url("../images/tag.jpg") no-repeat;
    15             background-position: -2px -11px;
    16         }
    17 
    18         .c1:hover
    19         {
    20             background: url("../images/tag.jpg") no-repeat;
    21             background-position: -314px -14.7px;
    22         }
    23 
    24         .gy
    25         {
    26             width:500px;
    27             height:500px;
    28             border:solid 1px red;
    29         }
    30 
    31         /* 导入一张背景图 */
    32         .c2
    33         {
    34             background: url("../images/xiao.gif") no-repeat;
    35             /* 参数1:控制水平方向  参数2:控制垂直方向 */
    36             /* background-size: 100% 100%; */
    37             background-size: 100% auto;
    38         }
    39 
    40         /* 导入多张背景图 上面的图层优先写,下面的图层最后写,背景图之间用逗号,如果最后写完了用分号结尾;*/
    41         .c3
    42         {
    43             background: 
    44                 url("../images/game/map_05.gif") no-repeat 100px 100px,
    45                 url("../images/game/map_05.gif") no-repeat 124px 100px,
    46                 url("../images/game/map_05.gif") no-repeat 148px 100px,
    47                 url("../images/game/map_05.gif") no-repeat 174px 100px,
    48                 url("../images/game/map_05.gif") no-repeat 198px 100px,
    49                 url("../images/game/map_17.gif") no-repeat 50px 50px,
    50                 url("../images/game/map_20.gif") no-repeat 200px 200px,
    51                 url("../images/game/map_03.gif");
    52         }
    53 
    54     </style>
    55 </head>
    56 <body>
    57     <div class="c1"></div>
    58     <div class="c2 gy"></div>
    59     <div class="c3 gy"></div>
    60     
    61 </body>
    62 </html>
    试例2

     5. 列表属性

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

    • none 去除标志
    • decimal-leading-zero;  02.
    • square;  方框
    • circle;  空心圆
    • upper-alph; & disc; 实心圆

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

      list-style-position:列表项标志的位置

    • inside
    • outside

      list-style:缩写

     四 .页面布局

     1.边框

     border-style:边框样式

    • solid 默认,实线
    • double 双线
    • dotted 点状线条
    • dashed 虚线

      border-color:边框颜色

      border-width:边框宽度

      border-radius:圆角

    • 1个参数:四个角都应用
    • 2个参数:第一个参数应用于 左上、右下;第二个参数应用于 左下、右上
    • 3个参数:第一个参数应用于 左上;第二个参数应用于 左下、右上;第三个参数应用于右下
    • 4个参数:左上、右上、右下、左下(顺时针)

      border: 简写

    • border: 2px yellow solid; 
    • border-top:solid 10px red;
    • border-bottom: dotted 10px blue;
    • border-left: groove 10px yellow;
    • border-right: double 10px green;

      box-shadow:边框阴影

    • 第一个参数是左右位置
    • 第二个参数是上下位置
    • 第三个参数是虚化效果
    • 第四个参数是颜色
    • box-shadow: 10px 10px 5px #888;

    2.盒子模型

    一个标准的盒子

     

    padding:用于控制内容与边框之间的距离,注意会增加盒子的宽和高

    margin: 用于控制元素与元素之间的距离; 

     让盒子自动居中: 上下0px 左右自动auto 默认浏览器居中; 
     margin:0 auto;

    padding、margin 表示上右下左都应用
    padding-top、margin-top
    padding-right、margin-right
    padding-bottom、margin-bottom
    padding-left、margin-left

    一个参数,应用于四边。

    两个参数,第一个用于上、下,第二个用于左、右。

    三个参数,第一个用于上,第二个用于左、右,第三个用于下。

    3.position 规定元素的定位类型

    static

    默认值,没有定位,遵从正常的文档流

    relative

    相对定位元素,相对于其正常位置进行定位,遵从正常的文档流

    absolute

    绝对定位元素,脱离正常文档流

    fixed 固定(绝对)定位元素,固定在浏览器某处

    通过以下四种属性进行定位

    • left:50px;
    • top:50px;
    • right:50px;
    • bottom:50px;
    • z-index:-1;     控制层叠关系,值越大,越靠上层,反之,越在下层
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>定位:相对定位</title>
     7     <style>
     8         .gy
     9         {
    10             width:200px;
    11             height:200px;
    12             border:solid 1px red;
    13         }
    14         .d1
    15         {background: orchid;}
    16         /* 
    17             position: relative; 是相对定位 
    18             相对定位: 参考点相对于原来的起始位置进行定位
    19             有了定位(相对,绝对,固定)之后,会触发如下几个属性
    20             top right bottom left z-index      
    21             z-index : 控制层叠关系,值越大,越靠上层,反之,越在下层  
    22         */
    23         .d2
    24         {
    25             background:palegoldenrod;
    26             position: relative;
    27             left:20px;
    28             top:50px;
    29             z-index:-1;
    30         }
    31         .d3
    32         {background:palegreen;}
    33         .d4
    34         {background:paleturquoise;}
    35     </style>
    36 </head>
    37 <body>
    38     <div class="gy d1"></div>
    39     <div class="gy d2"></div>
    40     <div class="gy d3"></div>
    41     <div class="gy d4"></div>
    42 </body>
    43 </html>
    相对定位
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>定位:绝对定位</title>
     7     <style>
     8         /* 把所有标签默认添加的距离置0 */
     9         *
    10         {margin:0px;padding:0px;}
    11 
    12         .gy
    13         {
    14             width:200px;
    15             height:200px;
    16             border:solid 1px red;
    17         }
    18         .d1
    19         {background: red;position: relative;}
    20         /* 
    21             绝对定位:脱离文档流,下面的元素自动补齐 
    22             绝对定位会参照他的父级做绝对定位,默认参照的浏览器body,
    23             也可以通过在页面父级所在的div中加入position:relative作为参照点,做绝对定位
    24             如果是兄弟元素,不能够做参考点,使用方式:
    25                 (1) 把要定位的元素变成absolute
    26                 (2) 把对应的父级元素变成relative                   
    27         */
    28 
    29         .d2
    30         {
    31             background:palegoldenrod;
    32             position: absolute;
    33             z-index: -100;
    34             bottom:0px;
    35             right:0px;
    36 
    37         }
    38         .d3
    39         {background:blue;}
    40         .d4
    41         {background:paleturquoise;}
    42         .bigbox
    43         {border:solid 1px red;margin-top:100px;}
    44 
    45     </style>
    46 </head>
    47 <body>
    48     <div class="bigbox">
    49         <div class="gy d1"></div>
    50         <div class="gy d2"></div>
    51         <div class="gy d3"></div>
    52         <div class="gy d4"></div>
    53     </div>  
    54 </body>
    55 </html>
    绝对定位
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>定位:固定定位</title>
     7     <style>
     8         .c1
     9         {
    10             width:500px;
    11             height:500px;
    12             border:solid 1px red;
    13             background: red;
    14             position: fixed;
    15         }
    16 
    17         /* 
    18             transition取值:动画过度效果
    19             <' transition-property '>: 检索或设置对象中的参与过渡的属性  默认为all
    20             <' transition-duration '>: 检索或设置对象过渡的持续时间 
    21             <' transition-timing-function '>: 检索或设置对象中过渡的动画类型 
    22             <' transition-delay '>: 检索或设置对象延迟过渡的时间  
    23         */
    24 
    25         img
    26         {
    27             width:100px;
    28             height:100px;
    29             border:solid 1px red;
    30             position: fixed;
    31             bottom:0px;
    32             right:0px;
    33             margin-right:-80px;  
    34             transition: all 1s ease 0s;          
    35         }
    36         img:hover
    37         {
    38             margin-right:0px;
    39             background-color: green;
    40         }
    41 
    42 
    43     </style>
    44 </head>
    45 <body>
    46     <div>这是滋滋滋滋滋滋滋滋滋滋</div>
    47     <div class="c1">固定定位</div>    
    48     <div style="height:1000px;"></div>
    49     <div>这是滋滋滋滋滋滋滋滋滋滋</div>
    50 
    51     <img src="../images/xiao.gif" alt="">
    52 
    53 </body>
    54 </html>
    固定定位

    4 .display 转换元素

    • none 不显示。
    • block 显示为块级元素。
    • inline 显示为行内元素。
    • inline-block 行内块元素(会保持块元素的高宽)。 
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>display 转换元素</title>
     7     <style>
     8         /* display:inline 转换成行内元素 */
     9         div
    10         {display:inline;width:100px;height:100px;border:solid 1px red;}
    11         /* display:block 转换成块状元素 */
    12         span
    13         {display:block;width:100px;height:100px;border:solid 1px red;}
    14         /* display:inline-block 转换成行内块状元素 */
    15         a
    16         {display:inline-block;width:100px;height:100px;border:solid 1px red;}
    17        /* display:none 隐藏元素 */
    18         #yincang
    19         {display: none;}
    20 
    21     </style>
    22 </head>
    23 <body>
    24     <div>我是块状元素1</div>
    25     <div>我是块状元素2</div>
    26 
    27     <span>我是行内元素1</span>
    28     <span>我是行内元素2</span>
    29 
    30     <a href="#">我是连接1</a>
    31     <a href="#">我是连接2</a>
    32 
    33     <div id="yincang">我是隐藏元素</div>
    34 
    35 </body>
    36 </html>
    View Code

    5. float 浮动

    让一行显示两个块级标签,会脱离文档流,后面的内容会自动补齐

    • none
    • left 左浮动
    • right 右浮动

    clear 清除浮动,消除浮动产生的影响:

    • none  :  默认值。允许两边都可以有浮动对象
    • left   :  不允许左边有浮动对象
    • right  :  不允许右边有浮动对象
    • both  :  不允许两边有浮动对象
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>浮动效果float</title>
     7     <style>
     8         .gg
     9         {width:150px;height:150px;border:solid 1px red;float:left;}
    10         .c1{background:greenyellow;}
    11         .c2{background: teal;}
    12         .c3{background: tomato;}
    13         .c4{background: gold;}
    14 
    15 
    16 
    17         .content2
    18         {width:500px;height:500px;border:solid 1px red;}
    19         .content2 .span1
    20         {float:left;width:100px;height:100px;border:solid 1px red;}
    21         .content2 .span2
    22         {clear:both;display:block;width:100px;height:100px;border:solid 1px red;}
    23     </style>
    24 </head>
    25 <body>
    26     <!-- 
    27         float:left 向左浮动
    28         float:right 向右浮动
    29         在浮动时,都会脱离开文档流,后面的内容会自动补齐 
    30         作用:就是让块级元素在一行显示;
    31         clear:both 作用:清除两边的浮动,消除浮动产生的影响;
    32     -->
    33     
    34     <!-- 1.让块状元素浮动 -->
    35     <div class="content">
    36         <div class="c1 gg">1</div>
    37         <div class="c2 gg">2</div>
    38         <div class="c3 gg">3</div>
    39         <div class="c4 gg">4</div>
    40     </div>
    41 
    42     <!-- 
    43         2.让行内元素浮动 
    44         如果让行内元素浮动,默认会升级成行内块状元素,可设置宽高    
    45     -->
    46     <div class="content2">
    47         <span class="span1">行内元素1</span><span class="span2">行内元素2</span>
    48         
    49     </div>
    50 
    51 </body>
    52 </html>
    View Code

    6.float带来的问题:内容塌陷(高度没撑开)

    子元素浮动时脱离文档流,会导致父级元素高度塌陷

    解决方案:在父标签中使用伪对象选择器插入清除浮动效果

      .content2::after
            {
                content:"";
                display:block;
                clear:both;
            }
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>float带来的问题:内容塌陷(高度没撑开)</title>
     7     <style>
     8         .content1
     9         {border:solid 1px red;}
    10         .gg
    11         {width:150px;height:150px;border:solid 1px red;float:left;}
    12         .c1{background:greenyellow;}
    13         .c2{background: teal;}
    14         .c3{background: tomato;}
    15         .c4{background: gold;}
    16 
    17         /* 方法二:动态在内容中插入清除浮动效果 */
    18         .content2
    19         {border:solid 1px red;}
    20         .content2::after
    21         {
    22             content:"";
    23             display:block;
    24             clear:both;
    25         }
    26 
    27     </style>
    28 </head>
    29 <body>
    30     <!-- 解决方案1 -->
    31     <!-- <div class="content1">
    32         <div class="c1 gg">1</div>
    33         <div class="c2 gg">2</div>
    34         <div class="c3 gg">3</div>
    35         <div class="c4 gg">4</div>
    36         <div style="clear:both;"></div>
    37     </div>     -->
    38 
    39     <!-- 解决方案2 -->
    40     <div class="content2">
    41         <div class="c1 gg">1</div>
    42         <div class="c2 gg">2</div>
    43         <div class="c3 gg">3</div>
    44         <div class="c4 gg">4</div>
    45 
    46     </div>    
    47 
    48 
    49 </body>
    50 </html>
    试例

    7.overflow  设置当对象的内容超过其指定高度及宽度时如何显示内容

    • visible 默认值,内容不会被修剪,会呈现在元素框之外。
    • hidden 内容会被修剪,并且其余内容是不可见的。
    • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
     1 <!DOCTYPE html>
     2 <html lang="zh-cmn-Hans">
     3 <head>
     4 <meta charset="utf-8" />
     5 <title>overflow</title>
     6 <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
     7 <style>
     8 .test {
     9     overflow: hidden;
    10     width: 200px;
    11     height: 100px;
    12     background:blue;
    13     color:red;
    14     text-align: center;
    15     /* 让盒子自动居中: 上下0px 左右自动auto 默认浏览器居中; */
    16     margin:0 auto;
    17 }
    18 </style>
    19 </head>
    20 <body>
    21     <div class="test">
    22         <p>苏打速度</p>
    23         <p>苏打速度</p>
    24         <p>苏打速度</p>
    25         <p>苏打速度</p>
    26         <p>苏打速度</p>
    27     </div>
    28 </body>
    29 </html>
    30     
    View Code

    8.margin-top失效问题

    父子结构时,margin-top会失效

    如果margin-top失效,在父级盒子上加overflow: hidden;子盒子margin-top恢复使用;

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>margin-top失效问题</title>
     7     <style>
     8         *
     9         {margin:0px;padding:0px;}
    10         .content1
    11         {width:100px;height:100px;background: lawngreen;margin-top:10px;}
    12         
    13         /* 如果margin-top失效,在父级盒子上加overflow: hidden;子盒子margin-top恢复使用; */
    14         .father
    15         {width:100px;height:100px;background: magenta;overflow: hidden;}
    16         .son
    17         {width:50px;height:50px;background:mediumaquamarine;margin-top:10px;}
    18     </style>
    19 </head>
    20 <body>
    21     <!-- 单独的一个div -->
    22     <div class="content1">我是内容1</div>
    23     <div class="father">
    24         <div class="son">子div</div>
    25     </div>
    26     
    27 </body>
    28 </html>
    View Code

    9.transform、transition 动画效果

    transform 转换,变形

    • origin 定义旋转基点(left top center right bottom 坐标值)    transform-origin: 50px 50px; transform-origin: left;。
    • rotate 旋转            transform:rotate(50deg) 旋转角度可以为负数,需要先定义origin。
    • skew  扭曲             transform:skew(50deg,50deg)  分别为相对x轴倾斜,相对y轴倾斜。
    • scale  缩放             transform:scale(2,3) 横向放大2倍,纵向放大3倍;transform:scale(2) 横竖都放大2倍。 
    • translate 移动        transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。

    Transition 平滑过渡

    • transition-property:           变换的属性(none(没有属性改变)、all(所有属性改变)、具体属性)
    • transition-duration:           变换持续时间
    • transition-timing-function: 变换的速率(ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线))
    • transition-delay:               变换延迟时间
    • transition:                        缩写
    1、color: 通过红、绿、蓝和透明度组件变换(每个数值单独处理),如:background-color,border-color,color,outline-color等CSS属性;
    
    2、length:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等属性;
    
    3、percentage:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等属性;
    
    4、integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生,如:outline-offset,z-index等属性;
    
    5、number真实的(浮点型)数值,如:zoom,opacity,font-weight等属性;
    
    6、transform list。
    
    7、rectangle:通过x、 y、 width和height(转为数值)变换,如:crop;
    
    8、visibility:离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility;
    
    9、shadow:作用于color、x、y、和blur(模糊)属性,如:text-shadow;
    
    10、gradient:通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image;
    
    11、paint server (SVG):只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似;
    
    12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化;
    
    13、a shorthand property:如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化。
    property 指定属性对应类型
    Property Name    Type
    background-color    as color
    background-position    as repeatable list of simple list of length, percentage, or calc
    border-bottom-color    as color
    border-bottom-width    as length
    border-left-color    as color
    border-left-width    as length
    border-right-color    as color
    border-right-width    as length
    border-spacing    as simple list of length
    border-top-color    as color
    border-top-width    as length
    bottom    as length, percentage, or calc
    clip    as rectangle
    color    as color
    font-size    as length
    font-weight    as font weight
    height    as length, percentage, or calc
    left    as length, percentage, or calc
    letter-spacing    as length
    line-height    as either number or length
    margin-bottom    as length
    margin-left    as length
    margin-right    as length
    margin-top    as length
    max-height    as length, percentage, or calc
    max-width    as length, percentage, or calc
    min-height    as length, percentage, or calc
    min-width    as length, percentage, or calc
    opacity    as number
    outline-color    as color
    outline-width    as length
    padding-bottom    as length
    padding-left    as length
    padding-right    as length
    padding-top    as length
    right    as length, percentage, or calc
    text-indent    as length, percentage, or calc
    text-shadow    as shadow list
    top    as length, percentage, or calc
    vertical-align    as length
    visibility    as visibility
    width    as length, percentage, or calc
    word-spacing    as length
    z-index    as integer
    支持执行transition效果的属性
     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <title>nick</title>
     6     <meta charset="utf-8" />
     7     <style type="text/css">
     8         .img-see-2016-7-2 {
     9             background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
    10             background-size: 660px;
    11             background-repeat: no-repeat;
    12             height: 300px;
    13             width: 600px;
    14 
    15             transition-duration: 30s;
    16             transition-timing-function: ease;
    17             transition-property: background-size;
    18         }
    19         .img-see-2016-7-2:hover {
    20             background-size: 2000px;
    21         }
    22     </style>
    23 </head>
    24 <body>
    25     <div class="img-see-2016-7-2"></div>
    26 </body>
    27 </html>
    例子
  • 相关阅读:
    shell中的$()、${}、$(())、(())
    阿拉伯数字转中文大写数字的JS
    Oracle创建新用户并将某一用户的表导进来
    便当
    登陆weblogic后页面控制台卡主
    weblogic启动错误 Unrecognized option: -jrockit
    Linux静默安装weblogic
    在vim下按ctrl+s后界面卡住
    使用SQL语句从数据库一个表中随机获取数据
    查询json数据结构的8种方式
  • 原文地址:https://www.cnblogs.com/yj0405/p/14290064.html
Copyright © 2011-2022 走看看