CSS笔记整理

布利啾啾迪不利多
97 阅读6分钟

css是什么？

css全称：Cascading Style Sheets 用以定义页面元素样式

h1 {
  color:white;
}

h1：选择器（selector）。表示这个样式针对哪个对象。
color：属性（property）。
white：属性值（value）。
color:whilte;：一条声明（declaration）。

如何使用css？

1、外链 （可以实现内容和样式分离）

<link ref = "stylesaheet" href = "css/style.css">

2、嵌入

<style>
  div {
    width:400px;
<style>

3、内联

<p style = "font-size:24px;"></p>

css如何工作？

未命名文件.png

选择器（selector）

通配选择器

*：面对所有元素

* {
  margin:0;
  padding:0;
}

id选择器

id = "demo"

#demo{
  color:red;
}

类选择器

class = "demo" 

.demo {
  color:blue;
 }

属性选择器

<input type = "text" disabled>

<style>
  [disabled] {
     border:1px solid red;
   }
</style>

[disabled] 表示：只要标签中包含disabled属性即拥有border:1px solid red的样式。

input[type = "password"] {
  background-color:#fff;
  }

input[type = "password"] 表示：凡是type属性的属性值为password的input输入框都设置背景颜色为#fff;

延伸：

a[href ^= "#"]{
  color:red;
};
a[herf $= ".jpg"]{
  color:black;
};

a[href ^= "#"]表示：链接地址以#开头的超链接都有color：red的样式；
a[herf $= ".jpg"]表示：链接地址以.jpg结尾的超链接都有color:black的样式。

伪类选择器

状态伪类选择器
在不同状态下变换不同样式。 如：

a:link //默认样式
a:visited //a链接已经被访问过后的样式
a:hover //悬停样式
a:active //a链接按下事件触发时的样式
:focus //获取焦点事件触发时的样式

结构伪类
根据DOM节点在DOM树的位置选择。

div:first-child;
div:last-child;

first-child表示；处于第一个位置的某个元素（这里指第一个div）
last-child表示：处于最后一个位置的某个元素（这里指最后一个div）

相对父级节点的相对位置
一般用组合标签

<input class = "error">
<input type = "text">

<style>
  input.error{
    border:1px solid red;
  }
</style>

文字样式

文字颜色

RGB
这里就不过多赘述。

HSL HSL全称：
Hue-Saturation-Lightness
色相 - 饱和度 - 亮度

字体

font-family

规则：

  • 字体列表最后要写上通用字体族；
  • 英文字体要放在字体前面；

引用外部字体样式
一般用于英文字体，因为中文字体文件较大

@font-face{
  font-family : "demo";
  src = url(""); 
  format("woff2");
}

h1 {
  font-family:"demo";
}

字体大小

font-size

  • 关键字：small、medium、large；
  • 长度：px、em（相对父元素）；
  • 百分数：相对父元素。

字体粗细

font-weight

  • 关键字：normal、bold；
  • px

行高

line-height

div{
font-size:20px;
line-height:1.6;
}

此时：line-height = 32px

简写 font:weight size/line-height family
（斜体 粗细 大小/行高 字体）

间距

  • letter-spacing：字符之间的距离；
  • word-spacing：单词之间的距离；

缩进

text-indent

文字修饰

text-decoration

  • underline：下划线；
  • line-through：删除线；
  • overline：上划线

空白符

white-space

决定空格和换行是否保留

  • nowrap：不换行，会出现横向滚动条；
  • pre：保留空格个换行；
  • pre-wrap：会换行（如果一行内显示不下换行）；
  • pre-line：会换行，但是会合并空格。

深入css

选择器的特异度（specificity）

例：

<h1 class = "title"></h1>

<style>
  h1 {
    color:red;
  };
  .title {
   color:blue;
   }
</style>

思考：这两个样式哪个会生效？

以id （伪）类 标签为顺序。
h1 0 0 1 =>1
.title 0 1 0 => 10

10 > 1 所以.title生效。

继承

继承 是指：某些属性会自动继承其父元素的计算值，除非显示指定一个值。 注意，盒模型的尺寸不可继承，如width、height。
显示继承：

*{
  box-sizing:inherit; //本不可继承
}

html{
  box-sizing:border-box; //html内的所有元素默认border-box
}

初始值

初始值 是指：css中每个属性都有一个初始值（可使用initial重置为初始值）。
css求值过程 （css原理，即解析DOM树后如何将对应节点渲染样式，生成渲染树）

未命名文件 (1).png

布局

  • 确定内容大小和位置的算法；
  • 依据元素、容器、兄弟节点和内容等信息来计算。

布局模式
1、常规流 -- 行级、块级、表格布局、flexBox、Grid布局；
2、浮动（float）布局；
3、绝对定位。

padding属性

作用：确定元素四个方向的内边距；
顺序分别为：上 右 下 左；
一个例子： 如果要实现多终端一个盒模型始终保持宽高为1:1，如何做？

div{
  height : 0;
  padding-top:100%;

padding-top:100%表示相对于容器，内边距为容器的宽的百分百。

border属性

简写： border：粗细 样式 颜色

一个例子！！！！css写出一个三角形！！

div{
   wdith:0;
   height:0;
   border-top:1px solid red;
 }

margin属性

margin：auto => 盒模型水平居中

margin collapse 边距合并/折叠，在垂直方向同时存在margin-top和margin-bottom时，取较大值。 举例：

<div class="a"></div>
<div class="b"></div>

<style>
      .a {
        border: 1px solid red;
        width: 100px;
        height: 100px;
        margin-bottom: 100px;
      }

      .b {
        border: 1px solid blue;
        width: 100px;
        height: 100px;
        margin-top: 100px;
      }
    </style>

image.png


box-sizing属性

box-sizing:border-box：width和height包含了padding、border在内。如果width：100%，则内容的width<100%。

<style>
    div {
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        border: 10px solid red;
      }
</style>

image.png


overflow属性

visible：若内容溢出，不隐藏。
hidden：若内容溢出，隐藏，且没有滚动条。
scroll：不管内容是否溢出，都有滚动条。

块级盒子与行级盒子的区别？

块级盒子

全称：Block Level Box

  • 不和其他合资并列摆放；
  • 使用所有的盒模型属性；
  • 常见会生成块级盒子的块级元素：body、aside、div、main、section、h1~h6、p、ul、li。

行级盒子

全称：Inline Level Box

  • 一些行级盒子放在一行或拆开成多行；
  • width、height不适用；
  • 常见会生成行级盒子的行级元素：span、em、strong、cite、code

常规流常见的布局？

行级摆放上下文（IFC）

全称：Inline Formatting Content

  • 盒子在一行内水平摆放；
  • 一行放不下就换行；
  • vertical-align控制垂直对齐（有基线）；
  • text-align控制水命对齐；
  • 需要避开float浮动元素。 实现图片、文字居中对齐
verti-align:middle;

块级摆放上下文（BFC）

全称：Block Formatting Content

  • 盒子从上到下排列；
  • 垂直方向的margin许合并；
  • BFC内盒子的margin不会与外面的margin合并；
  • BFC不会和float浮动重叠。

Flex Box

  • 盒子的摆放流向？
  • 盒子的摆放顺序？
  • width和height？
  • 水平和垂直方向的对齐？
  • 是否允许拆行？

摆放顺序

flex-direction: row/row-reverse/volumn/volumn-reverse

image.png

image.png

image.png

image.png

水平对齐（主轴）

justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly

垂直对齐（侧轴）

align-item:flex-start/flex-end/center/stretch(拉伸)/baseline(基线）

某一个子元素设置垂直属性

align-self

flexibility 子项的弹性

容器有剩余空间，会伸展，否则会收缩

  • flex-grow：有剩余空间的伸展能力；
  • flex-shrink：空间不足时的收缩能力；
  • flex-basis：基础长度

其中，flex-shrink为0时，说明盒子不可被压缩（为刚性盒子），会压缩其他的盒子以达到该刚性盒子的宽高要求。
简写 flex:grow shrink basis 例子：

flex:1 100px // grow/basis
flex:1 0 100px //grow/shrink/basis

Grid布局

display:grid即可生成一个块级的grid容器。 grid-template：相关属性将容器划分成网格。

display: grid;
grid-template-columns: 30px 30px auto;
grid-template-rows: 20px 20px auto;

image.png

绝对定位

position：relative/absolute/static/fixed
relative ：在常规流布局。可以设置top、left、bottom、right来调整偏移长度。
absolute：

  • 脱离常规流（文档流）。
  • 相对于最近的非static祖先元素定位。（一般为父级）。
  • 不会对流内元素布局造成影响。
  • 不设置top、left的话，会放在原来应该在的位置。（可能会有覆盖的情况出现）。 fixed：相对于视口（一般为屏幕）定位（滚动时它不动）。
avatar
文章
阅读
粉丝