search

博客列表 >常用选择器、内外边距、浮动

常用选择器、内外边距、浮动

虾搞技术Home
虾搞技术Home原创
2019年03月14日 15:16:07643浏览

记录11.13直播学习内容：css常用选择器、内外边距、浮动；

  1. CSS选择器：【优先级：内联>内部>外部】

    实例

    <!-- 讲解css层级样式表：内部，外部，内联
常用css选择器
选择器：需要改变样式html元素 -->
<!DOCTYPE html>
<html lang="en">
<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">
    <title>常用css选择器</title>
    <!-- 外部样式表，共享 -->
    <link rel="stylesheet" href="style.css">
    <!-- 内部样式表，针对单个文档 -->
    <style>
        /* 基础选择器 */
        /* 标记选择器 */
        body{}
        /* *通配符，作用于所有标签 */
        *{margin: 0;padding: 0;}
        /* id选择器 以“#”定义，特殊性：唯一*/
        #box{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: blueviolet;
        }
        /* 类选择器 以"."定义，用于描述一组元素的样式，class可以在多个元素中使用 */
        /* 单类 */
        /* .main{
            border: 1px solid #ccc;
        } */
        p.main{
            background: black;
        }
        /* 多类 */
        .l{
            width: 50px;
        }
        .s{
            height: 150px;
        }
        /* 选择器分组 选择器可以分享相同的声明  写法：用逗号将选择器隔开 */
        h1,h2,.main{
            font-size: 30px;
            border: 1px solid #888;
        }
        /* 派生选择器 通过元素文档中位置的上下文关系来定义杨书记  优点 使标更加简结 */
        /* css 后代选择器 */
        div span{
            font-size: 10px;
        }
        /* 子选择器  子选择器使用大于号*/
        p>span{
            color: red;
        }
        p>b>span{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <!-- 内联样式表 针对当前元素-->
    <!-- 元素同时拥有多个class样式 -->
    <p class="main l s" style="color:red;">外部</p>
    <div id="box" class="main"></div>
    <h1>我</h1>
    <h2>你</h2>
    <h3>他</h3>
    <div>
        <span>php中文网</span>
    </div>
    <p>
        <span>谷歌</span>
        <b><span>火狐</span></b>
    </p>
</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

  2. 元素的显示及内外边距


    实例

    <!DOCTYPE html>
<html lang="en">
<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">
    <title>元素的显示及内外边距</title>
    <style>
        /* 块级，行内，行内快相互转换 */
        /* display:inline  转换为行内元素*/
        /* display:inline-block 转换为行内块元素 */
        /* display:block 转换为块元素 */
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
        .first-p{
            width: 50px;
            height: 20px;
            background: #ccc;
        }
        input{
            width: 250px;
            height: 40px;
            background: rgb(182, 23, 161);
        }
        .line{
            display: inline;
            /* 宽高失效 */
            margin: 0  20px;
        }
        .block{
            display: block;
            /* 宽高有效 */
        }
    </style>
</head>
<body>
    <!-- 块级元素  独占一行  识别宽高 多个元素排列由上到下 -->
    <!-- div p ul li -->
    <div class="box"></div>
    <p class="first-p">标签</p>
    <!-- 行内元素 宽高无效，对margin仅能左右有效，上下无效，不会自动换行 多个元素由左到右-->
    <!-- span b  -->
    <span>span标签-行内元素！！</span>
    <b>b标签-行内元素</b>
    <!-- 行内块级元素  不自动行换，能够识别宽高  -->
    <!-- img input -->
    <input type="text">

    <!-- 行内，块状元素转换： -->
    <p class="line">块状换行内</p>
    <span class="block">行内转块状</span>
    
    <!-- 内外边距 margin、padding 
        padding 
        元素的内边距是在边框和内容区之间 -->
        <!-- 复合写法：上 右 下 左
            上下  左右
            上 左右 下 
        -->
</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    3.重点：浮动：

    实例

    <!DOCTYPE html>
<html lang="en">
<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">
    <title>浮动</title>
</head>
<body>
    <!-- float 属性实现元素的浮动，属性值：left right 
        浮动的框可以水平方向移动，直到它的外边缘碰到包含框或者另一个浮动为止
        注意：浮动使元素的位置与文档流无关（脱离文档流），不占据空间
    -->
    <style>
        *{margin: 0;padding: 0;}
        body{
            width: 1370px;
            margin: 0 auto;
        }
        .left{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            float: left;
        }
        .right{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            float: right;
        }
        .init{
            width: 100px;
            height: 100px;
            background-color:red;
        }
        .clear{
            clear: both;
        }
    </style>
    <div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <!-- 清楚浮动 占位 -->
    <div class="clear"></div>
    <!-- 脱离文档流，被遮挡 -->
    <div class="init"></div>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    4.综合实例：

    实例

    <!DOCTYPE html>
<html lang="en">
<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">
    <title>优酷案例</title>
    <link rel="shortcut icon" href="images/1.ico" type="image/x-icon">
    <style>
        *{margin: 0;padding: 0;}
        a{color: #000;text-decoration: none;}
        li{list-style: none; float: left;}
        small{font-size: 12px;color: #999;}
        .left{float: left;}
        .mr{margin-right: 10px;}
        .clear{clear: both;}
        .contents{
            /* background: rgb(205, 88, 209); */
            width: 1350px;
            margin: 0 auto;
        }
        .content{
            width: 100%;
            margin-top: 20px;
        }
        .contentUL{line-height: 60px;}
        .hot_tv img{
            width: 192px;
            height: 288px;
        }
        .big_show img{width: 394px;height: 280px;}
        .tab li{margin-left: 25px;}
        .tv_tab img{width: 193px;height: 118px;}
    </style>
</head>
<body>
    <div class="contents">
        <div class="content">
            <div class="contentUL">
                <h2>正在热播</h2>
            </div>
          <ul class="hot_tv">
              <li class="mr">
                <a href="">
                    <img src="images/a.jpg" alt=""><br>
                    <span>瞰中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 美了四季</small>
              </li>
              <li class=" mr">
                <a href="">
                    <img src="images/b.jpg" alt=""><br>
                    <span>摘金奇缘</span>
                </a><br>
                <small>摘金奇缘</small>
              </li>
              <li class="mr">
                <a href="">
                    <img src="images/c.jpg" alt=""><br>
                    <span>王牌对王牌</span>
                </a><br>
                <small>中国最红王牌大PK</small>
              </li>
              <li class="mr">
                <a href="">
                    <img src="images/d.jpg" alt=""><br>
                    <span>我们村里的人</span>
                </a><br>
                <small>回乡创业带动乡村发展</small>
              </li>
              <li class="mr">
                <a href="">
                    <img src="images/e.jpg" alt=""><br>
                    <span>黑色四叶草</span>
                </a><br>
                <small>黑色暴牛骑士团</small>
              </li>
              <li>
                <a href="">
                    <img src="images/f.jpg" alt=""><br>
                    <span>大城晓聚</span>
                </a><br>
                <small>大城晓聚</small>
              </li>
          </ul>
        <div class="clear"></div>
        </div>
        <div class="content">
            <div class="contentUL">
                <h2 class="left">剧集 ></h2>
            <ul class="tab left">
                <li><a href="">最新</a></li>
                <li><a href="">大陆剧</a></li>
                <li><a href="">日韩剧</a></li>
                <li><a href="">港台剧</a></li>
                <li><a href="">英美剧</a></li>
            </ul>
            <div class="clear"></div>
            </div>
            <div class="tv_show">
                <div class="big_show left mr">
                    <a href="">
                        <img src="images/tv.jpg" alt=""><br>
                        <span>逆流而上的你·爆笑</span>
                    </a><br>
                    <small>新晋辣妈萌爸！潘粤明马丽咸鱼夫妻带娃逆袭！</small>
                </div>
                <!-- <div class="left">

                </div> -->
                <ul class="tv_tab">
                    <li class="mr">
                        <a href="">
                            <img src="images/tv1.jpg" alt=""><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="images/tv2.jpg" alt=""><br>
                            <span>乡村爱情11</span>
                        </a><br>
                        <small>刘能赵四争C位</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="images/tv3.jpg" alt=""><br>
                            <span>小女花不弃</span>
                        </a><br>
                        <small>林依晨张彬彬苏甜来袭</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="images/tv4.jpg" alt=""><br>
                            <span>春暖花又开</span>
                        </a><br>
                        <small>姚芊羽李建上演新农村创业</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="images/tv5.jpg" alt=""><br>
                            <span>老中医</span>
                        </a><br>
                        <small>陈宝国冯远征许晴弘扬医道</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="images/tv6.jpg" alt=""><br>
                            <span>重耳传奇</span>
                        </a><br>
                        <small>春秋版“王子历险记”</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="images/tv7.jpg" alt=""><br>
                            <span>只为遇见你.甜蜜开播</span>
                        </a><br>
                        <small>霸气帅总撩动你的少女心</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="images/tv8.jpg" alt=""><br>
                            <span>国宝奇旅</span>
                        </a><br>
                        <small>刘烨袁姗姗携手护国宝</small>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

上一条：0313前端课程3下一条：margin(外边距)_padding(内边距)_float(浮动)详解——20190313
CSS选择器、边距、浮动
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多