Css体系

xihaoshangdi
379 阅读5分钟

CSS学习

CSS语法

基本语法

示例

CSS的样式语法由两部分构成，选择器和声明。

开发者通过选择器(selector)选取希望改变样式的HTML元素。

声明(declarations)则是开发者制定的希望HTML改变的元素规则，可以是一条或多条。

声明由两部分组成：属性和值。属性是CSS的样式属性，值则是CSS的规则具体内容。

样式语法

选择器{
    属性名：属性值;
    /*注释*/
}

at语法

@charset

@charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头且前面不可有别的字符。

/* @charset "<charset>"; */
@charset "UTF-8";
@import

@import用于导入外部CSS样式表文件。

/* @import url; */
/* @import url list-of-media-queries; */
@import url("fineprint.css") print; // 打印
@import url("bluish.css") projection, tv; // 投影或电视
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;  //屏幕或投影
@import url('landscape.css') screen and (orientation:landscape); // 屏幕且横屏

url：这个 URL 可以是绝对路径或者相对路径。 list-of-media-queries：是一个逗号分隔的 媒体查询 条件列表，决定通过URL引入的 CSS 规则 在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入URL指明的CSS文件。

@media

@media用于定义在一个或多个设备类型、具体特点和环境的媒体查询来应用样式。

/* @media */
@media screen and (min-width: 900px) {
h1 {
color:red;
font-size:14px;
}
}

CSS的权值

CSS的权值：HTML标签属性 > 内联样式 > 外部引用样式表 （就近原则）。

文档流

  • 流动方向
    • inline元素从左到右，到达最右边才会换行。剩余宽度不足时，分割内容换行。
    • blcok元素从上到下，每一个都单独占据一行。
    • inline-block元素超过一行时，自动换行。剩余宽度不足时，整个元素换行。
  • 宽度
    • inline宽度为内部inline元素的和。width属性无效。
    • blcok默认自动计算宽度。width属性有效。不是100%，永远不要写宽度 100%
    • inline-block综合前面两部分，width属性有效。
  • 高度
    • inline的高度由line-height间接确定，height属性无效。
    • blcok的高度由内部文档流元素决定，height属性有效。
    • inline-block与blcok类似，height属性有效。

overflow 溢出

为使 overflow有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

脱离文档流

  • float
  • position：absolute/fixed
float

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。

CSS盒模型

CSS将所有元素渲染成一个个矩形的盒子。每个盒子由四部分构成。其效用由它们各自的边界所定义。

盒模型

与盒子的四个组成区域相对应，每个盒子有四个边界：

  • 内容边界 Content edge
  • 内边距边界 Padding Edge
  • 边框边界 Border Edge
  • 外边框边界 Margin Edge

content-box

content-box为标准的盒子模型。盒子的width跟height只包括盒子本身的width与height属性。

计算法则：

width = width
height = height

border-box

border-box为盒子模型可选的属性之一。盒子的width跟height包括content、padding跟border。

计算法则：

width = width + border + padding
height = height + border + padding

margin合并

块级元素的margin-top和margin-bottom有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠（margin collapsing）或外边距合并。

注意浮动元素和绝对定位元素的外边距不会折叠

外边距折叠的三种基本情况：

相邻元素之间

毗邻的两个元素之间的外边距会折叠

相邻元素之间相邻元素之间

父元素与其第一个或最后一个子元素之间

如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的margin-bottom分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。

空的块级元素

如果一个块级元素中不包含任何内容，并且在其 margin-top与margin-bottom之间没有边框、内边距、行内内容、height、min-height`将两者分开，则该元素的上下外边距会折叠。

  • 上述情况的组合会产生更复杂的外边距折叠。
  • 即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
  • 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和。
  • 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

长度单位

  1. px
  2. em
  3. 百分数
  4. 整数
  5. rem
  6. vw|vh

颜色

  1. 十六进制
  2. RGBA颜色
  3. hsl颜色
avatar
文章
阅读
粉丝