CSS深入

块元素:div、h1、p等等。

列表的样式:

/*使用系统提供的一些样式:例如无序、有序都可以使用circle*/
ul{
    list-style-type: circle;
}
ol{
    list-style-type: circle;
}
/*使用图片,实现自定义*/
ul{
    /*图片要小一点*/
    list-style-image: url("../2.png");
    /*list-style: url("../2.png");*/    /*简写: 即image、position、type的事,它都可以干*/
}

<ul>
    <li>猫</li>
    <li>狗</li>
    <li>猪</li>
</ul>

 添加轮廓,突出内容:

p{
    /*使用outline添加一个轮廓:outline相当于一个简写,因为它可以设置所有的轮廓属性*/
    outline: auto;
    outline-color: aqua;
    outline-style: groove;
    outline-width: 2px;
}

<p>测试文本</p>

 CSS Box Model——对于一个元素而言:

盒子模型包含:content、padding、border、margin。

设置内边距padding:

td{
    /*padding: 100px;*/
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 100px;
    padding-right: 100px;
}

<table border="1">
    <tr>
        <td>盒子模型padding</td>
    </tr>
</table>

 设置边框border:

p{
    /* 1 样式、border-style: double;*/
    /*对每一边进行设置(可以将简写覆盖掉)*/
    border-top-style: double;
    border-bottom-style: double;
    border-left-style: double;
    border-right-style: double;
    /* 2 宽度、border-width: 2px;*/
    border-top-width: 2px;
    /* 3 颜色、border-color: red;*/
    border-bottom-color: red;
    /* 4、CSS3提供边框的:圆角、阴影、环绕图片*/
    border-radius: 5px;
    box-shadow: 10px 10px 2px red;
    /*不用线或者点了,用图片自定义(把前面的宽度、颜色、圆角、阴影注掉)*/
    /*border-image: url(http://www.w3school.com.cn/i/border.png) 30 30 round;*/
}

<p>一共定义了10种border-style</p>

外边距margin:

.margin{
    /*外边距默认为透明区域,可以接受任何长度单位或百分数*/
    /*margin: 100px;*/
    /*margin: 0px 10px 15px 20px;*/     /*上、右、下、左(顺时针)*/
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 100px;
    margin-right: 100px;
}

Box-Model结构设计:

body{
    /*将整个页面拟作一个盒子(一个元素),所以去掉body的干扰*/
    margin: 0;
}
.margin{
    margin: 100px;
}
.border{
    border: double;
}
.padding{
    padding: 100px;
}
.content{
    background-color: red;
    text-align: center;
}

<body>
    <!--描述Box Model的层次结构-->
    <div class="margin">
        <div class="border">
            <div class="padding">
                <div class="content">Box Model</div>
            </div>
        </div>
    </div>
</body>

 外边距合并(位置上的重叠):

/*重叠后,取margin较大者,作为新margin*/
.margin-one{
    margin-bottom: 100px;
}
.margin-two{
    margin-top: 50px;
}

<!--只有垂直方向存在合并-->
<div class="margin-one">margin-one</div>
<div class="margin-two">margin-two</div>

CSS定位:

定位的思想:定义该元素,相对于其正常、父元素、其他元素、浏览器窗口的位置。

三种基本的定位机制:普通流、绝对定位、浮动。默认所有框都在普通流中定位。

块级框之间的距离,只由框之间的垂直margin计算。行框:一行所有的框组合而成。

所有元素都是框:行内框inline+块框block,通过display更改
<a href="">a不设置</a>
<a href="" style="display: block">a设置block</a>
让指定元素没有框,因此不显示(没有框占文档的空间)
<p style="display: none">p设置none</p>
<p style="display: inline">p设置inline</p>
<p>p不设置</p>

相对定位(可看作普通流):

<p>.p1元素无论是否移动,都会占据其原来位置</p>
<p class="p1">相对定位</p>
<style>
    .p1{
        /*relative:采用相对定位 — 设置水平、垂直位置(可以为负数),就会相对于原来位置移动*/
        position: relative;
        left: 20px;     /*水平位置:left、right*/
        top: 20px;      /*垂直位置:top、bottom*/
    }
</style>

绝对定位:

绝对定位使元素的位置与文档流无关,因此不占据空间。

<p class="p1">采用绝对定位</p>
<span>绝对定位不占位置</span>
<style>
    .p1 {
        position: absolute;
        /*绝对定位的位置是相对于最近的已定位祖先元素;而对于其他元素,就像不存在一样*/
        left: 100px;
        top: 100px;
    }
</style>

浮动:

<p>test</p>
<style>
    p{
        /*所有元素都可以浮动*/
        /*假如在一行之上不足以容纳浮动元素,那么这个元素会继续占据下一行,直到能够容纳。*/
        float: right;   /*向右浮动;默认是none(不浮动),而不是left*/
        /*使用JS操纵:object.style.cssFloat="right"*/
    }
</style>

浮动不同于定位,对于浮动,就理解为如同在水中漂浮的元素:

<p>test</p>
<p>test</p>
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
<style>
    p{
        float: left;
        display: inline;
        background-color: purple;
        width: 30px;
    }
</style>

举例 —— 创建水平菜单:

<ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
</ul>
<style>
    ul{
        /*默认情况ul有margin-top、margin-bottom、padding-left(好像是来自user agent stylesheet)*/
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    li{
        /*看来li也是块*/
        display: inline;
    }
    a{
        float: left;
        width: 7em;
        text-decoration: none;
        color: white;
        background-color: purple;
        padding: 0.2em 0.6em;
    }
    a:hover{
        background-color: #ff3300;
    }
</style>

启用响应式:确保适当的屏幕缩放和绘制,需要添加viewport元信息:

<!-- content包含可选的属性:-->
<!-- width:控制设备屏幕宽度。initial-scale:确保网页加载时,1:1比例呈现,不会有缩放。
user-scalable:是否禁用用户的缩放操作。一般与maximum-scale=1.0一起使用 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">

 

posted @ 2017-02-12 15:56  不抛弃,不放弃  阅读(269)  评论(0编辑  收藏  举报