官方微信手机客户端访问推广帮助

»首页 › 站长交流 › 站长杂谈 › CSS 小全

CSS 小全

梦淡如非（UID：8） 发表于 2024-10-19 21:07:48 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

本帖最后由梦淡如非于 2024-10-19 21:09 编辑

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

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

HTML CSS JavaScript 解耦

CSS 基础

CSS 的使用
- 内联 (inline style attribute) 完全不应该这样做
- <head> 标签内的 <style> 标签偶尔可以用
- <link> 标签中的外联推荐的方式

三种主要的选择器
- 元素选择器
- class 选择器
- id 选择器

样式优先级(从高到低)
- !important
- 内联样式
- 按顺序执行

选择器优先级(从高到低)
- !important
- 内联样式
- id 选择器
- class 选择器
- 元素选择器

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 元素居中, 两步走
  - 设置自己的宽度
  - 设置自己的 margin: 0 auto;
- inline inline-block 元素居中
  - 设置父元素的 text-align 属性
  - 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;

复制代码

评分记录	贡献	收起理由
七夏	+ 10	学习了，支持楼主！

总评分：贡献 + 10

参与评分人数 1 查看全部评分

全有导航 - 上网，从全有开始！ ^_^ 名门萌妹子 ^_^

回复

使用道具举报

全部回复2 显示全部楼层

七夏（UID：1） 发表于 2024-10-19 21:10:56

| 显示全部楼层

很不错，都是很有用的知识👍

小时候，看腻了农村的牛和马，长大后，来到了城里，才知道原来到处都是牛马！

回复支持反对

使用道具举报

梦淡如非（UID：8） 发表于 2024-10-19 21:11:26 | 显示全部楼层

七夏发表于 2024-10-19 21:10
很不错，都是很有用的知识👍

从0开始学习，哈哈。

全有导航 - 上网，从全有开始！ ^_^ 名门萌妹子 ^_^

回复支持 1 反对 0

使用道具举报

快速回帖

1楼

2楼

3楼

关于楼主

梦淡如非 Lv.9

超级版主

主题
592
回答
194
积分
1774

虚位以待，此位置招租

商务推广

网盘拉新-短剧推广此位置招租此位置招租此位置招租此位置招租此位置招租此位置招租此位置招租此位置招租此位置招租