CSS （中）

前言：属性有很多种，需要自己会查手册，这里只是速记有个印象，用的时候要想的起来。

第七章用CSS 设置背景颜色和背景图像

第一节：设置背景颜色
第二节：设置背景图像
第三节：设置背景图像平铺
第四节：设置背景图像位置
第五节：设置背景图片位置固定

<title>设置背景颜色</title>
</head>
<body style="background-color: blue;">
<h1 style="background-color: red;">这是一个神奇的标题</h1>
------------------------------------------------------------------------


<title>设置背景图像</title>
</head>
<body style="background-image: url(../grid.jpg)">
<h1 style="background-color: red;">这是一个神奇的标题</h1>
------------------------------------------------------------------------

<title>设置背景图像平铺</title>
</head>
<body style="background-image: url(../grid.jpg)">
<div style="background-image: url(../banner.jpg);background-repeat: repeat-x;height: 96px;border: 1px red solid;">这是一个神奇的标题</div>
</body>
</html>
------------------------------------------------------------------------

<title>设置背景图像位置</title>
</head>
<body style="background-image: url(../dog.jpg);background-repeat: no-repeat;background-position: 20px 40px">
<h1 style="background-color: red;">这是一个神奇的标题</h1>
<p>狗，亦称“犬”，学名“家犬”，与马、牛、羊、猪、鸡并称“六畜”，是人类的主要食物来源之一，有科学家认为狗是由早期人类从灰狼驯化而来，驯养时间在4万年前至1.5万年前，发展至今日，狗大体上可分肉用犬（肉狗）、工作犬、宠物犬、交配犬、军用犬、格斗犬</p>
<p>狼在14000年前，甚至可能在 剪纸狗照片集锦16000年前的亚洲东南部，就已经被人类从野生狼驯化为家畜，即狗来玩、打猎、看家护院。
研究人员对来自世界各地的12条狼，以及代表14个不同品种的60只狗进行了全基因组测序。他们通过寻找狗与狼之间显示最大差异的序列，或在犬种中保持一致而在狼中存在差异的序列，搜查了进化标记。最终拿出了一个包含36个区域，总共122个基因的名单。其中一半的区域包含脑基因。其中有6个区域，10个基因与脂肪和淀粉消化相关。具体来说，狗携带了额外拷贝的淀粉酶基因，相比于狼同类。此外，狗生成的麦芽糖酶-葡糖淀粉酶要多12倍，这是因为该酶基因发生了数个突变。第三种基因SGLT1突变提高了肠道糖吸收蛋白质的功能。[1]</p>
</body>
------------------------------------------------------------------------

<title>设置背景图片位置固定</title>
</head>
<body style="background-image: url(../dog.jpg);background-repeat: no-repeat;background-position: 20px 40px;background-attachment: fixed;">
<h1 style="background-color: red;">这是一个神奇的标题</h1>
<p>狗，亦称“犬”，学名“家犬”，与马、牛、羊、猪、鸡并称“六畜”，是人类的主要食物来源之一，有科学家认为狗是由早期人类从灰狼驯化而来，驯养时间在4万年前至1.5万年前，发展至今日，狗大体上可分肉用犬（肉狗）、工作犬、宠物犬、交配犬、军用犬、格斗犬</p>
<p>狼在14000年前，甚至可能在 剪纸狗照片集锦16000年前的亚洲东南部，就已经被人类从野生狼驯化为家畜，即狗来玩、打猎、看家护院。
研究人员对来自世界各地的12条狼，以及代表14个不同品种的60只狗进行了全基因组测序。他们通过寻找狗与狼之间显示最大差异的序列，或在犬种中保持一致而在狼中存在差异的序列，搜查了进化标记。最终拿出了一个包含36个区域，总共122个基因的名单。其中一半的区域包含脑基因。其中有6个区域，10个基因与脂肪和淀粉消化相关。具体来说，狗携带了额外拷贝的淀粉酶基因，相比于狼同类。此外，狗生成的麦芽糖酶-葡糖淀粉酶要多12倍，这是因为该酶基因发生了数个突变。第三种基因SGLT1突变提高了肠道糖吸收蛋白质的功能。[1]</p>
</body>
------------------------------------------------------------------------

View Code

第八章 CSS盒模型

第一节：盒模型基本概念

盒模型：

width / height 指内容区域的宽度和高度
相框边框 - > border
画和相框边框的距离 -> padding
相框之间的距离 -> margin

第二节：边框 (谷歌浏览器看盒模型很好)
border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式

第三节：内边距
用 padding设置内边距

第四节：外边距
用 margin 设置外边距

<style type="text/css">
    #outerBox1{
        border-width: 2px;
        border-color: red;
        border-style:solid;
        padding: 40px;
        margin: 10px;
    }
    
    #outerBox2{
        border: thick blue dashed;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 2px;
        
        margin-top: 20px;
        margin-right: 10px;
        margin-bottom: 5px;
        margin-left: 2px;
    }
    
    #outerBox3{
        border-top: thick blue dashed;
        border-right: 2px red solid;
        border-bottom: thin yellow dotted;
        border-left: 2px red solid;
        padding: 20px 10px 5px 2px;
        margin: 20px 10px 5px 2px;
    }
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>

View Code

第五节：网页布局与盒模型
1，标准文档流
标准文档流：指在不使用其他与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则；

2，块级元素VS行内元素
块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如<div>；
行内元素：以普通的一个 DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如<span>；

<title>块级元素VS行内元素</title>
</head>
<body>
<h1>块级元素</h1>
<div>块1</div>
<div>块2</div>
<div>块3</div>
<h1>行内元素</h1>
<span>块1</span>
<span>块2</span>
<span>块3</span>
</body>

View Code

第六节：盒子在标准流中的定位

1，行内元素之间的水平margin (相加)
marin-right + margin-left

2，块级元素之间的竖直margin
Margin-bottom margin-top 以大的为标准

3，嵌套盒子之间的margin
子块的 margin 将以父块的内容为参考

4，margin属性可以设置成负值

<title>行内元素之间的水平margin</title>
</head>
<body>
<span style="margin-right: 10px;">块1</span>
<span style="margin-left: 10px;">块2</span>
-----------------------------------------------------------------
<title>块级元素之间的竖直margin</title>
</head>
<body>
<div style="margin-bottom: 10px;">块1</div>
<div style="margin-top: 5px;">块2</div>
</body>

-----------------------------------------------------------------
<title>嵌套盒子之间的margin</title>
</head>
<body>
<div style="margin: 10px;">块1
<div style="margin-top: 20px;">块2</div></div>
</body>

-----------------------------------------------------------------
<title>margin属性可以设置成负值</title>
</head>
<body>
<span style="margin-right: 10px;">块1</span>
<span style="margin-left: -30px;">块2</span>
</body>

-----------------------------------------------------------------

View Code

第九章盒子的浮动与定位

第一节：盒子浮动float
Float 属性：
默认是 none ，按照标准流来定位；
Left：左悬浮；（脱离文档移动，不占用空间。）
Right：右悬浮；

<title>盒子浮动float right</title>
<style type="text/css">
    .parent{
        padding:5px;
        background-color: yellow;
        border: 1px solid red;
    }
    
    .d1{
        float:left;
        margin:5px;
        background-color: gray;
        border: 1px solid gray;
    }
    
    .d2{
        float:right;
        margin:5px;
        background-color: blue;
        border: 1px solid blue;
    }
    
    p{
        margin:5px;
        background-color: green;
        border: 1px solid green;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="d1">盒子A</div>
    <div class="d2">盒子B</div>
    <p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>

View Code

第二节：使用 clear清除浮动的影响
Clear 属性：
默认是 none，允许两边都可以有浮动对象；
Left：不允许左边有浮动对象
Right：不允许右边有浮动对象
Both：不允许有浮动对象

<title>使用clear清除浮动的影响 both</title>
<style type="text/css">
    .parent{
        padding:5px;
        background-color: yellow;
        border: 1px solid red;
    }
    
    .d1{
        float:left;
        margin:5px;
        height:100px;
        background-color: gray;
        border: 1px solid gray;
    }
    
    .d2{
        float:right;
        margin:5px;
        height:50px;
        background-color: blue;
        border: 1px solid blue;
    }
    
    p{
        clear:both;
        margin:5px;
        background-color: green;
        border: 1px solid green;
    }
</style>
</head>
<body>
<div class="parent">
    <div class="d1">盒子A</div>
    <div class="d2">盒子B</div>
    <p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
</html>

View Code

第三节：盒子定位position
Position 属性：
默认是 static，按照标准流来定位；（也叫普通流。）

　　在普通流中定位，页面中的块级元素框从上到下一个接一个地排列，内联元素将在一行中从左到右排列水平布置。

Relative：相对定位，相对于原本的标准位置偏移指定的距离；元素仍然保持其未定位前的形状，它原本所占的空间仍保留。static 值和相对定位（relative值）都是普通流定位。相对定位之所以被看作普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置。）
Absolute：绝对定位，以它的包含框为基准进行偏移；（包含框：最近的有position属性的，例子中.parent没有position属性的时候，div [son]会以body为基准）。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。绝对定位使元素的位置与文档流无关，因此不占据空间。
Fixed：固定定位，以浏览器窗口为基准进行定位；普通流中完全移除，因此也不占据空间。

<title>盒子定位position absolute</title>
<style type="text/css">
    .parent{
        position:relative;
        padding:15px;
        background-color: green;
        border: 1px solid red;
    }
    
    .son{
        position:absolute;
        left:0px;
        top:0px;
        padding:10px;
        background-color: blue;
        border: 1px solid gray;
    }
    
</style>
</head>
<body>
<div class="parent">
    <div class="son">儿子</div>
</div>
</body>
</html>

View Code

第四节：z-index空间位置
Z-index 空间位置，默认是 0，z-index 值大的页面位于其值小的上方；

<title>z-index空间位置</title>
<style type="text/css">
    img{
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: -1;
    }
    
</style>
</head>
<body>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<img src="../apple.jpg"/>
</body>
</html>

View Code

第五节：盒子 display属性
Display：
Inline：把元素变成内联元素；
Block：把元素变成块级元素；

none：让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

<title>盒子display属性</title>
</head>
<body>
<div  style="display: inline;">d1</div>
<div  style="display: inline;">d2</div>
<div  style="display: inline;">d3</div>
<span style="display: block;">s1</span>
<span style="display: block;">s2</span>
<span style="display: block;">s3</span>
</body>

View Code

补充：

overflow 属性规定如何处理如何处理不符合元素框的内容。

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

</html>

View Code

posted @ 2017-03-07 17:47 SKYisLimit 阅读(123) 评论(0) 收藏举报

刷新页面返回顶部

SKYisLimit

CSS （中）

公告