CSS
2021-10-28 15:02:02 3 举报AI智能生成
CSS使用脉络，请收藏，持续更新
作者其他创作
大纲/内容
概念与基础
显示模式
行内元素
一行显示多个
不能设置宽度和高度
默认的大小是内容的大小
span a u b i strong
文本级元素
块级元素
一行放一个标签
霸道
可以设置宽度和高度
默认大小 浏览器的宽度 或者 父亲的宽度 100%
div p ul ol dl table ...
容器级元素
行内块元素
一行可以放多个
可以设置宽度和高度
默认的大小是 内容的大小
img input td
转换
display：block
转换为块级元素
display：inline
转换为行内元素
display：inline-block
转换为行内块元素
三大特性
层叠性
如果样式冲突， 我们采取 就近原则
继承性
子级不指定，有一些样式 会继承父亲的样式
文字类的样式 text- font- line- 颜色等
优先级
不同选择器 级别执行不一样
通配符选择器 或者 继承
权重 0
标签选择器
权重1
类选择器 伪类
权重 10
id选择器
权重100
行内样式表
权重 1000
!important
权重最高的
权重会叠加
.nav ul li
权重 12
选择器
基础选择器
标签/元素选择器
选择某类型所有标签
类选择器
选择一个或者多个标签
用点来声明 class 来调用
可以重复使用很多很多次
id选择器
使用方法和类相同
只能使用一次 唯一的
通配符选择器
* 所有的 选择所有的标签
特殊情况使用
复合选择器
后代选择器
.nav li
选择所有的子孙后代
子代选择器
.nav>li
选择亲儿子 第一级别的儿子
并集选择器
.nav, .footer
如果偶遇相同的样式 集体声明 逗号隔开
交集选择器
p.nav
这个是p标签而且他的类名一定是nav
链接伪类选择器
a 和 a：hover
a 浏览器自带样式 如果我们给a指定样式， 就需要单独给a 从新给定样式
文字属性
字体
font-size
别忘了跟单位
font-style
跟斜体有关系 em i
font-weight
字体加粗 strong b h
font-family
综合写法
font: 斜体 加粗 字号/行高 字体;
综合写法 字号和字体一定不能省略
文本
color
十六进制的颜色必须 # 开头
line-height
行高
text-align
让盒子里面文本水平居中对齐
text-indent
首行缩进
text-indent:2em; 首行缩进2个字
text-decroation
文本的修饰
none
取消下划线
underline
添加下划线
vertical-align与垂直居中
vertical-align原理
div行高默认50px
文字行高默认16px
div是html中css排版元素，
文字是html骨架元素，两个体系
文字是html骨架元素，两个体系
背景属性
参考资料
不可思议的混合模式 background-blend-mode
背景颜色
background-color
背景图片
background-image
背景位置
background-position
背景平铺
background-repeat
背景固定
background-attachment
宽度高度
css3自适应布局单位vw,vh详解
SASS
入门与工具
过时实现
Ruby
Ruby安装
基于Ruby，先安装Ruby，再安装Sass
MacOS
brew install ruby
gem install sass
升级到最新版本
bash
echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile
zsh
echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zsh_rc
验证
ruby -v
Ruby库的安装
MacOS
Gem
换源
主流实现
Dart Sass
安装
Github下载
教程
阮一峰
官方文档
Webstorm
自动编译
MacOS
Preferences->Tools->File Watchers
快速上手
编写
文件input.scss
$blue:blue;
.blue {
color: $blue;
}
.blue {
color: $blue;
}
编译
sass input.scss output.css
嵌入
<link rel="stylesheet" type="text/css" href="css/output.css">
其他
sass --watch
sass --help
后缀名
sass
使用大括号和分号
scss
使用大括号和分号
基础语法
变量
符号
老版本用!表示变量，新版本用$
CSS里面有个import也是使用!，为了防止冲突，然后还有美观问题？
赋值
任何CSS可以使用的赋值，都可以用于SASS
作用域
{}内定义，那么只能作用于{}内
命名
使用中划线命名，命名全名且有意义
当然下划线也可以，在Sass中变量，函数，混合器相互兼容，但CSS部分不兼容中划线和下划线
嵌套CSS
用于为容器及其子元素编写样式
导入
编译文件夹内全部文件
sass --update input_dir:output_dir
import
use
记住，ruby版本的sass用不了这个。。。
语句
操作符
实际使用
常用函数与库
LESS
盒子布局 -
父元素内部位置
父元素内部位置
参考资料
top和margin-top的区别
vue 页面组件遮罩层无法全屏的一个解决方案
菜鸟教程 CSS 盒子模型
盒子模型
说明
盒子模型用得少了，一般用flex自适应
元素定位
参考资料
CSS 布局1（绝对定位、相对定位、浮动）
菜鸟教程 CSS Position(定位)
Flex布局 -
对子元素进行布局
对子元素进行布局
参考资料
Flex 布局语法教程
启动Flex布局
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
display: -webkit-flex; /* Safari */
display: flex;
}
基本使用
display: -webkit-flex; /* Safari */
display: flex;
flex-direction: column;
justify-content: center; /* Main Axis */
align-items: center; /* Other Axis */
display: flex;
flex-direction: column;
justify-content: center; /* Main Axis */
align-items: center; /* Other Axis */
Flex基本结构
容器属性说明
flex-direction
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
justify-content
定义了项目在主轴上的对齐方式
flex-wrap
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
align-items
定义项目在交叉轴上如何对齐
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
项目属性说明
0 条评论
下一页
