为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 #【study】HTML+CSS基础课程

#【study】HTML+CSS基础课程

2016.08.06 07:17 3119浏览
【study】HTML+CSS基础课程

@(学习)[前端技术]

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

隐性修改display属性

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

  • position:absolute
  • float:leftfloat:right

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

<div class="container">
    <a href="#" title="">点击这里</a>
</div>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}

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

元素垂直居中

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

<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:relativeleft: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:relativeleft:50%将元素进行偏移,然后设置子元素为postion:relativeleft:-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%;
}

课程来源:

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
Web前端工程师
手记
粉丝
11
获赞与收藏
53

关注TA,一起探索更多经验知识

作者手记排行榜

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消