CSS 小全-工具盒子

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

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

HTML CSS JavaScript 解耦

CSS 基础 {#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 {#盒模型相关的-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 元素居中, 两步走
- inline inline-block 元素居中
1. 设置父元素的 text-align 属性
2. text-align: center;
1. 设置自己的宽度
2. 设置自己的 margin: 0 auto;

垂直居中
- 记一下当套路不需要理解机制
- 需要父节点是 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

51工具盒子

CSS 小全

CSS 基础 {#css-基础}

盒模型相关的 CSS {#盒模型相关的-css}

厉飞雨

相关推荐

最新文章

猜你喜欢

快捷分类