CSS - Githubissues

py-tofee commented 4 years ago

CSS定义及作用

定义：层叠样式表（Cascading Style Sheets）

作用：用来描述HTML文档的呈现，给网页中的每一个元素设置样式，排版布局，让网页更精美。

py-tofee commented 4 years ago

常用CSS属性

文本

color：字体颜色 letter-spacing：字符之间的间隔 word-spacing ：单词之间的间隔 white-space：设置如何处理元素内的空白 text-align：行内元素相对其父(块)元素的对齐方式 text-indent：定义一个块元素首行文本内容之前的缩进量 text-decoration：规定添加到文本的修饰，下划线、上划线、删除线等 word-break：指定了怎样在单词内断行 line-height：设置行高

字体

font：可设置文本的所有字体属性 font-size：设置字体大小 font-weight：设置文本的粗细 font-family：设置文本的字体 font-style：设置文本的字体样式

背景

background：可设置元素的所有背景属性 background-color：背景颜色 background-image：背景图片 background-repeat：设置如何平铺对象的 background-image 属性 background-position：设置背景图片的起始位置

盒子模型

width：宽度 height：高度 padding：内边距 border：边框 margin：外边距

显示

display visibility overflow opacity

定位

position top bottom left right vertical-align float clear

py-tofee commented 4 years ago

引入方式

内联样式（inline style）

<div style="background: red"></div>
<!-- 不能复用，且难以维护 -->

2.文档样式表（document style sheets）

<head>
    <style>

    .content {
        background: red;
    }

    </style>
<!-- 只对当前页面有效，不能多个页面之间共享 -->
</head>

3.外部样式表（external style sheets）

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- 推荐！所有的 CSS 代码只存在于单独的 CSS 文件中，且CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可  -->

4.导入方式

<style>
    @import url(style.css);
</style>

link与import的区别

1.本质的差别： link属于HTML标签，而@import完全是CSS提供的一种方式

2.加载顺序的差别： 当一个页面被加载时（或者被浏览者浏览时），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会很明显。

3、兼容性的差别： @import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题

4、使用dom： 当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

py-tofee commented 4 years ago

优先级规则

css样式来源有5个，按优先级递增分别是：内联样式（），文档样式（），外部样式（写在css文件中的样式），浏览器用户自定义样式（可通过插件的方式实现自定义样式），浏览器默认样式（不同浏览器默认样式不同）；

选择器及其优先级规则

按优先级递增的选择器列表：通用选择器（*）元素(类型)选择器类选择器属性选择器伪类 ID 选择器内联样式 !important 规则例外

层叠的解释

层叠就是浏览器对多个样式来源进行叠加，使用高优先级的样式覆盖低优先级样式的过程。

py-tofee commented 4 years ago

css常用单位

px em rem vh vw

py-tofee commented 4 years ago

css 基础语法

selector1, selector2, ... {
    property: value;
    property: value;
    property: value;
    ...
}

py-tofee commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    div {
      color: yellow;
    }
    .box {
      color: red;
    }
    #box {
      color: purple;
    }
  </style>
</head>
<body>
  <div class="box" id="box" style="color: blue">css优先级</div>
</body>
</html>

py-tofee commented 4 years ago

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

  <link rel="stylesheet/less" type="text/css" href="less.less" />
  <!-- 必须加上/less -->
  <script src="https://cdn.bootcss.com/less.js/3.9.0/less.js"></script>
  <!-- js必须在less后引用 -->
</head>

<body>
  <div class="box">
    <div class="content">Less</div>
  </div>
</body>

</html>

@font-size: 24px;
@imageName: bg;
@width: 500px;

.base() {
  width: 100px;
  height: 50px;
}

.box {
  width: @width - 100px; // 运算
  height: 200px;
  border: 1px solid #333;
  font-size: @font-size; // 变量
  background: url('../image/@{imageName}.png') repeat;

  // 可嵌套
  .content {
    .base(); // 函数
    color: yellow;
    background-color: yellowgreen;
  }
}

py-tofee commented 3 years ago

padding、margin

padding不支持负值；
padding的百分比是相对于元素宽度的；
对于非替换元素的内联元素，padding、margin和border值都不会加入行高的计算；但实际上在盒子周围发生了渲染；

py-tofee commented 3 years ago

CSS布局：盒模型、Flex、Grid

区别：

Flex轴线布局，Grid网格布局，盒模型布局（position、float、display）

Flex

容器属性

flex-direction 决定项目沿主轴的排列方向
.box {
display: flex;
flex-direction: row（默认） | row-reverse | column | column-reverse;
}
flex-wrap 决定项目的换行方式
.box{
flex-wrap: nowrap（默认） | wrap | wrap-reverse;
}
flex-flow
.box{
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content 定义了项目在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items 定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content

项目属性

py-tofee commented 3 years ago

什么是标签语义化
- 指标签本身传达了标签内容的类型信息，通过标签名和属性能直观的认识到它的属性和作用；
- 合理的标签干合适的事情
- 利用语义化标签，在没有CSS的情况下，页面也能呈现一个良好的内容结构；
- 有利于SEO：爬虫依赖标签来确定关键字的权重，因此可以跟搜索引擎建立良好的沟通，帮助爬虫爬取更多的有效信息；
- 提升用户体验：例如title，alt可以用于解释文本或者图片信息
- 有利于团队开发和维护：语义化增强代码可读性
- 方便其他设备解析：例如屏幕阅读器，盲人阅读器，移动端设备等，以更有意义的方式渲染页面
都有哪些标签
- 标签分为三个类型：块级标签（div、p），行内标签（span、a），行内块级标签（input、button）
块级标签和行内标签怎么区分，如何转换
- 块级标签独占一行，可以设置宽高
- 行内标签不能设置宽高
- 行内块级标签可以设置宽高，默认不会独占一行，会随着文档流依次排列
- 修改元素的display值，可以实现这几种标签类型之间的转换
display都有哪些值
- block / inline / inline-block / flex / grid / table / none
让元素隐藏的几种方式
- background-color: transparent 设置背景颜色透明
- display: none; 和 visibility: hidden; 的区别
- opacity: 0;
- filter: opacity(0)，接收0 - 100%的值
- filter: opacity(0) 与opacity类似，不同之处在于，通过filter，有些浏览器会为了提升性能而提供硬件加速
display: flex;
- 项目中什么场景会用到flex：用于实现响应式布局，垂直水平居中等
- 除了用flex做垂直水平居中，还能有哪些方式
- position: absolute;三种方式
- JavaScript实现
- display: table-cell
- 响应式布局还可以怎么做：float+position, grid
- 都有哪些盒子模型（标准盒模型content-box，IE盒模型border-box，flex弹性盒模型），box-sizing可以改变盒模型，现在比较常用的是border-box，因为border-box一旦确定了尺寸，再修改其padding和border的值，不会影响其他元素；

py-tofee commented 3 years ago

垂直水平居中

<body>
  <div class="outer-box">
    <div class="inner-box"></div>
  </div>
</body>

定位

先设置outer-box，position为relative，让inner-box相对它定位

.outer-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
.inner-box {
  border: 1px solid #ccc;
}

定位1 - 这种方式需要知道并设置inner-box的宽高

.inner-box {
width: 100px;
height: 100px;
/** 居中设置 **/
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

定位2 - 这种方式不需要知道具体的宽高，但是要设置宽高，不设置的话，默认会沾满整个outer-box

.inner-box {
width: 100px;
height: 100px;
/** 居中设置 **/
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

定位3 - 这种方式不需要设置，也不需要知道具体宽高，会自动按照inner-box的宽高垂直居中，不兼容旧版IE
- transform 定义元素转换
- translate(x,y) 声明元素进行2D转换，百分比按照元素自身的宽高
```
.inner-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```

flex - 只需要设置outer-box

.outer-box {
display: flex;
justify-content: center;
align-items: center;
}

JavaScript - 分布获取outer-box 和 inner-box 的clientWidth 和 clientHeight，设置inner-box的style属性：定位position为absolute，设置left和top为两个盒子之间的高宽差/2
display: table-cell 这种方式默认是针对文本类型的垂直居中，因为块级元素本身默认是独占一行的，所以需要设置inner-box为行内元素或者行内块级元素，不需要设置inner-box的宽高
```
.outer-box {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner-box {
display: inline-box;
}
```

py-tofee commented 3 years ago

移动端响应式布局的三大方案：

media 媒体查询
rem
flex
vw / vh

层叠上下文

根据元素的层叠规则决定的一个环境，指元素在Z轴上排列顺序的规则；
把屏幕想象成一个三维空间，距离用户视角最远的就是画布
通过指定z-index，可以绘制出距离用户不同距离的元素
内部的层叠上下文及其子元素均受制于外部的层叠上下文
元素层叠顺序 - 由远及近
画布
background / border
负 z-index
block盒子模型
float盒子模型
正 z-index
z-index工作原理解析 z-index参考
1. z-index 只适用于层叠环境中的元素，给处于非层叠环境中的元素设置z-index不起作用
2. 层叠上下文产生条件：
  - 使用了position:absolute、position:fixed或position:relative的定位元素，且z-index的值是数字
  - 一个被设置了display:flex的元素包含的元素对其设置z-index为数值时其会产生层叠上下文
  - ...

py-tofee commented 3 years ago

圣杯布局

    <style>
      .header {
        background-color: antiquewhite;
      }
      .content {
        /* 形成BFC */
        overflow: hidden;
        padding-left: 300px;
        padding-right: 200px;
      }
      .content .center {
        width: 100%;
        background-color: blue;
      }
      .content .left {
        /* relative 相对于元素自身定位 */
        position: relative;
        width: 300px;
        margin-left: -100%;
        left: -300px;
        background-color: aquamarine;
      }
      .content .right {
        /* width为200px,float为left,margin-left为-200px，相当于没有宽度 */
        width: 200px;
        margin-right: -200px;
        background-color: cadetblue;
      }
      .content .column {
        float: left;
      }
      .footer {
        background-color: antiquewhite;
      }
    </style>

    <h1>圣杯布局</h1>
    <div class="header">header</div>
    <div class="content">
      <div class="center column">center</div>
      <div class="left column">left</div>
      <div class="right column">right</div>
    </div>
    <div class="footer">footer</div>

双飞翼布局

    <style>
      .col {
        float: left;
      }
      .main {
        width: 100%;
        background-color: darkgreen;
      }
      .main .content-box {
        margin-left: 300px;
        margin-right: 200px;
        background-color: blue;
      }
      .left-box {
        width: 300px;
        margin-left: -100%;
        background-color: cadetblue;
      }
      .right-box {
        width: 200px;
        margin-left: -200px;
        background-color: cornflowerblue;
      }
    </style>

    <h1>双飞翼布局</h1>
    <div class="main col">
      <div class="content-box">content</div>
    </div>
    <div class="left-box col">left</div>
    <div class="right-box col">right</div>

py-tofee commented 3 years ago

line-height 继承

判断父元素line-height的属性值：

当属性值为具体像素值，子元素直接继承该像素值
当属性值为数值类型，表示行高为fontSize*lineHeight，子元素继承数值，子元素行高为 子元素fontSize*lineHeight

当属性值为百分比，子元素行高为父元素fontSize*lineHeight

<style>
.parent {
font-size: 32px;
line-height: 32px; /*对应子元素的值为 32px*/
line-height: 1.5; /*对应子元素的值为 16*1.5 + 'px' */
line-height: 200%; /*对应子元素的值为 32*200% + 'px'*/
}
.child {
font-size: 16px;
line-height: inherit;
}
</style>
<div class="parent">
<p class="child">text</p>
</div>

py-tofee / Notes

CSS #4

CSS定义及作用

常用CSS属性

文本

字体

背景

盒子模型

显示

定位

引入方式

link与import的区别

优先级规则

选择器及其优先级规则

层叠的解释

css常用单位

css 基础语法

padding、margin

CSS布局：盒模型、Flex、Grid

区别：

Flex

垂直水平居中

定位

移动端响应式布局的三大方案：

层叠上下文

元素层叠顺序 - 由远及近

z-index工作原理解析 z-index参考

圣杯布局

双飞翼布局

line-height 继承