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
类选择器 伪类
权重100
id选择器
权重 1000
行内样式表
权重最高的
!important
权重 12
.nav ul li
权重会叠加
优先级
三大特性
选择某类型所有标签
标签/元素选择器
选择一个或者多个标签
用点来声明 class 来调用
可以重复使用很多很多次
类选择器
使用方法和类相同
只能使用一次 唯一的
* 所有的 选择所有的标签
特殊情况使用
通配符选择器
基础选择器
选择所有的子孙后代
.nav li
后代选择器
选择亲儿子 第一级别的儿子
.nav>li
子代选择器
如果偶遇相同的样式 集体声明 逗号隔开
并集选择器
这个是p标签而且他的类名一定是nav
p.nav
交集选择器
a 浏览器自带样式 如果我们给a指定样式， 就需要单独给a 从新给定样式
a 和 a：hover
链接伪类选择器
复合选择器
选择器
概念与基础
别忘了跟单位
font-size
跟斜体有关系 em i
font-style
字体加粗 strong b h
font-weight
font-family
font: 斜体 加粗 字号/行高 字体;
综合写法 字号和字体一定不能省略
综合写法
字体
十六进制的颜色必须 # 开头
color
行高
line-height
让盒子里面文本水平居中对齐
text-align
text-indent:2em; 首行缩进2个字
首行缩进
text-indent
取消下划线
none
添加下划线
underline
文本的修饰
text-decroation
div行高默认50px
文字行高默认16px
div是html中css排版元素，文字是html骨架元素，两个体系
vertical-align原理
vertical-align与垂直居中
文本
文字属性
不可思议的混合模式 background-blend-mode
参考资料
background-color
背景颜色
background-image
背景图片
background-position
背景位置
background-repeat
背景平铺
background-attachment
背景固定
背景属性
宽度高度
基于Ruby，先安装Ruby，再安装Sass
brew install ruby
gem install sass
echo 'export PATH=\"/usr/local/opt/ruby/bin:$PATH\"' >> ~/.bash_profile
bash
echo 'export PATH=\"/usr/local/opt/ruby/bin:$PATH\"' >> ~/.zsh_rc
zsh
升级到最新版本
MacOS
ruby -v
验证
Ruby安装
换源
Gem
Ruby库的安装
Ruby
过时实现
Github下载
安装
Dart Sass
主流实现
阮一峰
官方文档
教程
Preferences->Tools->File Watchers
自动编译
Webstorm
文件input.scss
$blue: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
记住，ruby版本的sass用不了这个。。。
use
导入
语句
操作符
基础语法
实际使用
常用函数与库
SASS
LESS
top和margin-top的区别
vue 页面组件遮罩层无法全屏的一个解决方案
菜鸟教程 CSS 盒子模型
盒子模型
盒子模型用得少了，一般用flex自适应
说明
盒子布局 - 父元素内部位置
CSS 布局1（绝对定位、相对定位、浮动）
菜鸟教程 CSS Position(定位)
元素定位
Flex 布局语法教程
.box{ display: -webkit-flex; /* Safari */ display: flex;}
启动Flex布局
display: -webkit-flex; /* Safari */display: flex;flex-direction: column;justify-content: center; /* Main Axis */align-items: center; /* Other Axis */
基本使用
Flex基本结构
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-direction
定义了项目在主轴上的对齐方式
justify-content
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-wrap
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow
定义项目在交叉轴上如何对齐
align-items
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
align-content
容器属性说明
项目属性说明
Flex布局 -对子元素进行布局
CSS
0 条评论
回复 删除
下一页
