码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础

时间:2019-08-03 21:53:58      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:总结   aaa   透明度   sts   方式   and   java   响应   ast   

CSS

CSS(Cascading Style Sheet):级联样式表,也是一种标记语言,没有逻辑,只有起作用和不起作用之分,主要是完成页面的样式(长什么样)和布局(标签的位置)

CSS三种引入方式

  • 行间式:写在标签的style属性样式中
    • 优点:书写直接,优先级最高
    • 缺点:可读性差,没有复用性
  • 内联式:写在head标签中的style样式中
    • 优点:可读性强,有复用性
    • 缺点:但是不能被其他HTML页面使用
  • 外联式:写在外部css文件中,在HTML文件中通过link标签引入css文件
    • 优点:可读性强,有复用性,适合团队开发(文件级别的复用性)

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css三种引入方式</title>
    <!-- 内联式 -->
    <!--在head标签中的style标签内-->
    <style>
        h2 {
            color: red;
            font-size: 100px;
            text-align: center;
        }
    </style>
    
    <!-- 外联式 -->
    <!-- 在外部css文件中,在html文件中通过link标签引入css文件 -->
    <link rel="stylesheet" href="css/样式引入.css" />
 
</head>
<body>
    <!-- 行间式 -->
    <!-- 直接书写在标签style属性中 -->
    <h1 style="color: red; font-size: 100px; text-align: center;">css的引入    </h1>
    <h1>h1标签</h1>

    <h2>h2标签</h2>
    <h2>h2标签</h2>

    <h3>h3标签</h3>
    <h3>h3标签</h3>

    <h4>h4标签</h4>
    <h4>h4标签</h4>   
</body>
</html>

外部css文件

# css/样式引入.css

h3 {
    color: green;
}

h4 {
    font-size: 25px;
    text-align: center;
}

三种css引入的优先级

  1. 行间式优先级最高
  2. 内联式和外联式优先级一样,由于html属于解释性语言,写在下面的会把上面的样式覆盖掉
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css的引入</title>
</head>
<body>
    <h3>h3标签</h3>
    <h3>h3标签</h3>

    <h4>h4标签</h4>
    <h4 style="font-size: 100px">h4标签</h4>
</body>

<style>
    h4 {
        color: #ff7800;
        font-size: 20px;
    }
</style>
<link rel="stylesheet" href="css/样式引入.css">
</html>

CSS基础选择器

  1. 统配选择器
  2. 标签选择器
  3. 类选择器
  4. id选择器

优先级:!important > 行间式 > id选择器 > 类选择器 > 标签选择器 > 统配选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css基础选择器</title>
    <style>
        /*优先级:可以从作用范围来判断 - 作用范围越精确,优先级越高 */
        /*1、统配选择器*/
        * {
            color: pink;
            font-size: 12px;
        }
        /*2、标签选择器*/
        h1 {
            font-size: 20px;
        }

        /*3、类选择器*/
        .h {
            font-size: 30px!important;
        }

        .h2 {
            font-size: 40px;
        }

        .h.h2 {
            font-size: 50px;
        }

        /*4、id选择器*/
        #hhh {
            font-size: 100px;
        }

    </style>
</head>
<body>
    <h1 class="h">1标题</h1>
    <h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>

CSS高级选择器

  1. 后代(子代)选择器
  2. 兄弟(相邻)选择器
  3. 群组选择器
  4. 交叉选择器
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高级选择器</title>
    <style>
        .h2 {
            color: red;
        }

        /*1、后代(子代)选择器*/
        /*后代:空格连接  子代:>连接*/
        /*body > .h2 控制一个 | body .h2 控制两个*/
        body > .h2 {
            font-size: 40px;
        }

        /*2、兄弟(相邻)标签:只能上兄弟修饰下兄弟*/
        /*兄弟:~连接  相邻:+连接*/
        /*.h3 + .h4 控制一个 | .h3 ~ .h4 控制两个*/
        .h3 + .h4 {
            color: pink;
        }

        /*3、群组选择器:控制多个选择器*/
        .h2, body h3, h4 {
            text-align: center;
        }

        /*4、选择器的优先级:权重 - 个数*/
        /*权值:不同级别没有可比性、同一级别比个数、选择器类型不影响优先级、优先级一致看顺序
        *:1
        标签:10
        class(伪类):100
        id:1000
        !important:10000
        */
        #h6 {
            color: black;
        }

        .d1 div h6 {
            color: pink;
        }
        .d2 h6 {
            color: brown;
        }

        body h6 {
            color: cyan;
        }
        div > h6 {
            color: orange;
        }
        h6 {
            font-size: 100px;
            text-align: center;
            color: red;
        }

    </style>

    <style>

        /*5、交叉选择器*/
        h6#h6.h.hh {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <h6 id="h6" class="h hh">css高级选择器优先级</h6>
        </div>
    </div>

    <h3 class="h3">第1个h3</h3>
    <h4 class="h4">第1个h4</h4>
    <h4 class="h4">第2个h4</h4>
    <h3 class="h3">第1个h3</h3>
    <div>
        <h4 class="h4">第1个h4</h4>
        <h4 class="h4">第2个h4</h4>
    </div>
    
    
    <h2 class="h2">h2标签</h2>
    <div>
        <h2 class="h2">div下的h2</h2>
    </div>
    <p>p标签的内容不水平居中</p>

</body>
</html>

伪类与属性选择器

  1. 伪类选择器

    • 伪类选择器优先级和类选择器相同

    • 选择器:nth-child():先确定位置,再筛选选择器,在同一结构下都是相同选择器时使用
    • 选择器:nth-of-type:先确定选择器,在确定位置,在同一结构下不全是相同选择器时使用

  2. 属性选择器

    • 属性选择器优先级和类选择器相同
    • [属性名]查找所有有该属性的标签
    • [属性名=属性值]精确查找
    • [属性名^=值]以某某值开头
    • [属性名*=值]包含某某值(模糊查询)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类选择器</title>
    <style>
        .p {
            background-color: orange;
        }

        /*先确定位置,再筛选选择器*/
        p:nth-child(3) {
            background-color: red;
        }

        /*先确定选择器,在匹配位置*/
        p:nth-of-type(3) {
            background-color: brown;
        }

        p.p3 {
            background-color: cyan;
        }
    </style>

    <style>
        .h4 {
            color: orange;
        }
        [class='h4'] {
            color: brown;
        }
        [owen*='owen'] {
            color: pink;
        }
        [owen^='o'] {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <h4 class="h4" owen="oooowennnnn">owen</h4>
    <h4 class="h4" owen="zero">zero</h4>

    <div>
        <p class="p">第1个p</p>
        <p class="p">第2个p</p>
        <p class="p p3">第3个p</p>
        <p class="p">第4个p</p>
        <p class="p">第5个p</p>
    </div>
    <div>
        <div>
            <h3>h3标签</h3>
            <p class="p">第1个p</p>
            <p class="p">第2个p</p>
            <p class="p">第3个p</p>
            <p class="p">第4个p</p>
            <p class="p">第5个p</p>
        </div>
    </div>
</body>
</html>

a标签的四大伪类

a标签的四种状态,可以有不同的样式

  1. a:link :标签未被访问过
  2. a:hover :标签被悬浮,就是鼠标放上去的时候
  3. a:active :标签被激活,就是鼠标点击但未打开链接
  4. a:visited :标签被访问过,打开链接了
!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a标签的四大伪类</title>
    <style>
        /*一、a的四大伪类*/
        a {
            font-size: 30px;
        }
        /*1、标签没有被访问过*/
        a:link {
            color: orange;
        }
        /*2、标签被悬浮*/
        a:hover {
            /*鼠标样式*/
            /*wait row-resize none text pointer default*/
            cursor: pointer;
        }
        /*3、标签被激活*/
        a:active {
            color: pink;
            cursor: wait;
        }

        /*4、标签已被访问过*/
        a:visited {
            color: brown;
        }
    </style>

    <style>
        /*二、reset操作*/

        /*在开发中往往用不到四种伪类,且要清除掉系统的默认样式*/
        /*就可以如下对a标签进行样式设置:清除系统默认样式 - reset操作*/
        a {
            color: black;
            text-decoration: none;
        }
    </style>
    <style>
        /*三、普通标签的伪类运用*/
        .btn {
            width: 80px;
            height: 45px;
            background-color: orange;
        }
        /*字体*/
        .btn {
            font: bold 20px/45px 'STSong';
            text-align: center;
        }
        /*边界圆角*/
        .btn {
            border-radius: 5px;
        }
        /*不允许文本操作*/
        body {
            user-select: none;
        }

        /*伪类*/
        .btn:hover {
            cursor: pointer;
            background-color: orangered;
        }
        .btn:active {
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="btn">按钮</div>
    <a href="https://www.baidu.com">前往百度</a>

</body>
</html>

字体样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本属性</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orangered;
        }
        .box {
            /*大小*/
            font-size: 30px;
            /*颜色*/
            color: blue;
            /*字族*/
            font-family: "STSong", "新宋体", "Arial";
            /*字重: lighter | normal | bold | 100 ~ 900*/
            font-weight: 500;
            /*字体样式: normal | italic | oblique */
            font-style: oblique;
        }
        .box {
            /*文本划线: underline | line-through | overline | none*/
            text-decoration: none;

            /*文本水平位置: left center right*/
            text-align: center;

            /*行高*/
            line-height: 300px;
            
            /*文本垂直对齐方式: baseline top bottom*/
            vertical-align: top;
        }
        .box {
            /*整体设置*/
            font: bold 20px/300px '黑体', 'Arial';
            color: darkcyan;
            text-align: left;
            
            /*首行缩进*/
            text-indent: 20px;
            /*字间距*/
            letter-spacing: 10px;
            /*词间距*/
            word-spacing: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        文本ABC ab
    </div>
</body>
</html>

边界圆角

border-radius属性,默认从左上角开始,顺时针编号,当不足的时候,就和对角相同,如果要进行横纵分离,用/分开,先横后纵

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>边界圆角</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orangered;
        }
        .box {
            /*固定值 | 百分比*/
            /*border-radius: 10%;*/

            /*左上为第一个角,顺时针编号*/
            /*border-radius: 10px 20px 30px 40px;*/

            /*不足找对角*/
            /*border-radius: 10px 50px 100px;*/
            /*border-radius: 10px 50px;*/

            /*横纵分离,先横后纵*/
            /*border-radius: 50px / 50%;*/
            /*border-radius: 50px 100px / 50%;*/

            border-radius: 60%;
        }
    </style>
    <style>
        .b {
            width: 300px;
            height: 150px;
            background-color: orangered;
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="b"></div>
</body>
</html>

背景图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景图片</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orangered;
        }

        .box {
            /*显示比屏幕大的图片:缩放尺寸*/
            /*background-image: url("img/kj.gif");*/
            /*尽量只设置宽,高等比缩放,不失真*/
            /*background-size: 300px 300px;*/
        }

        .box {
            /*显示比屏幕小的图片:处理平铺与位置*/
            background-image: url("img/lss.jpg");
            /*平铺: repeat-x repeat-y repeat no-repeat*/
            background-repeat: no-repeat;
            /*位置*/
            /*1.只设置x轴,y轴默认center*/
            /*2.x轴:left center right 具体像素 百分百*/
            /*2.y轴:top center bottom 具体像素 百分百*/
            background-position: center center;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

显示方式

display属性

  1. block:自带换行,支持设置宽高,所有有宽高、参与位置布局的都是block
  2. inline:不自带换行,也不支持设置宽高,宽高只能通过文本撑开,一行显示不下会自动换行(保留数据的整体性)
  3. inline-block:支持设置宽高,不带换行,当一行显示不下时,以标签为整体进行换行,一般不去主动设置该显示方式,系统的两个img、input都设置为了单标签(不会嵌套任何东西),如果要用inline-block参与布局,为了标签布局不受内容影响,设置vertical-align对齐属性
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显示方式</title>
    <style>
        .box {
            width: 500px;
            height: 100px;
            background-color: orangered;
        }
    </style>
    <style>
        a {
            width: 500px;
            height: 100px;
            display: block;
            background-color: pink;
        }
        owen {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: cyan;
            font-size: 30px;

            /*文本垂直对齐方式: baseline top bottom*/
            vertical-align: top;
        }
        owen:nth-of-type(2) {
            font-size: 20px;
        }

        img {
            width: 100px;
            height: 100px;
            background-color: tan;
        }
        input {
            width: 100px;
            height: 100px;
            background-color: tan;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <a href="5.边界圆角.html" class="box"></a>

    <div>div1</div>
    <div>div2</div>

    <a href="">a1</a>
    <a href="">a2</a>

    <owen>html/css</owen>
    <owen>javascript</owen>
    <owen></owen>
    <owen></owen>
    <owen></owen>
    <img src="img/lss.jpg" alt="">
    <input type="text">
    
    <div></div>
</body>
</html>

两种布局方式

盒模型布局

盒模型组成:margin + border + padding + content

  1. 每部分都有自己的独立区域

  2. content是宽x高,作为内容或子标签的显示区域

  3. padding是内边距,没有自身颜色,完成内容的内移(保证显示区域大小不变,可以响应减小content)

  4. border是边框,有宽度、样式、颜色,自身透明(transparent)时,是可以透出背景颜色的

  5. margin是外边距,控制盒子的显示位置,left、top控制自身,right、bottom影响兄弟
    • 注意:margin的偏移依据当前所在位置
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型布局</title>
    <style>
        body {
            margin: 0;
            padding: 100px 0 0 200px;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        owen {
            /*margin: 10px;*/
            margin-top: 50px;
            margin-left: 10px;
            /*margin-right: 10px;*/
            /*margin-bottom: 100px;*/
        }

        owen {
            /*border-color: black;*/
            /*border-width: 3px;*/

            /*none solid dashed dotted*/
            /*border-style: solid;*/

            border: red dashed 10px;
        }

        owen {
            /*padding: 上右下左,不足找对边*/
            /*padding: 10px 20px 30px;*/
            padding: 10px;
        }
        owen {
            display: block;
            /*width: 100px;*/
            width: 80px;
            /*height: 100px;*/
            height: 80px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!--
    盒模型:
    概念:广义上页面中所有的标签都称之为盒子,狭义上布局的盒子指的是display:block
    -->
    <owen>123</owen>
    <div></div>
</body>
</html>

浮动布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动布局</title>
    <style>
        .wrap {
            border: 10px solid yellow;
            width: 300px;
            /*父级在宽度不固定时高度不能设置死*/
            /*height: 300px;*/
        }
        /*清浮动:父级清浮动,就是在自己宽度是否确定下,都能保证父级的高度刚刚好包裹子集*/
        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            font: 20px/100px 'Arial';
            color: blue;
            text-align: center;
        }
        .box {
            float: left;
        }
        .b {
            width: 500px;
            height: 100px;
            background-color: red;
        }
        /*浮动布局:
        1.子集浮动参照父级宽度
        2.子集浮动不再撑开父级高度
        3.父级高度需要自己处理,否则会影响兄弟布局,采用清浮动处理
        */
    </style>
    <style>

        h1:before {
            content: '123';
        }
        /*当控制的控制自身完成所有布局(包含所有子集布局),再执行该时间点*/
        h1:after {
            content: '000';
        }
    </style>
</head>
<body>
    <h1>内容</h1>

    <!--.wrap>.box{$}*9-->
    <div class="wrap">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
    </div>
    <div class="b"></div>
</body>
</html>

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>两种布局总结</title>

    <style>
        body, h1 {
            margin: 0;
        }
    </style>
    <style>
        .header {
            width: 1210px;
            height: 100px;
            background-color: orange;
            /*自动获取留白区域*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            margin: 0 auto;
        }
        .header:after {
            content: '';
            display: block;
            clear: both;
        }
        .header a {
            display: block;
            width: 500px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .header form {
            /*background-color: pink;*/
            float: right;
            /*父子级顶端产生距离,建议使用padding*/
            padding-top: 30px;
        }
        .header input {
            /*margin-right: 20px;*/
            width: 220px;
            height: 30px;
            border: none;
            font-size: 17px;
            vertical-align: top;
        }
        .header button {
            width: 32px;
            height: 32px;
            border: none;
            background-color: red;
            outline: none;
            color: white;
            margin-right: 30px;
            vertical-align: top;
        }

    </style>
</head>
<body>
    <!--盒模型:margin、padding协调操作,能用padding尽量用padding,再考虑用margin-->
    <!--浮动:需要左右排列的block采用浮动布局,且父级一定要清浮动-->
    <div class="header">
        <h1>
            <a href=""></a>
        </h1>
        <form method="get" action="https://www.baidu.com/s">
            <input type="text" name="wd">
            <button type="submit">Go</button>
        </form>
    </div>
</body>
</html>

显示与隐藏

  1. 通过display属性,可以做到盒子的显示与隐藏,当设置为none的时候,盒子在页面中不进行占位,不可以做成动画
  2. 通过opacity属性,设置页面透明度,0~1之间,当设为0的时候,则是消失,但是会在页面中占位,可以做成动画
  3. 通过改变盒子的宽高进行,当宽和高都设为0的时候,就是隐藏的状态,此时不会再页面中占位,可以做成动画
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显示与隐藏</title>
    <style>
        body {
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: orange;
            font: 30px/200px 'Arial';
            color: red;
            text-align: center;
            margin: 0 auto;
            border-radius: 50%;
        }
    </style>
    <style>
        /*display
        值为none时,盒子会被隐藏,且不在页面中占位
        */
        .box2 {
            display: none;
            transition: 1s;
        }
        .box1:hover ~ .box2 {
            display: block;
        }
        .box2:hover {
            display: block;
        }
    </style>
    <style>
        /*opacity
        值为0~1,控制盒子的透明度,但是消失后,在页面中占位
        */
        .box4 {
            /*背景颜色不能操作文本*/
            /*background-color: rgba(0,0,0,0);*/
            opacity: 0;
            /*过度效果*/
            transition: 1s;
        }
        .box3:hover ~ .box4 {
            opacity: 1;
        }
        .box4:hover {
            opacity: 1;
        }
    </style>

    <style>
        .box6 {
            width: 0;
            height: 0;
            /*超出content以外的内容如何处理:hidden隐藏*/
            overflow: hidden;
            transition: 1s 0s ease;
            /*过渡的属性个数可以自定义*/
            /*transition-property: width, background-color, height;*/
            transition-property: all;
        }
        .box5:hover ~ .box6 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box6:hover {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
</body>
</html>

盒子阴影

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子阴影</title>
    <style>
        .box {
            width: 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;
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

三种定位方式

固定定位

  1. 定位属性值:fixed

  2. 在页面中不再占位(浮起来了)

  3. 一旦定位后,定位的布局方位 top、bottom、left、right都能参与布局

  4. 固定定位的参考系是页面窗口(不是页面中的哪一点,而是四边参照四边)

  5. 左右同时存在,取左;同理上下取上

绝对定位

  1. 定位属性值:absolute

  2. 在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)

  3. 一旦定位后,定位的布局方位 top、bottom、left、right都能参与布局

  4. 绝对定位的参考系是最近的定位父级(不是父级中的哪一点,而是四边参照四边)

  5. 左右同时存在,取左;同理上下取上

  6. 当父级定位了,子级参照父级定位,又可以重新获取父级宽度(也可以在计算中拿到父级高度)

相对定位

  1. 定位属性值:relative

  2. 在页面中依旧占位,完全保留之前的所有布局

  3. 一旦定位后,定位的布局方位 top、bottom、left、right都能参与布局

  4. 相对定位的参考系是自身原有位置(当前位置)(不是自身中的哪一点,而是四边参照四边)

  5. 左右同时存在,取左;同理上下取上,布局移动后,也不影响自身原有位置(兄弟布局也不会变化)

作用:辅助于子级的绝对定位布局,一般不用于自身布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三种定位方式</title>
    <style>
        html, body {
            min-width: 1000px;
        }
        body {
            margin: 0;
            height: 5000px;
        }

        .box {
            width: 260px;
            height: 420px;
            background-color: orange;
        }
        /*固定定位*/
        .box {
            position: fixed;
            /*left: 10px;*/
            right: 10px;
            /*bottom: 50%;*/
            top: calc(50% - 210px);
        }

        /*响应式布局*/
        /*@media (min-width: 1000px) {*/
            /*.box {*/
                /*position: fixed;*/
                /*!*left: 10px;*!*/
                /*right: 10px;*/
                /*bottom: 10px;*/
                /*top: 10px;*/
            /*}*/
        /*}*/
    </style>
    
    <style>
        .sup {
            width: 180px;
            height: 260px;
            background-color: orange;
            margin: 100px auto;
        }
        .sub {
            width: 50px;
            height: 80px;
            background-color: red;
        }

        /*绝对定位*/
        .sub {
            position: absolute;
            left: calc(50% - 25px);
            right: 0;
            bottom: 0;
            top: calc(50% - 40px);
        }
        /*需求:
        1)父级需要定位 - 辅助自己绝对定位,作为自己绝对定位的参考系
        2)父级定位了,但是不能影响自身原有布局 - 虽然定位,但是不浮起来
        结论:相对定位 => 父相子绝
        */
        .sup {
            /*父级相对定位的目的:1)不影响自身布局 2)辅助自己绝对定位布局*/
            position: relative;
        }
        /*body {*/
            /*width: 1000px;*/
            /*height: 600px;*/
            /*position: fixed;*/
        /*}*/
        /*.sup {*/
            /*position: fixed;*/
        /*}*/
    </style>
    
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            margin: 0 auto;
        }
        .h1 {
            margin: 0;
        }
        /*相对定位*/
        .box1 {
            position: relative;
            /*left: -10px;*/
            bottom: 20px;
            top: 400px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
    <h1>h1h1h1</h1>
    <h1>h1h1h1</h1>
    <h1>h1h1h1</h1>
    
    <div class="sup">
        <div class="sub"></div>
        <h3>hhhhhhhhhhhh</h3>
    </div>
    
    <h1 class='h1'>
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </h1>
    <div class="box1"></div>
    <h1 class='h1'>
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </h1>
    
</body>
</html>

小米悬浮商品案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绝对定位案例</title>
    <style>
        body {
            margin: 0;
            background-color: tomato;
        }
        .box {
            width: 234px;
            height: 300px;
            background-color: white;
            margin: 100px auto 0;
            /*父相子绝*/
            position: relative;
        }
        .title {
            width: 64px;
            height: 20px;
            background-color: #e53935;
            font-size: 12px;
            color: white;
            text-align: center;
            /*绝对定位*/
            position: absolute;
            top: 0;
            left: calc(50% - 32px);
            /*默认消失,有数据就 show 显示*/
            display: none;
        }
        .show {
            display: block;
        }

        /*大家都定位浮起来,很容易出现层次重叠 z-index绝对显示层次*/
        /*z-index: 值为大于等于1的正整数,不需要有序*/
        .title {
            z-index: 666;
        }
        .img {
            z-index: 10;
        }


        .img {
            position: absolute;
            top: 35px;
            left: calc(50% - 75px);
        }
        .img img {
            width: 150px;
            /*高会等比缩放*/
        }

        .logo {
            position: absolute;
            bottom: 70px;
            font-size: 15px;
            text-align: center;
            width: inherit;
        }
        .price {
            text-align: center;
            position: absolute;
            width: inherit;
            bottom: 30px;
            font-size: 14px;
        }
        .price span:first-child {
            color: #ff6700;
        }
        .price span:last-child {
            text-decoration: line-through;
            color: #aaa;
        }

        .bottom {
            width: inherit;
            height: 0;
            background-color: yellow;
            z-index: 888;
            transition: .2s;
            /*将超出内容隐藏*/
            overflow: hidden;
            position: absolute;
            bottom: 0;
        }
        .box:hover .bottom {
            height: 80px;
        }
        .box {
            transition: .2s;
        }
        .box:hover {
            box-shadow: 0 5px 10px 0 #ccc;
            margin-top: 95px;
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="title show">减 100 元</div>
        <!--外层完成位置布局,内存完成内容展示-->
        <div class="img">
            <img src="img/001.jpg" alt="">
        </div>
        <h3 class="logo">小米电视4A 32寸</h3>
        <p class="price">
            <span>699元</span>
            <span>799元</span>
        </p>
        <div class="bottom">
            <h5>嘻嘻嘿嘿哈哈-呵呵!!!</h5>
            <p>来自<a href="">Owen</a>的评论</p>
        </div>
    </div>

</body>
</html>

overflow属性

? 1)默认子级(内容)超出父级显示区域,不会做任何处理(正常显示)
? 2)overflow: hidden; - 隐藏超出的内容
? 3)overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位)
? 4)overflow: auto; - 有超出内容才以滚动方式显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>overflow属性</title>
    <style>
        .box {
            width: 200px;
            height: 300px;
            background-color: pink;
        }
        .box {
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box">
    检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。对于 table 来说,假如 table-layout 属性设置为 fixed ,则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ,那么超出 td 尺寸的内容将被剪切。如果设为 visible ,将导致额外的文本溢出到右边或左边(视 direction 属性设置而定)的单元格。自IE5开始,此属性在MAC平台上可用。自IE6开始,当你使用 !DOCTYPE 声明指定了 standards-compliant 模式,此属性可以应用于 html 对象。对应的脚本特性为 overflow 。
    </div>
</body>
</html>

轮播图菜单案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>布局案例</title>
    <link rel="stylesheet" href="css/reset.css">

    <style>
        .scroll-view {
            width: 1226px;
            height: 460px;
            background-color: orange;
            margin: 50px auto 0;

            position: relative;
        }

        .scroll-menu {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            width: 234px;
            padding: 20px 0;
        }
        .scroll-menu a {
            display: block;
            /*height: 42px;*/
            line-height: 42px;
            color: white;
            /*padding-left: 30px;*/
            text-indent: 30px;
        }
        .scroll-menu a span {
            /*参考的不是a,是ul*/
            position: absolute;
            right: 20px;
        }
        .scroll-menu a:hover {
            background-color: red;
        }

        .scroll-menu-blank {
            width: calc(1226px - 234px);
            height: 460px;
            background-color: red;
            /*参考的是ul*/
            position: absolute;
            top: 0;
            left: 234px;
            display: none;
        }

        .scroll-menu li:hover ~ .scroll-menu-blank {
            display: block;
        }
        .scroll-menu-blank:hover {
            display: block;
        }
    </style>
</head>
<body>
    <div class="scroll-view">
        <!--轮播图-->
        <div class="scroll-scroll"></div>
        <!--菜单栏-->
        <ul class="scroll-menu">
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <li>
                <a href="">
                    手机电话卡
                    <span>&gt;</span>
                </a>
            </li>
            <div class="scroll-menu-blank">

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

CSS基础

标签:总结   aaa   透明度   sts   方式   and   java   响应   ast   

原文地址:https://www.cnblogs.com/Hades123/p/11296167.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!