F's Blog

博客 收藏夹
CSS

21 Oct 2016

CSS,全称Cascading Style Sheets,层叠样式表:

使用 !important 可以打破层叠规则,让当前属性优先级最高。

层叠

除了优先级,还定义选择器。

基本选择器

高级选择器

属性选择器

[],方括号里定义要选择的属性,可以用^,$和*来寻找。

input[name]
input[name="email"]
/*以mailto开始*/
a[href^="mailto:"]
/*以name结尾*/
input[id$="name"]
/*包含recipe*/
[name*="recipe"]

样式

字体

font

文本

white-space: normal|pre|pre-wrap|pre-line|nowrap

对HTML里空白的字符 —— 空格和换行,如何处理。

word-wrap: normal|break-word;

text-overflow: clip|ellipsis|string

如果文本溢出如何显示的问题

其他

display

div, from, p, h1, h2, … 都是block的,一个块元素会新开始一行并且尽可能撑满容器。

所以需要width来指定块的宽度,然后设置margin为auto让其居中,如

#main {
  width: 600px;
  /*max-width: 600px;*/
  margin: 0 auto;
}

可上面的情况当浏览器宽度小于600px时,就会出现水平滚动条,那么如何在小于600px时自动变窄呢,用max-width,表示最大宽度,小了就变窄。

img, a, span都是inline的,其中img是让人意外,所以居中显示时需要设置成block的。

盒模型

从外到内:

margin

1个参数是所有外边距,2个是上下、左右,3个是上、右左、下,4个:上、右、下、左。

auto属性很有用,能够实现居住或对其,但只对左右有效。

.title {
  /*左对齐*/
  margin-right: auto;
  /*居中*/
  margin: 0 auto;
}

border

border: width   style   color

border-bottom等。

padding

内边距

尺寸

对于overflow,默认是visible,即可见的;hidden就是隐藏;scroll就是一直显示滚动条; auto是溢出时才显示滚动条。

当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

当设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。

定位

position: static|relative|absolute|fixed

absolute更适合下拉框一类,弹出来也不会改变原先的网页布局,而这正是其与relative的区别。

偏移

偏移有left, right, top, bottom,但只有四个角才能组合起来,比如left和top,而不可以left和right。

相比margin,其元素块不会改变。

z-index

定义谁压谁,否则,后来居上。

float: none|left|right

当一个元素定义了float后,它就是盒模型了,而且是浮动的。

浮动的元素会被重新定位,以便其他的内容在它们周围浮动:

  1. 浮动元素的外边距不会折叠,不管它们如何靠近。
  2. 只有浮动元素后面的内容会被该浮动元素影响。对,只有内容,浮动元素后面元素的背景、边框等都不会被影响。
  3. 浮动元素总是被当做块级元素对待。

形象上是浮动元素嵌入到了它后面的元素里。

除非制定width和height,否则元素的大小会收缩适应。比如一个div,尺寸只会扩展到容纳里面的内容, 而非浮动的会占据整行的。

如果浮动容器内的元素本身不是浮动的,那么它们将保留原来的宽度,除非设定了。

float可以实现文字环绕。

另,让大框完全包着浮动的内容:

.clearfix {
  overflow: auto;
}

clear: none|left|right|both

不想被前面浮动的元素影响怎么办呢?用clear!

如果前面有float,则去下面,不重叠。

.after-box {
  clear: left;
}

如上,左边有float时,就在下面显示。

vertical-align

响应式布局

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

当页面宽度小于600px时,nav就会显示在上面。

打印样式

打印和网页显示最大的不同就是:打印是固定尺寸的。

CSS可以用media属性来指定不同的媒体,这个属性可应用于元素或者

常用的media元素有:

也可直接在css里定义,比如:

@media print {
  .submit {
    display: none;
  }
}

使用content来添加内容。

column

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

其他

目前有SCSS、SASS等高级的CSS语言来生成CSS。

伪类

:target 锚点跳转的到时候

伪元素

::after

在一个元素后添加内容:

.boring-text::after {
   content: "<- BORING!";
   color: red;
}

感想

CSS也是一门学问。

参考

本文由 付豪 创作,采用署名 4.0 国际(CC BY 4.0)创作共享协议进行许可,详细声明