css笔记（完结）

米酒在发酵
448 阅读16分钟

1、 选择器

！important>内联样式>id选择器>class选择器>元素选择器>通配符选择器

一般规律：选择器管理范围越大权值越小

2、 盒子模型

包含部分

  1. Margin(外边距) - 清除边框外的区域，外边距是透明的。
  2. Border(边框)  - 围绕在内边距和内容外的边框。
  3. Padding(内边距)  - 清除内容周围的区域，内边距是透明的。
  4. Content(内容) - 盒子的内容，显示文本和图像，包括weith和heigth

水平方向的布局

一个元素在其父元素内满足以下等式

  • margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素width

垂直方向的布局

overflow：处理溢出

  • visible：默认值，显示子元素从父元素里溢出的情况
  • hidden：设为不可见（一剪没
  • scroll：生成两个滚动条
  • auto：自动设置，根据需要生成滚动条

外边距的折叠

在垂直方向上存在外边距的折叠现象

行内元素的盒模型

行内元素一般为描述性标记，例如：<span>/<a>/<br>/<b>/<strong>/<img>/<input>/<textarea>/<select>

行内元素不支持设置宽度和高度，可以设置padding\border\margin，但垂直方向的padding\border\margin不会影响页面布局，在设置颜色的情况下会覆盖其他元素。 display：设置元素显示的类型

  • inline：默认值，将元素设置为行内元素
  • block：将元素设置为块元素
  • inline-block：将元素设置为行内块元素，行内块，既可以设置宽高又不会独占一行
  • table：将元素设置为表格
  • none：元素不在页面中显示，不显示时也不占据页面的位置 display:none和visibility：hidden的区别是后者元素在页面中隐藏时依然占据页面的位置。

浏览器的默认样式

浏览器的默认样式会影响页面的布局，在编写程序的时候往往会编写css样式来消除默认的浏览器样式。 可以使用重置样式表文件进行消除。

长度单位

  • px
  • 百分比
  • em 相对于父元素字体大小
  • rem 相对于根元素（HTML）字体大小

盒子的尺寸

默认情况下，盒子的尺寸由内容区、内边距和边框共同决定。 box-sizing用来设置盒子尺寸的计算方式。

  • content-box，默认值，宽度和高度用来设置内容区的大小。
  • border-box,宽度和高度用来设置整个盒子可见框的大小，这里的width和heigth指的是内容区和内边距和边框的总大小。

轮廓圆角和阴影

outline 用来设置元素的轮廓线用法和border一模一样，轮廓和边框的不同点是轮廓不会影响到可见框的大小，只是在外面套了一层。

  • Box-shadow用来设置元素的阴影效果,不会影响页面的布局。 属性的4个值分别用来设置水平偏移量、垂直偏移量、阴影的模糊半径和阴影的颜色(rgba(0,0,0,.3))。
  • border-radius用来设置圆角，圆角设置的是圆的半径大小。 包括border-top-left-radius、border-top-right-radius、border-buttom-left-radius、border-buttom-right-radius等。设置一个值则为圆形的1/4，设置两个值则为椭圆形的1/4。

3、浮动

浮动

通过浮动可以使一个元素向其父元素的左侧或右侧移动。

float属性:可选none元素不浮动（默认值），left元素向左移动，right元素向右移动。

  • 元素设置浮动以后，水平布局的等式则不需要强制成立。
  • 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，因此元素下边的还在文档流中的元素会自动向上移动。
  • 浮动元素默认不会从负元素中移出，浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。
  • 如果浮动元素的上边是一个没有浮动的块元素，则浮动 元素无法上移。
  • 在高度上，浮动元素不会超过它上边的浮动元素。 总结：浮动让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。
  • 其他特点：1.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。2.从文档流中脱离后，元素的一些特点会发生改变，具体表现如下：块元素不再独占页面的一行，脱离文档流后其宽度和高度默认被内容撑开。行内元素脱离文档流之后变成块元素，即脱离文档流之后不再区分快元素和行内元素。

高度塌陷和BFC

  • 高度塌陷是指：在浮动布局中，父元素的高度默认是被子元素撑开的，但当子元素浮动脱离文档流后，父元素的高度就会丢失，下面的元素就会上移，导致页面混乱。
  • BFC(Block Formatting Context)块级格式化上下文：它是CSS中一种隐含的属性,元素开启BFC会就有自己独立的布局区域。可以解决高度塌陷的问题。
  • 元素开启BFC后的特点：不会被浮动元素覆盖；子元素和父元素的外边距不会重叠；可以包含浮动的元素。
  • 开启BFC的方式：1. 设置元素的浮动（不推荐）2.将元素设置为行内块元素（不推荐）3.将元素的overflow设置为非visible的值，常用的比如overflow:hidden。4.还有很多…参见官网。

clear属性

  • Clear属性的作用是清除浮动元素对当前元素所产生的影响。可选值包括left、right和both分别用于清除左侧右侧和全部两侧浮动元素对当前元素的影响。
  • 其原理是设置清除浮动以后，浏览器自动为元素添加一个上外边距以使其位置不受其他元素的影响。
  • 利用clear和after伪类可以在浮动元素最后面设置一个空的清除浮动影响的块元素，该块元素可以撑起父元素的高度，从而较好地解决高度坍塌的问题。

.box::after{ content:''; display:block; clear:both; }

  • 同时利用before伪类和display：table可以解决父子元素外边距重叠的问题。 综合可写出clearfix类来解决浮动高度坍塌和外边距重叠的问题。
.clearfix::before,
.clearfix::after{
    content:'';
    display:table;
    clear:both;
}

4、定位

position属性

定位是更高级的布局手段，可以将元素摆放在任意位置

可选值

  • static 默认值，不开启定位
  • relative 相对定位
  • absolute 绝对定位
  • fixed 固定定位
  • sticky 粘滞定位

相对定位(relative)的特点

  1. 相对定位如果不设置偏移量元素不会发生变化——偏移量(offset)可选值：top buttom left right
  2. 相对定位是参照于元素在文档流中的初始位置
  3. 相对定位会提升元素的层级，可能遮住其他元素
  4. 相对定位不会使元素脱离文档流，不会改变元素的性质，块元素还是块元素，行内元素还是行内元素

绝对定位(absolute)的特点

  1. 绝对定位如果不设置偏移量元素的位置不会发生变化——偏移量(offset)可选值：top buttom left right；
  2. 开启绝对定位后，元素会从文档流中脱离，因此会改变元素性质，行内元素会变成块元素，块元素的高宽被内容撑开；
  3. 绝对定位会提升元素的层级，可能遮住其他元素；
  4. 绝对定位元素是相对于其包含块进行定位的——包含块(containing block)：正常情况下包含块就是离当前元素最近的祖先块元素，在开启绝对定位时包含块就是离当前元素最近的开启了定位的祖先块元素，若都没开启定位，则相对于根元素(html)。

固定定位(fixed)的特点

  1. 固定定位也是一种特殊的绝对定位，所以其大部分特点与绝对定位相同。
  2. 唯一不同的是固定定位永远参考于浏览器的视口进行定位。视口(viewport)即浏览器的可视窗口。固定定位的元素不会随滚动条滚动。

粘滞定位(sticky)的特点

  1. 粘滞定位作为新出的值，其兼容性不是很好，可参见官网。
  2. 粘滞定位也是一种特殊的相对定位，所以其大部分特点与相对定位相同。
  3. 粘滞定位可以在元素到达某个位置时固定。

设置绝对定位后的布局

  • 水平方向的布局：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块元素width 当发生过度约束：
  1. 如果九个值中没有auto则自动调整right值以使等式满足，如果有auto则自动调整auto的值使等式满足。
  2. 可以设置auto的只有margin width left right。
  3. 因为left和right的值默认是auto，所以如果不设置left和right，当等式不满足值会自动调整这两个值。
  4. 可以利用这一特性用margin:auto并设置left、right为0来使水平居中。
  • 垂直方向的布局的等式也必须要满足。其情况与水平方向的布局完全相同，同样可以利用相关特性设置垂直居中。

元素的层级

  • 对于开启了定位的元素，可以通过z-index属性来指定元素的层级。其值越大层级越高，越优先显示。
  • 如果元素的层级一样，则优先显示靠下的元素。
  • 祖先元素层级再高也不会盖住后代元素。

一般来讲

布局大体上用浮动，小的点用定位

5、字体font和背景background

字体相关的样式

  • color 设置字体颜色，前景色
  • font-size 字体大小，单位包括em和rem
  • font-family 字体族，即字体的格式。可选值包括serif衬线字体\sans-serif非衬线字体\monospace等宽字体\cursive草书字体\fantasy虚幻字体，这里的可选值是大的字体的分类，只指定类别，可能不同浏览器选择的字体不同。font-family可以指定多个字体，优先选用前面的字体。
  • font-face 可以将服务器中的字体直接提供给用户使用。包含font-family属性来指定字体名和src指定字体的路径。但可以存在加载速度慢、版权授权、字体格式（ttf)的问题。

图标字体

  • 图标字体(iconfont): 在网页中经常使用的一些小图标，由于字体比图片更小更灵活，因此用到图标字体，通过font-face直接引用。
  • 常见的图标字体库，比如fontawesome。 先在官网下载解压，将css和webfonts文件移动到项目中，将all.css引入网页中。最后通过类名class="fas fa-bell"/class="fab fa-acessible-icon"或者编码使用。
  • 也可以通过伪元素来设置图标字体：
  1. 通过before或after选中要设置图标的元素
  2. 在content中设置字体的编码
  3. 设置字体的样式：fab:font-family/fas: font-family font-weight
  • 阿里图标字体库： 图标多，但版权问题不清晰，需要自己主动找作者联系询问版权相关问题。字体库的用法基本相似。

行高

  • 含义：行高指文字占有的实际高度。
  • 设置：通过line-height设置，可以直接指定一个大小(em px)，也可以设置为一个整数将行高设置为字体的指定倍数。
  • 其他用法1：文字垂直居中：字体框即文字对应的格子，font-size设置字体框的高度。行高会在字体框上下均匀分配，因此可以将行高设置为高度一样的值，来使得单行文字在元素中垂直居中。
  • 其他用法2：设置文字的行间距，行间距=行高-字体大小。

字体的简写属性

font可以设置字体相关的所有属性，其语法为font：加粗 斜体 字体大小/行高 字体族。省略不写的部分均会使用默认值，并覆盖单独设置的值。

文字水平垂直居中设置

  • text-align 水平居中，可选值left、right、center、justify
  • vertical-align 垂直居中（注意垂直居中并不是绝对意义上的对称居中），可用其设置图片居中。

其他

  • text-decoration设置文本修饰，可选值none、underline下划线、line-through删除线、overline上划线
  • white-space设置网页如何设置空白，可选值normal、nowrap不换行、pre保留空白

6、弹性盒flex

flex是一种布局手段，主要用来代替浮动进行布局。flex可以使元素具有弹性，使得元素可以跟随页面的大小的改变而改变。

弹性盒基础

  • 弹性盒包括弹性容器和弹性元素。
  • 要使用弹性盒必须将一个元素设置为弹性容器，具体设置方法为display：flex设置为块级弹性容器，display：inline-flex设置为行内弹性容器。
  • 弹性容器的子元素是弹性元素（弹性项），一个元素可以同时是弹性容器和弹性元素。 弹性容器的属性：
  • flex-direction指定容器中弹性元素的排列方式可选择包括row默认值，弹性元素在容器中水平排列，主轴自左向右；row-reverse弹性元素在容器中反向水平排列，主轴自右向左；columns主轴自上向下；column-Reverse主轴自下向上。侧轴与主轴垂直。 弹性元素的属性：
  • flex-grow指定弹性元素的伸展系数，当父元素有多余空间时，按照对对应比例进行分配。
  • flex-shrink指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩。

弹性容器上的样式

  • flex-wrap：设置弹性元素是否在弹性容器中自动换行。其可选值包括no wrap默认值，元素不会自动换行；wrap元素沿着辅轴方向自动换行；wrap-reverse元素沿着辅轴反方向换行。
  • justify-content：用来分配主轴上的空白空间，即控制主轴上的元素如何排列。可选值包括 flex-start元素沿着主轴起边排列； flex-end元素沿着主轴终边排列；center元素居中排列；space-around空白分布到元素两侧；space-between空白均匀分布到元素间，space-evenly空白分布到元素的单侧。
  • align-content：辅轴上空白空间的分布，可选值与justify-content一致。
  • align-items：控制元素在辅轴上如何对齐。可选值包括 stretch默认值，将元素的长度设置为相同的值；flex-start元素不会拉伸，沿着辅轴起边对齐；flex-end元素不会拉伸，沿着辅轴的终边对齐；center居中对齐；baseline基线对齐。

弹性元素上的样式

  • align-self：用来覆盖当前弹性元素上的align-items，可选值与align-items一致。
  • flex-grow：增长系数。
  • flex-shrink：缩减系数。
  • flex-basis：指定元素在主轴上的基础长度，如果主轴是横向的，则该值指定的是元素的宽度，如果主轴是纵向的的，该值直径的是元素的高度。其默认值是auto表示参考元素自身的高度或宽度，如果传递了一个具体的数值，则以该值为准。
  • flex：简写属性，可以设置弹性元素的三个样式。flex：增长 缩减 基础。
  • order：决定弹性元素的排列顺序。

7、css中继承和无继承的属性

无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

  • vertical-align：垂直文本对齐
  • text-decoration：规定添加到文本的装饰
  • text-shadow：文本阴影效果
  • white-space：空白符的处理
  • unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

有继承性的属性

1、字体系列属性

  • font：组合字体
  • font-family：规定元素的字体系列
  • font-weight：设置字体的粗细
  • font-size：设置字体的尺寸
  • font-style：定义字体的风格
  • font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
  • font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
  • font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

  • text-indent：文本缩进
  • text-align：文本水平对齐
  • line-height：行高
  • word-spacing：增加或减少单词间的空白（即字间隔）
  • letter-spacing：增加或减少字符间的空白（字符间距）
  • text-transform：控制文本大小写
  • direction：规定文本的书写方向
  • color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

 

所有元素可以继承的属性

  1. 元素可见性：visibility
  2. 光标属性：cursor

内联元素可以继承的属性

  1. 字体系列属性
  2. 除text-indent、text-align之外的文本系列属性 

块级元素可以继承的属性

1、text-indent、text-align

avatar
文章
阅读
粉丝