#【study】HTML+CSS基础课程

347 查看

【study】HTML+CSS基础课程

@(学习)[前端技术]

虽然是基础课程，但还是想学习一遍。

隐性修改display属性

将元素设置为绝对定位或者浮动，元素的display属性会变成inline-block

position:absolute
float:left或float:right

简单说就是，在页面中有元素设置了上面的两种属性，那么元素就会变成inline-block，这样行内元素就可以设置width和height了。如下代码

<div class="container">
    <a href="#" title="">点击这里</a>
</div>

.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}

如果a标签没有设置浮动或者绝对定位，设置width是无效的。但是如果指定了，就可以设置width和height了。

元素垂直居中

父元素高度固定的单行文本
将line-height和height设置为相同的值。这种设置方式的弊端：如果文字长度超过了元素的宽度，文本会溢出。

<div class="container">
    helo,world!
</div>

.container{
    height:100px;
    line-height:100px;
    background:#999;
}

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。(PS：这个对行间距最好的解释)

父元素高度固定的多行文本（插入table）
给父元素插入table、tbody、tr、td。因为td元素默认存在vertical-align:middle，所以设置元素会垂直居中。

<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>

  .wrap{height:300px;background:#ccc}

父元素高度固定的多行文本（设置table-cell）
IE8+以上浏览器，可以设置元素display:table-cell同时设置vertical-align:middle。

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

.container{
    height:300px;
    background:#ccc;

    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}

元素水平居中

行内元素设置水平居中
如果设置文本、图片等行内元素水平居中，只需要将父元素设置text-align:center。代码如下：

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

.txtCenter{
  text-align:center;
}

定宽块状元素水平居中
当元素满足定宽和块状两个条件时，通过设置margin-left:auto;和margin-right:auto;来设置水平居中。

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

不定宽块状元素的水平居中
不定宽块状元素的水平居有三种方式：

加入 table 标签（这种方式一般不使用）
设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

将块级元素设置为inline
将块级设置为display:inline，然后通过设置行内元素居中text-align:center来达到水平居中。

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

.container{
    text-align:center;  /*父级元素设置文本居中*/
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;/*将块级元素设置为inline*/
}
.container li{
    margin-right:8px;
    display:inline;
}

通过相对定位
将父元素设置为float:left并设置position:relative和left:50%将元素进行偏移，然后设置子元素为postion:relative和left:-50%进行水平居中。

实现的原理也比较简单，首先将父元素相对设置偏移50%，然后设置子元素相对偏移-50%。

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

/*父元素设置浮动和相对左偏移50%*/
.container{
    float:left;
    position:relative;
    left:50%
}
/*子元素设置相对左偏移-50%*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;

    position:relative;
    left:-50%;
}

课程来源：

HTML+CSS基础课程