html,body { overflow:auto; height:auto; } #launch { display:none; } main { max-width:48rem; margin:2rem auto; padding:1rem; line-height:1.75; } img, video { max-width:100%; height:auto; } pre { overflow:auto; } .article-footer a { color:#666; text-decoration:none; } .article-footer a:focus-visible { text-decoration:underline; } @media (prefers-color-scheme:dark) { main { color-scheme:dark; color:#f9fafb; } main a { color:#8caaf0; } .article-footer a { color:#9a9a9a; } }

CSS 小全

掌握下面的基础可以对付几乎所有页面布局需求

同时也可以看看《Head First HTML and CSS》里面关于 css 的部分

HTML CSS JavaScript 解耦

CSS 基础

CSS 的使用
- 内联 (inline style attribute) 完全不应该这样做
- <head> 标签内的 <style> 标签偶尔可以用
- <link> 标签中的外联推荐的方式
三种主要的选择器
- 元素选择器
- class 选择器
- id 选择器
样式优先级(从高到低)
1. !important
2. 内联样式
3. 按顺序执行
选择器优先级(从高到低)
1. !important
2. 内联样式
3. id 选择器
4. class 选择器
5. 元素选择器
display 属性
- none
- block
- inline
- inline-block
none 不显示
block 占一行
- 默认 block 的标签有
- div p ul ol li h1 h2 h3 h4 h5 h6
inline 只占 content 的尺寸
- 默认的标签有 button input span
inline-block
- inline-block 是 inline 布局 block 模式
- inline-block 对外表现为 inline，所以可以和别的 inline 放在一行
- 对内表现为 block，所以可以设置自身的宽高
position 属性用于元素定位
- static 默认定位
- relative 相对定位, 相对于自己本来应该在的位置
- absolute 绝对定位, 行为有点奇怪
- fixed 固定定位, 相对位置是整个窗口
非 static 元素可以用 top left bottom right 属性来设置坐标
非 static 元素可以用 z-index 属性来设置显示层次
relative 是相对定位
absolute 完全绝对定位, 忽略其他所有东西
- 往上浮动到非 static 的元素
fixed 基于 window 的绝对定位
- 不随页面滚动改变
overflow 属性
- visible 默认
- auto 需要的时候加滚动条
- hidden 隐藏多余元素
- scroll 就算用不着也会强制加滚动条
盒模型
- 内容
- padding
- border
- margin

盒模型相关的 CSS

border
- border-width
- border-style 默认是 none, 表示不显示 border
- border-color
- 简写如下, 顺序不要紧：
- border: 10px blue solid;
border-top
- border-top-width
- border-top-style
- border-top-color
border-right
- border-right-width
- border-right-style
- border-right-color
border-bottom
- border-bottom-width
- border-bottom-style
- border-bottom-color
border-left
- border-left-width
- border-left-style
- border-left-color
margin
- margin-top
- margin-right
- margin-bottom
- margin-left
padding
- padding-top
- padding-right
- padding-bottom
- padding-left
四种写法, 分别对应有 4 2 3 1 个值的时候的解释
- margin: top right bottom left
- margin: (top/bottom) (right/left)
- margin: top (right/left) bottom
- margin: (top/right/bottom/left)
- padding 同理
background 相关属性和缩写
- background-color: #233;
- background-image: url(bg.png);
- background-repeat: no-repeat;
- background-attachment: fixed; /* 背景图片随滚动轴的移动方式 */
缩写如下
- background: #233 url(bg.png) no-repeat;
float 属性(最初用于排版)
- left
- right
- float 那一行相当于没有后面的 block 元素会接上去
水平居中写法
- block 元素居中, 两步走
  1. 设置自己的宽度
  2. 设置自己的 margin: 0 auto;
- inline inline-block 元素居中
  1. 设置父元素的 text-align 属性
  2. text-align: center;
垂直居中
- 记一下当套路不需要理解机制
- 需要父节点是 relative
居中具体 css

.gen-center-box {
    position: relative;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    width: 85%;
    display: block;
    margin: 0;
}

.gen-center {
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    width: 85%;
    display: block;
    margin: 0;
}

.gen-center-y {
    position: relative;
    transform: translateY(-50%);
    top: 50%;
    width: 85%;
    display: block;
    margin: 0;
}

文字溢出截断技巧

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

其他
1. css 隐藏到显示的过渡动画_如何使用 CSS3 过渡和动画突出显示 UI 更改 https://blog.csdn.net/cune1359/article/details/106848007

技术 · #CSS · #选择器 · #盒模型 · #页面布局