css(层叠样式表)
为网页添加样式,给元素布局
属性:属性值; color:red;
内联样式: 内联样式表存在于html元素的style属性之中
<div style="color:green;font-size:30px">我是div元素</div>
内部样式表: 标签选择器 类选择器 id选择器
外部样式表: 多个网页共用一个样式 把样式抽取到一个文件中 通过link引入
<link rel="stylesheet" href="./">
@import url("../cshbb") url函数方式引入
@import "../shsj.css"
常见css元素
W3.org标准官方文档
MDN文档
浏览器兼容性 caniuse.com查询css属性的可用性
font-size color background-color width height
div默认宽度是占据整行(块级元素独占一行)即使给div设置宽度 它还是占据整行 高度的话是内容高度
link元素
外部资源链接元素 规范文档和外部资源的关系 link通常写到head里面 引入图标
href指定地址 rel指定类型 stylesheet 或者icon站点图标 或者 rel=“dns-prefetch” 域名提前解析 dns服务器 (域名—>ip地址)域名解析系统
认识进制
二进制(0b) 八进制(0o) 十进制 十六进制(0x)
css颜色表示方法
-
单词 red
-
RGB(red green blue 0-255) rgb(255,0,0) 黑色是纯洁的颜色rgb (0,0,0) 白色是rgb(255,255,255)
-
#646464(十六进制—rgb) 白色#fff 同一个十六进制里面数字一样 可以缩写 #ffffff===#fff
-
RGBA 透明度
css文本属性
text-decoration: none |underline|line-through|overline
text-intend:首行缩进 px|em
text-align: 文本的对齐方式 文本居中显示 父元素设置text-align 里面的行内级会有对应效果 left|right|center| justify(两端对齐 :里面如果是单词 单个单词紧靠两边 中间可能空白 text-last-align: justify最后一行两端对齐)
父级块元素设置text-align:center里面的行内级元素(图片 输入框或者文字)就会居中显示
父级块元素 里面包含块元素 (设置宽度)给父级设置text-align:center不会参数效果 (1.设置margin 2.浮动 )
word/letter-spacing:10px 单词间距 和 字母与字母间距
font字体样式
font-size 可以继承 px|em(相对父元素的字体大小也可以说继承)|百分比% (相对父元素的font-size的百分比)
font-weight:normal400|bold700|500|900
line-height 用于设置一行文本的行高 (基线到基线距离)
文本居中显示 只有一行 height 和line-height相等
font-family:可以继承 宋体 微软雅黑 多设置几个 操作系统不支持会显示下一个 浏览器展示
font-style:normal|italic斜体 字体支持斜体直接找对应的斜体展示|oblique斜体 字体倾斜
font缩写属性 font:font-style font-weight(前面顺序无所谓) font-size/height (字体大小/行高必须写 行高1.5 代表字体大小1.5倍)font-family
选择器
-
通用选择器 *(通配符)选择所有的元素 (所有元素遍历 然后添加样式) 效率低 尽量不要使用
-
元素选择器 元素名称
-
类选择器
-
id选择器 id的值是唯一的 id不要重复
-
属性选择器 包含title的属性的元素 [title]{}表示含有title属性的元素会被选中 [title=val]{}属性等于某个值 *表示包含 $以什么结尾 ^以什么开头
-
后代选择器
- 空格分割 .home span{} 类名为home的后代中span被选中
- 直接子代选择器 > .home>span 选择亲儿子
-
兄弟选择器
* div+span 相邻兄弟选择器
* 普遍兄弟选择器~(选择的是后面的所有兄弟) .home~div 所有的div兄弟
8.选择器组
- 交集选择器div.box 两个选择器紧密挨着 两个条件都符合就选择
- 并集选择器div,p,h2 这些都会被选中 多个元素设置相同样式
9.伪类选择器 元素特定状态的时候加上去的类
-
a标签 div(l v h a)
- :hover鼠标悬浮状态 a:hover鼠标放在a标签上面
- :link a:link{} 未访问的状态链接 只能用于a标签
- :visited a:visited 只能用于a标签 访问过的链接
- :active 鼠标按下去的状态 可以用于其他标签
- :focus input聚焦
-
元素状态伪类
-
结构伪类
-
否定伪类
- :not()
伪元素
:before
<div class="box">
你好 前面添加伪元素
</div>
.box::before{
content:"532"; content属性是必须的 默认是行内元素设置行高不会生效
可能需要转化为块级元素
display:"inline-block"
}
:after
::first-line 首行添加的样式 .box::first-line
::first-letter 选择首字母
::selection选中的文字会产生的效果样式
css特性
-
继承性
-
color 父盒子设置color 后代所有元素都可以继承
-
font-size/font-weight/line-height/text-align/font-family
一般文本字体相关可以继承 调试工具下面会有继承的显示 继承过来的是计算好的值 font-size:2em
强制继承 boder:inherit
-
-
层叠性
- 相同属性设置多次 只会有一次生效(先按照权重判断 权重一样的话 后面设置会生效)
- 选择器权重
- !important 10000 color:red!important;
- 内敛样式 div style=“” 1000
- id 100
- 类选择器 属性选择器([attr=val]) 伪类10
- 元素选择器 伪元素1
- 通配符选择器0
元素类型
- 块级元素(独占父元素(body)一行 即使宽度占不满 会默认margin-right:auto 会单独占据一行 高度内容决定)
- h div p
- 行内级元素(内容的一部分 不需要独占一行) 不能设置宽高 宽高内容决定
- span a img (行内块 行内替换元素 可以同一行显示 可以设置宽高 默认宽高是由内容决定 ) input
display:block(块级|显示)|inline-block|inline|none隐藏
inline-block行内块:元素同时具备行内级\块级的特征
块级元素一般可以包含其他任意元素
特殊情况 p元素不能包裹其他块级元素div
行内元素只能包含行内元素
元素的隐藏的方法
- display:none dom结构存在 不会响应点击事件 不占据位置 其他元素会顶上去 触发重排重绘
- visibilty:hidden 元素占据空间 触发重绘
- rgba 把a透明度的值设置为0 color:#ff000000 透明度0 rgb:(255,0,0,0) 只会对当前这个元素其作用 无关子元素
opacity:0 携带所有的子元素都是这个透明情况
样式不生效
- 选择器优先级太低
- 选择器没有选中元素
- css的使用形式不对
- 元素不支持css属性
- 浏览器不支持
- 被同类型css属性覆盖 font覆盖font-size
所以充分利用浏览器调试工具
css盒子模型
- content
- padding
- border
- margin
行内级非替换元素设置宽高是无效的 (行内级替换级元素是img)
宽度也可以设置min-width max-width min-height max-width
所有块级和行内元素宽度默认width:auto 块级auto默认独占一行 行内级auto包裹内容
- padding内边距
边框和内容的间距
padding:上 右 下 左
padding-top:20px;
padding:10px 上下左右全10px
-
边框 border
border-top-width border-top-color border-top-style
border:10px solid red;
border-radius:50%|60px
-
外边距margin 元素和元素之间的距离
大盒子包含小盒子 希望小盒子离大盒子左边20px
- 如果给大盒子设置padding-left:20 会撑开盒子 可以给父元素设置border-sizing:border-box
- 给小盒子设置margin-left:20px (如果设置上下margin-top的话 会把父元素带下去 没有效果 需要给父亲设置overflow:hidden 开启BFC)
问题:如果我们希望里面子元素距离父元素左上有一定的间距
padding:内边距 父亲和孩子 所以padding更适合场景
margin:外边距 元素和元素的距离(兄弟之间)
margin传递
父元素>子元素 (设置margin-top margin-top)
margin左右值不会传递 margin上下会传递 传递父元素 父元素会执行margin-top (父亲带着盒子一起下来 margin-top)
解决办法(margin上下传递)
- 最好使用padding—最好解决办法
- 设置border border:1px solid transparent
- 触发外层盒子 的BFC 给盒子建立独立空间 overflow:hidden
margin折叠
兄弟之间块级 margin上下会发生折叠 取最大值显示
左右不会折叠
块级元素水平居中问题
- block box width = width +padding+boder+margin 设置宽度是仅仅给content而已 直接给块级元素设置margin:0 auto(给块级子元素设置)浏览器去平均分配 居中方案 算是布局
- 转化行内块元素 父元素设置text-align:center(作用让行内级元素居中)
outline外轮廓
outline:10px solid red outline:none 取消外轮廓 input a 聚焦会有外轮廓 有时候需要取消一下
不占据空间 包含在border外面
行内级元素设置margin-top无效
box-shadow
box-shadow:offset-x (x轴 的偏移量) offset-y blur(模糊度) spread-radius (向外扩散) color(颜色) (inset 可以有可以无 内阴影还是外);
box-shadow:10px 10px 5px yellow;
text-shadow文字阴影
text-shadow:5px 5px 5px red;
行内非替换元素特殊性
span a /strong i(行内元素都是在段落里的 左右一般有效果 上下没有什么效果)
- 宽高不生效
- padding比较特殊 上下会被撑起来 但是不占据空间
- border 比较特殊 上下会被撑起来 但是不占据空间
- margin 比较特殊 上下margin就不会生效
图片居中是行内级 直接给父亲设置text-align:center
块级行内块可以放任何东西
css设置背景
background-image url() 设置背景图片 盖在背景颜色上面
background-repeat no-repeat|repeat|repeat-x|repeat-y
background-size:auto(原图)|contain某一边拉伸|cover覆盖(保持宽高比) |百分比|具体的宽度
background-color
background-position:100px 100px(向右向下偏移)|center center|right bottom 背景图片设置center 如果到时候浏览器宽度变小 背景图片显示的主要还是中间位置
background-attachment:scroll(背景不随内容滚动条滚动) | local(背景随内容滚动)|fixed
background: color url() 200px 30px(前面位置 后面尺寸) 20px 50px noreaped
background-image css样式 不占据空间 不能查看地址 样式可以看地址 支持精灵图
image 元素 图片占据空间 浏览器右键查看地址 不支持精灵图
img 广告图片 logo图片 产品图片
background-image :可有可无的 增加美化效果
高级元素的使用
-
列表元素
- 使用div实现列表
- 列表元素
-
有序列表
-
ol有序列表>li直接子元素
-
ol,li{padding:0;margin:0;list-style:none}
-
-
无序列表
-
ul li
-
ul,li {padding:0;margin:0;list-style:none}
-
-
定义列表
dl >dt > dd
表格元素
tabel>tr >td(border:solid 1px black padding:10px 20px)
table border:collapse把边框折叠 text-align:center(后面会继承)
tabel tr:nth-child(1){font-weight:700}
tabel>caption thead >th tbody tfoot
单元格合并
- 跨行合并
- rowspan
- 跨列合并
- colspan
结构伪类 :隔行样式不同 nth-child(2n) nth-child(2n+1)
表单元素(收集用户信息)
form action method target
input(可替换元素)
-
type text password time radio file button reset(form>input type=“reset” 可以对表单重置 必须用form表单包裹) submit
-
button type=“reset”
-
autofocus
-
readonly (readonly=“readonly” 或者直接写readonly)
-
disabled
input和label (单选框和label结合)
<label for="username"> <input id="username" type="text"> </label>
textarea
radio check
- name value
option >select
常见的Emmet语法
div>p+h1 回车 会生成对应的结构
ul>li{列表内容}*10
ul>li{列表内容$}*10
结构伪类
ul li:nth-child(1) 选择ul第一个子元素li
ul li:nth-child(8) 是li元素 且是父元素的第8 个子元素
ul li:nth-child(2n)选择ul里面所有的偶数li
ul li:nth-last-child(2) 倒数第二个
ul li:nth-of-type(9) 计数式只计算同一个类型的
只找li元素 并且是第9个li元素
-
其他结构伪类
- :first-child 代表选择第一个子元素
- :only-child 该元素只有唯一的子元素
- :root 根元素 html 元素
- :empty 选择空元素
-
否定伪类
- .box :not(.why)
border
设置三角形
可以使用border制作三角形(给边框三个边设置透明颜色 另一个边设置颜色)
css盒子模型
- content
- padding
- border
- margin
行内级非替换元素设置宽高是无效的 (行内级替换级元素是img)
宽度也可以设置min-width max-width min-height max-width
所有块级和行内元素宽度默认width:auto 块级auto默认独占一行 行内级auto包裹内容
- padding内边距
边框和内容的间距
padding:上 右 下 左
padding-top:20px;
padding:10px 上下左右全10px
-
边框 border
border-top-width border-top-color border-top-style
border:10px solid red;
border-radius:50%|60px
-
外边距margin 元素和元素之间的距离
大盒子包含小盒子 希望小盒子离大盒子左边20px
- 如果给大盒子设置padding-left:20 会撑开盒子 可以给父元素设置border-sizing:border-box
- 给小盒子设置margin-left:20px (如果设置上下margin-top的话 会把父元素带下去 没有效果 需要给父亲设置overflow:hidden 开启BFC)
问题:如果我们希望里面子元素距离父元素左上有一定的间距
padding:内边距 父亲和孩子 所以padding更适合场景
margin:外边距 元素和元素的距离(兄弟之间)
margin传递
父元素>子元素 (设置margin-top margin-top)
margin左右值不会传递 margin上下会传递 传递父元素 父元素会执行margin-top (父亲带着盒子一起下来 margin-top)
解决办法(margin上下传递)
- 最好使用padding—最好解决办法
- 设置border border:1px solid transparent
- 触发外层盒子 的BFC 给盒子建立独立空间 overflow:hidden
margin折叠
兄弟之间块级 margin上下会发生折叠 取最大值显示
左右不会折叠
块级元素水平居中问题
- block box width = width +padding+boder+margin 设置宽度是仅仅给content而已 直接给块级元素设置margin:0 auto(给块级子元素设置)浏览器去平均分配 居中方案 算是布局
- 转化行内块元素 父元素设置text-align:center(作用让行内级元素居中)
outline外轮廓
outline:10px solid red outline:none 取消外轮廓 input a 聚焦会有外轮廓 有时候需要取消一下
不占据空间 包含在border外面
行内级元素设置margin-top无效
box-shadow
box-shadow:offset-x (x轴 的偏移量) offset-y blur(模糊度) spread-radius (向外扩散) color(颜色) (inset 可以有可以无 内阴影还是外);
box-shadow:10px 10px 5px yellow;
text-shadow文字阴影
text-shadow:5px 5px 5px red;
行内非替换元素特殊性
span a /strong i(行内元素都是在段落里的 左右一般有效果 上下没有什么效果)
- 宽高不生效
- padding比较特殊 上下会被撑起来 但是不占据空间
- border 比较特殊 上下会被撑起来 但是不占据空间
- margin 比较特殊 上下margin就不会生效
图片居中是行内级 直接给父亲设置text-align:center
块级行内块可以放任何东西
css设置背景
background-image url() 设置背景图片 盖在背景颜色上面
background-repeat no-repeat|repeat|repeat-x|repeat-y
background-size:auto(原图)|contain某一边拉伸|cover覆盖(保持宽高比) |百分比|具体的宽度
background-color
background-position:100px 100px(向右向下偏移)|center center|right bottom 背景图片设置center 如果到时候浏览器宽度变小 背景图片显示的主要还是中间位置
background-attachment:scroll(背景不随内容滚动条滚动) | local(背景随内容滚动)|fixed
background: color url() 200px 30px(前面位置 后面尺寸) 20px 50px noreaped
background-image css样式 不占据空间 不能查看地址 样式可以看地址 支持精灵图
image 元素 图片占据空间 浏览器右键查看地址 不支持精灵图
img 广告图片 logo图片 产品图片
background-image :可有可无的 增加美化效果
高级元素的使用
-
列表元素
- 使用div实现列表
- 列表元素
-
有序列表
-
ol有序列表>li直接子元素
-
ol,li{padding:0;margin:0;list-style:none}
-
-
无序列表
-
ul li
-
ul,li {padding:0;margin:0;list-style:none}
-
-
定义列表
dl >dt > dd
表格元素
tabel>tr >td(border:solid 1px black padding:10px 20px)
table border:collapse把边框折叠 text-align:center(后面会继承)
tabel tr:nth-child(1){font-weight:700}
tabel>caption thead >th tbody tfoot
单元格合并
- 跨行合并
- rowspan
- 跨列合并
- colspan
结构伪类 :隔行样式不同 nth-child(2n) nth-child(2n+1)
表单元素(收集用户信息)
form action method target
input(可替换元素)
-
type text password time radio file button reset(form>input type=“reset” 可以对表单重置 必须用form表单包裹) submit
-
button type=“reset”
-
autofocus
-
readonly (readonly=“readonly” 或者直接写readonly)
-
disabled
input和label (单选框和label结合)
<label for="username"> <input id="username" type="text"> </label>
textarea
radio check
- name value
option >select
常见的Emmet语法
div>p+h1 回车 会生成对应的结构
ul>li{列表内容}*10
ul>li{列表内容$}*10
结构伪类
ul li:nth-child(1) 选择ul第一个子元素li
ul li:nth-child(8) 是li元素 且是父元素的第8 个子元素
ul li:nth-child(2n)选择ul里面所有的偶数li
ul li:nth-last-child(2) 倒数第二个
ul li:nth-of-type(9) 计数式只计算同一个类型的
只找li元素 并且是第9个li元素
-
其他结构伪类
- :first-child 代表选择第一个子元素
- :only-child 该元素只有唯一的子元素
- :root 根元素 html 元素
- :empty 选择空元素
-
否定伪类
- .box :not(.why)
border
设置三角形
可以使用border制作三角形(给边框三个边设置透明颜色 另一个边设置颜色)
字体@font-face{
font-family:“why”
src:url()
}
css Sprite精灵图
减少网页http请求数量 加快网页响应速度
i标签 设置背景图片 设置背景不重复 背景位置 已经 把i 标签 display :inline-block
cursor:auto(根据上下文决定样式) | pointer小手 |default箭头|none |text 一条竖线
标准流布局
- 块级元素独占一行
- 行内级元素可以同一行显示
- 从左往右 从上往下
- 没有层叠关系
- 如果设置padding margin 可以微调一下位置 但是会影响其他元素
static静态定位
- 无定位
- left top right 无效(没有被激活 只针对定位元素有效)
相对定位
relative
-
元素按照标准流布局 可以通过top left right bottom 设置偏移位置 (依据自身的位置)
-
在不影响其他元素位置的前提下,对当前元素位置进行微调
背景图片想要在浏览器缩放的时候展示中间 background:url(…/…/schsb) center
也可以相对定位来写
div>img (让图片一直位于中间 浏览器缩放的时候 一直可以看到中间位置)
<div class="box"> <img src=""> </div> .box{ height:489px; overflow:hidden; } .box img{ position:relative; 先向左偏移自身盒子的一半 left:-960px; 向右偏移父盒子div的一半(margin-left 百分比 是包含块 即是父盒子的宽度的百分比) margin-left:50% }
固定定位
position:fixed 脱离标准流 可以设置top left 相对于浏览器可视区域进行偏移 固定在一个位置
绝对定位
脱离标准流 定位参考对象是最邻近的定位祖先元素 如果没有就是视口
绝对定位元素(设置absolute fixed)特点
-
可以随意设置宽高(无论是行内元素还是块级无所谓)
-
宽高由内容决定
-
不在区分块级行内块特性等等 不受标准流限制
-
不再给父元素汇报高度 (子元素脱离标准流 父元素可能没有高度 样式消失)
-
脱标元素内部还是按照标准流布局
绝对定位的元素 定位参考对象的宽度=left+right+margin-left+margin-right+绝对定位元素的实际占用的宽度
高度=top+bottom+margin-top+margin-bottom+高度
父元素宽度=子元素宽度(必须是块级元素)+margin-left+margin-right(所以给子元素设置margin:0 auto 到时候自动给margin-left margin-right 分配auto 到时候自动居中 )
所以position:absolute 设置宽度(200px) 高度100px 同时设置left:0;right:0;top:0;bottom:0 margin:auto 到时候就会水平垂直居中
所以position:absolute left:0;right:0;top:0;bottom:0 margin:0到时候就会宽度高度百分百
auto是什么
auto–>交给浏览器处理 width:auto
1 行内非替换元素–>width:包裹内容
2 块级元素–>width:包含块的宽度
3 绝对定位元素–>width:包裹内容
粘性定位
day9 147
z-index(只对定位元素有效)
定位元素可以让元素就可以出现层叠情况 所以在定位元素下z-index才有效
浮动
float :left | right |none 指定一个元素沿着左右放置 允许文本和内联元素环绕他
早期不是为了布局 而是为了浮动图像 实现文本环绕效果 。后面成了左右布局方案
绝对定位、浮动都会让元素脱离标准流
浮动元素和浮动元素之间不能层叠
浮动元素不能和行内级内容发生层叠 会把文字等行内级元素挤出去 图文环绕
清除浮动
空隙解决办法
将多个行内级元素中间的空隙去掉
<span>11</span>
<span>11</span>
<span>11</span>
（1.去掉换行符2.浮动解决 统一向一个方向浮动 3.父元素设置font-size:0（父元素解析空格没有尺寸） 子元素设置font-size大小 4.flex布局）
固定技巧
解决全部设置右边距后宽度超过 从而最后一个盒子落下来
1.用伪类给最后一列的盒子去掉样式
2.给这些盒子加一个盒子 然后设置margin-left为负值即可
布局方案
标准流 垂直布局
定位 层叠
浮动 水平布局
flex布局
移动端普及flex
display :flex |inline-flex 这样这个盒子就是flex container 会把盒子里面的子元素叫 flex item
flex item 不区分行内级和块级
默认每一项往主轴挨着放 放不下会挤压 如果设置换行就会换行
flex-direction决定主轴的方向 row|column |row-reverse|column-reverse
flex-wrap:是否换行 wrap(换行 多行)|nowrap（默认不换行）
flex-flow : 方向和换行的省略写法
justify-content:主轴排列
align-item:侧轴排列 flex-start flex-end center stretch高度拉伸（无高度的情况下会自动拉伸）
align-content多行的情况下 space-bettween space-around flex-start flex-end center stretch无高度会拉伸
order决定顺序 越小越靠前 默认是0 （和index不一样）
algin-self 单独给一个项目设置排列
flex-grow 默认值是0 有剩余空间也不放大 决定如何拉伸 看它占几份
flex-shrink 如何缩小 默认是1 空间不足就压缩 设置为0 的时候空间不足就不会压缩
flex-basis 设置项目在主轴上的基础尺寸（和用width基本一样 如果设置单词 换行位置不一样）
flex属性
flex等同于 flex-grow flex-shrank flex-basis的缩写
flex:none ----0 0 auto
flex:auto ----1 1 auto
flex:1------ 1 省略 带单位
flex:1 1 1 1
flex:1 1 10px 1 1 10px
解决项目多余问题 最后一行 没有按要求排列 解决对齐问题（space-between）
加上span 给span设置同样的宽度
logo
div>h1>a(转化块级元素)里面包含文字 text-indent:9999px
给div设置背景图片logo
行高可以继承 同时对行内级设置行高并不会把高度撑起来
解决图片下边缘问题
给行内级元素 设置vertical-align:top |middle|bottom
方法2 将图片设置block
css样式顺序
1.定位和布局
2.展示和可见
3.盒子模型
4.字体和文本
5.背景
6.transform overflow等等
html语义化元素
语义化 正确标签做正确的事情 SEO友好 结构好 代码语义化好
嵌入视频和音频
flash
video src行内替换元素 audio
width height controls muted preload autoplay poster
兼容性写法
<video src=".mp4">
<source src=".ogg"></source>
</video>
audio src controls autoplay muted preload
input元素的扩展
placeholder输入框的占位文字
select ---->multiple 多个值
autofocus 自动聚焦
type= date number search color email
新增全局属性 data-*做自定义数据
<div class="box" date-name="why">
</div>
<script>
const boxel=document.querySelelctor(".box")
boxel.dateset获取对应的值
</script>
white-space
对空白符处理和换行
white-space:nowrap 不换行
white-space:normal
text-overflow:clip|ellipsis
CSS中的函数
rgb rotate scale var calc blur gradient渐变
width:calc(100%-200px)
color:var(main-color)
filter:blur(5px) 模糊度
background-image:linear-gradient(to right, blue,red)
BFC 块级格式化下行文
根元素
浮动元素
绝对定位元素
行内块
overflow:除了visibility
弹性布局
BFC
解决 当属于同一个BFC会出现 margin折叠问题和浮动高度塌陷问题
媒体查询
根据不同设备制定一个开发
css中的单位
px 长度单位
绝对长度单位 px cm mm
相对长度单位 vw/vh (5vw 5%视口) em(相对自己的font-size 自己如果没有设置font-size 就会使用父元素的字体大小 自己本来就是继承父元素的font-size) rem(相对于html的font-size)
pixel
像素是影响显示的基本单位
DPR 设备像素比 物理像素和逻辑像素的比
css编写的痛点
less/sass /scss stylus(偏向python)解决对应的痛点
比如大量重复代码 虽然可以用类来勉强管理和抽取 但是使用起来依然不方便
无法定义变量 如果一个值修改 需要修改大量的代码 比如主题颜色
没有专门的作用域和嵌套 需要定义大量的id class来保证选择器的准确性 避免样式混淆
所以 CSS是面向命名编程
解决上面问题 出现了CSS预处理器
预处理器独特的语法来生成CSS的程序
代码最终转化CSS
less
.less文件编写less代码
还需要把less代码转成css代码 然后才可以被浏览器识别（电脑 node包 通过npm下载less工具 使用less工具对代码进行编译 后续webpack其实可以字段完成这些操作 | vscode插件 | 网上在线编译转化 | 加上js代码把less转化css cdn地址 ）
兼容css
变量 主题颜色 多个地方使用 可能也需要重复修改
如果定义变量 就只需修改一次
@maincolor:red；
@变量名：变量值
@bigFontSize：20px;
color:@maincolor
嵌套
.box{
h1{
color:@maincolor
}
伪类状态
a.link{
color:red;
&:hover{
color:blue;
等同于a.link的hover状态的样式
====a.link:hover{}
}
&:nth-child(1){
结构伪类也是如此
}
}
less语法
运算
混入
就是一行显示展示省略号
.box{
.nowrap_eplisis() ； 混入
}
混入还可以传递参数
.box_border(@boderWidth:5px,@borderColor:red){
border:@borderWidth solid @borderColor;
}
使用混入传递参数的情况
.box{
.box_border(10px,orange)
}
混入和映射结合使用 弥补less中不能自定义函数的缺陷
.box-size{
width:100px;
height:100px;
}
.box1{
width:.box_size()[width];
}
extend继承
.box_border{
border:1px solid red;
}
.box{
&:extend(.box_border)
}
**内置函数 **（color(red)将其转化16进制）
作用域（首先本地 或者继承 或者再父级查找）
Sass和Scss
移动端适配方案
自适应 根据不同设备屏幕大小 自动调整大小 尺寸
响应式 会随着屏幕的实时变动自动调整 是一种自适应
认识视口
浏览器能看到的区域就是视口 不包含浏览器工具栏
移动端视口： 移动端按照980px缩小 布局视口 相对于980px布局 就是布局视口
修改布局视口大小
设置布局视口的宽度
<meta name="viewport" content="width=device-width,initial-scal=1.0,user-scalable=no minimum-scale=1.0 maximum=1.0" > 布局视口宽度布局到多宽就按多宽展示
理想视口
pc端视口就是浏览器能看到的区域就是视口 不包含浏览器工具栏
1.百分比设置
2.rem单位+动态html的 font-size
3.vw单位
4.flex的弹性布局
375px的设计图 或者750设计图
375px 有100px*100px的盒子 设置动态的font-size: 1px width:100rem
考虑两个问题
-
针对不同的屏幕 设置html不同的font-size
-
媒体查询 @media screen and (min-width:375px){html{font-size:20px}} 媒体查询只是在一定范围会改变 而不是实时改变
-
lib-flexible第三方库
-
动态font-size-js动态计算 —通过js动态计算
window.addEventListener(‘resize’,function(){
const htmlEL=document.documentElement（获取html元素）
const htmlWidth=htmlEL.clientWidth（获取到屏幕的宽度）
htmlEL.style.fontsize=htmlWidth/10+“px”
rem+动态的font-size
然后里面用对应尺寸设置对应rem就行 这样就可以实时变化
再设置body的font-size 这样文字不会随着html font-size 变化很多
})
-
-
将原来要设置的尺寸 转化rem 单位
less混入换算
.pxToRem(@px){
result:1rem*（@px/37.5）;
}
.box{
width:.pxToRem(100)[result];
height:.pxToRem(100)[result];
}
手动换算—计算机换算
插件换算----postcss pxtorem（按设计稿配置对应大小 里面root font-size设置对应的值就行）
vw
视口宽度处于10就是font-size 可以设置font-size:10vw这样就直接不用那个js设置动态js
视口宽度处于100就是1vw
1rem等同于设计稿的1/10 1vw等同于屏幕的1/100
vm相对于rem的优势
- 不需要计算html的font-size大小 也不需要给html设置这样一搞font-size
- 不会因为设置html font-size 再给body设置font-size防止继承
- 因为不依赖font-size的尺寸 不担心html的font-size尺寸被改 页面尺寸混乱
- vw相对于rem更加语义化 1vw是1/100的视口的大小
- 可以具备rem之前所有的优点
扫一扫
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
