css几个重要属性的介绍

原创
2018/10/27 10:20
阅读数 368

1.display-可选值有 none,block,inline,inline-block,flex,grid

display用来控制布局显示,一般有四种布局模式,block块元素,inline行内元素,table二维表,positioned精确定位。关于inline-block与其他的区别主要有:

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

简单的讲,inline-block是行内元素,支持margin/padding属性,且可设置width和height。block是块元素,inline是行内元素,但没有margin/padding属性。

这里主要介绍第五种新的布局模式display:flex。

如果声明为display:flex,则有另外6个属性可使用,分别是

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content:定义水平对齐效果
  • align-items:定义垂直对齐效果
  • align-content:定义如何使用每行之间的空白

下面演示了一段水平垂直居中的代码

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

各属性的详情介绍参见这里

当display:flex时,包含的item支持以下属性:

  • order:定义每个元素的排列顺序
  • flex-grow:占用的列宽
  • flex-shrink:定义宽度收缩值,0表示不收缩
  • flex-basis:定义初始值宽度
  • flex:上面三个属性的合并属性,如flex: 0 0 200px
  • align-self:覆盖容器的align-items垂直对齐属性

一个响应式布局的例子 https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2

新的属性有 display: grid;网络布局

2.position

一共有五个值,top/bottom/left/right四个属性,均需要先确定position,才能生效。下面是各position属性值比较。

static:默认值,top/bottom/left/right不生效,根据页面元素排放自然罗列。
relative:根据页面元素排放自然罗列,top/bottom/left/right会影响该种定位元素的位置,但该元素移动后的空白,不会被周边元素填充或调整。就是说,元素偏离了原有的占位空间,但其空间仍固定保留不变。(此时margin-bottom不生效?margin-top或margin生效,top用百分比数值也不生效,left有效【此时与上一个元素的距离应该是0,所以百分比仍是0,left 时最近元素是父元素,百分比的值是父元素的宽度取百分比,所有有效果,从这里可以看出,top/bottom/left/right是否生效,与取哪个作为相对的上一个元素作重要】)
fixed:仅相对于viewport窗口定位,top/bottom/left/right影响其位置,即使页面滚动也不会影响它的位置。并且使用该属性的元素看起来是“飞”出来DOM结构树,所以也不会占用任务页面布局的空间。
absolute:根据有定位的(属性除了static)父元素进行定位,如果没有这个父元素,则以document body为父元素,且会随页面一起滚动。此时可用clip属性,如clip: rect(0px,60px,200px,0px);裁成方块。
sticky:根据用户滚动的位置进行定位。生明为sticky时,随着页面的滚动,其效果会在属性relative和fixed之间切换。当页面滚动时(其属性值仍是relative),该元素距viewport一定的距离时(一般是贴近),自动变成fixed,固定不再随页面滚动。注意:必须声top/bottom/left/right其中的一个才会有效果(如top:0)。早期IE/EDG不支持,Safari要使用position: -webkit-sticky;

CSS试验场 https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center

3.box-sizing

元素的高宽计算通常是 

width + padding + border = actual width of an element
height + padding + border = actual height of an element

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

意味着设置的高宽真实情况可能会更大。

而box-sizing就是为解决这个问题的,它将padding,border一起计算到高宽里面了。如 *{box-sizing: border-box;}

4. @media

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

或外链

<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

 media type和支持的定制化特性,参考这里

5.Multiple Columns

.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

上面这段代码,可以自动将一大段文本分裂成3栏显示,类似报纸的排版。例子

有这些属性

column-count:分割的列数
column-gap:每列的间距
column-rule-style:每列的分割竖线样式
column-rule-width:每列的分割竖线宽度
column-rule-color:每列的分割竖线颜色
column-rule:上述三者的合并写法
column-span:定义某个元素需要跨越的列数(类似table的colspan属性)
column-width:定义每列的理想宽度
columns:column-width与column-count的简短属性,如columns: 100px 3;

6.transition-duration 样式过渡动画

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
 

7.box-shadow

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.button3:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

8.cursor 鼠标样式

cursor: not-allowed;

9.opacity 透明度

.button:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

10. object-fit 定义图片或视频如何充满容器

cover:充值容器,保持高宽比例,裁剪内容;

  • fill - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit。默认效果。拉伸占满空间,不保持比例。
  • contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box。不会占满全部空间
  • cover - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit。会做必要的裁剪保持比例占满全部空间。
  • none - The replaced content is not resized
  • scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)

12.filter 滤镜效果

 

13.transition 过渡动画效果

 

14.transform 转换与变形

transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

15.一些css selector的例子

.pagination a:hover:not(.active) {background-color: #ddd;}

定义鼠标移上去时没激活的链接背景颜色。

.pagination a {
    transition: background-color .3s;
}

.pagination a:hover{
    transition: .5s ease;
}

 定义鼠标移上去时颜色变化动画效果。

.pagination a:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination a:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

定义第一个和最后一个元素按钮圆角。 

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

在li前加反斜杆和空白。

16.viewport 定义可视区域

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部