![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css学习笔记
Proshin_Pan
这个作者很懒,什么都没留下…
展开
-
box-sizing:border-box 及兼容
div { box-sizing: border-box; -moz-box-sizing: border-box; /* firefox*/ -webkit-box-sizing: border-box; /* chrome safari*/ -ms-box-sizing: border-box; /* IE8一下 */ -o-box-sizing: border-box; /* presto opera*/ } .content-box { box-sizing: content-b原创 2021-06-07 22:07:35 · 729 阅读 · 0 评论 -
css学习笔记(背景图)
backgroud-image 背景图 路径 background-image:url(...); 重复与否 background-repeat: 可选值: repeat 默认值 repeat-x/y 沿着x/y重复 no-repeat 不重复 背景图位置 background-position: //通过top、left、right、bottom、center 几个方位来设置背景图的位置 //也可以通过数值(px)来设置偏移位置 背景的范围 background-c原创 2020-05-15 22:27:40 · 127 阅读 · 0 评论 -
css学习笔记(字体、文本相关)
color:#bfa 设置字体颜色 font-size 字体大小: 1. em:相当于当前元素的一个font-size 2. rem:现对于根元素的一个font-size font-family 字体格式: 1. serif 衬线字体 (带修饰的字体) 2. sans-serif 非衬线字体 3. monospace 等宽字体 –font-family可以同时制定多个字体,多个字体间用逗号隔开,从第一个到最后优先使用。 font-family:Microsoft YaHei,tahoma,arial,Hir原创 2020-05-12 14:21:55 · 220 阅读 · 1 评论 -
css学习笔记(定位)
position定位 1. relative相对定位 不会脱离文档流,相对自身的静态位置通过top,bottom,left,right进行定位。 2. absolute 绝对定位 脱离文档流,会选择一个有定位属性的父级元素进行绝对定位(若没有定位属性的父级,则以body的原点进行定位),同样通过top,bottom,left,right进行定位。 3. fixed 固定定位 类似于absolute,fixed的参照对象永远是视口(vp)。 4. sticky 粘滞定位 特点与relative基本一致,不同原创 2020-05-12 11:51:24 · 110 阅读 · 0 评论 -
css学习笔记(box-sizing盒子模型)
盒子模型 1. box-sizing:content-box; 默认值,宽度和高度指定内容区的大小。 2. box-sizing: border-box; 盒子的宽度和高度包含了边框、内边距以及内容区域 总结 相比较默认值content-box,css3的border-box在布局时的使用更简单。特别是采用flex布局时,为了页面的自适应,盒子的width一般采用 %的形式,但border、padding和margin还是用px,此时使用content-box时需要对盒子的width和height数值原创 2020-05-12 10:56:39 · 151 阅读 · 0 评论 -
css学习笔记(display、visibility、opacity)
项目 opacity 电脑 $1600 手机 $12 导管 $1原创 2020-05-12 09:58:04 · 127 阅读 · 0 评论 -
学习笔记(浮动及清除浮动)
css学习笔记(浮动及清除浮动) 浮动 浮动后元素脱离文档流,不在占据文档流位置 用于文字环绕图片布局 脱离文档流的特点: –块元素不在独占一行,块元素的高度默认被内容撑开 –行内元素可以设置行高 BFC 块级格式化环境 开启BFC的特点: 1. 开启BFC的元素不会被浮动元素覆盖 2. 开启BFC的子元素与父元素的外边距不会重叠 3. 开启BFC的元素可以包含浮动的子元素 可以通过一些特殊方式来开启元素的BFC 1. 设置元素的浮动 2. 将元素设置为行内块元素 3. 将元素的overflow设置为原创 2020-05-11 17:40:02 · 105 阅读 · 0 评论 -
css学习笔记(选择器)
css学习笔记 1. 符合选择器 a. 带有title属性p元素 p[title] {... } b. 带有title且属性值为xxx的p元素 p[title=xxx] {... } c.带有title且属性开头为abc的p元素 p[title^=abc] {... } d.带有title且属性结尾为abc的p元素 p[title$=abc] {... } e.带有title且属性包含abc的p元素 p[title*=abc] {...} 2. 伪类选择器(伪类用来描述一个元素的特殊原创 2020-05-11 17:06:27 · 106 阅读 · 0 评论