【前端】css笔记（9）

<style>
div.container
{
   width:100%;
   margin:0px;
   border:1px solid gray;

}
div.header,div.footer
{
   padding:0.5em;
   color:white;
   background-color:gray;
   clear:left;
}
h1.header
{
   padding:0;
   margin:0;
}
div.left
{
   float:left;
   width:160px;
   margin:0;
   padding:1em;
}
div.content
{
   margin-left:190px;
   border-left:1px solid gray;
   padding:1em;
}
</style>

元素的水平对齐

margin属性

可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素：

<style>
.center
{
   margin:auto;
   width:70%;
   background-color:#b0e0e6;
}
</style>

ps：

如果宽度是 100％，对齐是没有效果的

position 属性

使用绝对定位：

<style>
.right
{
   position:absolute;
   right:0px;
   width:300px;
   background-color:#b0e0e6;
}
</style>

ps：

绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素

float 属性

<style>
.right
{
   float:right;
   width:300px;
   background-color:#b0e0e6;
}
</style>

padding属性

css中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:

<style>
.center
{
padding: 70px 0;

border: 3px solid green;
}
</style>

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

<style>
.center
{
padding: 70px 0;

border: 3px solid green;

text-align: center;
}
</style>

组合选择符

说明了两个选择器直接的关系

后代选取器

匹配所有指定元素的后代元素：

<style>
div p
{
background-color:yellow;
}
</style>

子元素选择器

只能选择作为某元素子元素的元素：

<style>
div>p
{
background-color:yellow;
}
</style>

相邻兄弟选择器

选择紧接在另一元素后的元素，且二者有相同父元素：

<style>
div+p
{
background-color:yellow;
}
</style>

ps：

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

普通相邻兄弟选择器

选取所有指定元素的相邻兄弟元素：

<style>
div~p
{
background-color:yellow;
}
</style>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>css整理</title>
</head>
<body>
    <style>
        img {
            float: right;
        }
    </style><!--右浮动-->

    <style>
        .thumbnail {
            float: left;
            width: 110px;
            height: 90px;
            margin: 5px;
        }
    </style><!--图片廊-->

    <style>
        .text_line {
            clear: both;
            margin-bottom: 2px;
        }
    </style><!--清除浮动-->

    <style>
        img {
            float: right;
            border: 1px dotted black;
            margin: 0px 0px 15px 20px;
        }
    </style><!--例子-->

    <style>
        div {
            float: right;
            width: 120px;
            margin: 0 0 15px 20px;
            padding: 15px;
            border: 1px solid black;
            text-align: center;
        }
    </style><!--例子-->

    <style>
        span {
            float: left;
            width: 1.2em;
            font-size: 400%;
            font-family: algerian,courier;
            line-height: 80%;
        }
    </style><!--例子-->

    <style>
        div.container {
            width: 100%;
            margin: 0px;
            border: 1px solid gray;
        }

        div.header, div.footer {
            padding: 0.5em;
            color: white;
            background-color: gray;
            clear: left;
        }

        h1.header {
            padding: 0;
            margin: 0;
        }

        div.left {
            float: left;
            width: 160px;
            margin: 0;
            padding: 1em;
        }

        div.content {
            margin-left: 190px;
            border-left: 1px solid gray;
            padding: 1em;
        }
    </style><!--例子-->

    <style>
        .center {
            margin: auto;
            width: 70%;
            background-color: #b0e0e6;
        }
    </style><!--自动指定-->

    <style>
        .right {
            position: absolute;
            right: 0px;
            width: 300px;
            background-color: #b0e0e6;
        }
    </style><!--绝对定位-->

    <style>
        .right {
            float: right;
            width: 300px;
            background-color: #b0e0e6;
        }
    </style>

    <style>
        .center {
            padding: 70px 0;
            border: 3px solid green;
        }
    </style>

    <style>
        .center {
            padding: 70px 0;
            border: 3px solid green;
            text-align: center;
        }
    </style>

    <style>
        div p {
            background-color: yellow;
        }
    </style><!--后代选取器-->

    <style>
        div > p {
            background-color: yellow;
        }
    </style><!--子元素选择器-->

    <style>
        div + p {
            background-color: yellow;
        }
    </style><!--相邻兄弟选择器-->

    <style>
        div ~ p {
            background-color: yellow;
        }
    </style><!--普通相邻兄弟选择器-->

</body>
</html>