美文网首页
CSS常用知识点

CSS常用知识点

作者: MrAlexLee | 来源:发表于2017-02-05 18:41 被阅读20次

1,居中布局

语法:margin:0 auto;
将div框宽度设置为100%就能占满屏幕,如果不想占满屏幕,只希望在任何分辨率的屏幕上居中布局设定好的宽度,只需要定义宽度大小。此时是看不到div框的,可以设置高度,或者填充内容,内容高度即div高度。

2,关于display:inline-block

简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性

3,关于background-size:cover

在写手机端页面或者PC端页面的时候,如果要写一些纯色提示的,直接用background-size:cover来设置
HTML:
<code><div class="wrap-one">
<div class="bg"></div>
</div>
</code>
<code><div class="wrap-two">
<div class="tip">注意安全</div>
</div>
</code>
CSS:
<code>
.wrap-one{
margin: 0 auto;
width: 300px;
height: 100px;
background-color: rgb(48, 133, 133)
}
.bg{
background-color: rgba(0,0,0,.7);
background-size: cover;
padding-top: 20%;
}
.wrap-two{
margin: 0 auto;
width: 300px;
height: 90px;
background-color: #c7202f;
}
.tip{
line-height: 60px;
font-size: 14px;
text-align: center;
background-color: rgba(135, 25, 46, 0.7);
color: #FFF;
}

</code>

相关文章

  • CSS学习笔记

    CSS常用知识点 css概述:Cascading Style Sheets:层叠样式表 ​ 使用div标签+c...

  • web案例-css制作小米官网产品展示

    效果知识点: 企业布局思维的巧妙运用, DIV加CSS,css样式拆解与归类,css3过度与阴影,定位与动,常用如...

  • CSS常见知识点回顾

    本文章不涉及太基础的知识点,主要用来记忆常用的知识点 1.CSS常用单位 em 1em=默认字体大小的倍数(比如默...

  • CSS常用知识点

    1,居中布局 语法:margin:0 auto;将div框宽度设置为100%就能占满屏幕,如果不想占满屏幕,只希望...

  • CSS常用知识点

    1.BFC 参考:学习 BFC (Block Formatting Context) 块级格式化上下文,是一个独立...

  • css常用知识点

    清除浮动的方法有哪些? 第一种:clear:both 在父元素的里面添加一个空的clear的div(跟浮动的子级同...

  • CSS 常用知识点

    三大特性 层叠性 冲突:就近原则 继承性 text front line-开头 行高继承 优先级 如果选择器相同 ...

  • CSS常考知识点

    本章介绍一下CSS的知识点,CSS的东西很多,下面这些是比较高频的考点,希望对你有所帮助: 2.1 常用选择器 面...

  • 2018-01-04

    IFE2017 有趣的鼠标悬浮知识点 1.background属性 background作为一个经常用的css属性...

  • web前端案例-电影预告动态滚动

    效果知识点:html常用标签, css浮动定位盒模型,javascript自定义动画、鼠标跟随移动特效等。 ?ht...

网友评论

      本文标题:CSS常用知识点

      本文链接:https://www.haomeiwen.com/subject/csbeittx.html