一、CSS元素类型
1、分类
-
按显示方式:块级元素、行内级元素
-
按内容方式:替换元素、非替换元素
2、display属性:分类的实现
用于元素的显示方式。
- display属性的常见4种取值:
1 2 3 4 | display:block;//设置块级元素,类似的也有: display:inline;//元素默认,用于设置行内级元素 display:inline-block;//设置为行内块级元素 display:none;//用于隐藏元素,并不占页面空间 |
- display的补充
1 2 3 4 5 | 浏览器默认给元素加的display样式 display:table;//table元素 display:table-row;//tr元素 display:table-cell;//td元素 display:list-item;//li元素 |
- inline-block特点
特点:
跟其他行内级元素在同一行显示;
可以随意设置宽高;
默认宽高由内容决定;
可以理解为:
对外是行内级元素;
对内是块级元素;
常见用途:
让行内级非替换元素(a、span等)可以设置宽高;
让块级元素(div、p等)能够跟其他元素在同一行显示。
3、visibility属性
用于元素的显示与隐藏。
与display:none;区别:
visibility设置隐藏时,元素看不见,但依旧占着原来的位置;
display设置隐藏时,元素看不见,不会占着任何位置,相当于删除。
1 2 | visibility:hidden;//隐藏元素 visibility:visible;//显示元素,默认值 |
4、overflow属性
用于控制内容溢出时的行为。
1 2 3 4 5 | overflow:visible;//默认值,超出div溢出的内容照样可见; (会挡住div下面的块级元素的背景,文本还是可以看见;行内级元素在图片上方) overflow:hidden;//超出部分直接裁剪 overflow:scroll;//超出部分不可见,但可以通过滚动条在区域内滚动查看,滚动条占宽高,内容会被覆盖一些 overflow:auto;//内容超出时出现滚动条,不超出正常显示。 |
还有overflow-x、overflow-y属性,用于设置水平、垂直方向的溢出后行为,一般用得少,因为有的浏览器还可能不支持。
5、元素之间的空格
行内级元素(包括inline-block元素)的代码之间如果有空格,会被解析显示为一个空格。
解决方案:
- 元素代码之间不要留空格;
- 注释掉空格;
- 设置父元素的font-size=0,然后在元素上重新设置所需font-size
- 给所需元素都加float属性,脱离标准流;(常用)
二、盒子模型
Html中每个元素都可以看做是一个盒子。
1、content内容,padding内边距,border边框,margin外边距
对于行内非替换元素:a、span、strong、label、
因为宽高不能用,
padding属性左右效果正常,但是上下显示也正常但是不占据空间只是表象;
margin只有左右效果,上下方向没有效果;
边框效果与padding类似;显示正常,但上下边框不占空间
对于行内替换元素:img、input、
- 因为宽高可以使用,所以padding、margin属性在上下左右效果正常,占空间,边框及以内背景色;
- 宽高为内容的;
对于块级元素:div、h1~h6、p、hr、form、ul、ol、li
- 块级元素效果正常,边框内为背景色,边框的颜色覆盖背景色;
- 垂直方向两个块级元素的外边距会重叠,以较大的外边距为实际间距;
- 宽高为内容的;
注:宽度等于边框的距离,需要设置: box-sizing: border-box;
2、盒子模型常见属性
:margin、padding的百分比参照父元素的宽度;
百分比参照自身的是:transform:translate(50%);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | width:20px;//宽度 min-width:20px;//最小宽度 max-width:20px;//最大宽度 height:20px;//高度 min-height:20px;//最小高度 max-height:20px;//最大高度 ---- margin: 5px;//一般用于兄弟的间距 margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px/50%;//百分比相对于父元素大小 ---- padding: 5px;//一般用于父子间距 paddign-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px/50%;//百分比也是相对于父元素大小 ---- border: 1px solid #000;//边框,不区分顺序 |
3、父子元素:上下margin-top/bottom传递
情况一:当两块级元素是父子关系时,子元素与父元素顶部线重叠时,子元素的margin-top会传递给父元素,自身没效果;
情况二:子元素的底部线与父元素底部线重叠,且父元素高度是auto,子元素的margin-bottom会传递给父元素,自身就没效果了;
解决:
- 给父元素设置padding-top、padding-bottom,形成间距;
- 给父元素设置边框border;
- 触发bfc(block format context 块级格式化上下文),给父元素加结界,让父元素不受子元素影响;
- 父元素中设置浮动float属性、绝对定位(positon)、固定定位(position)、inline-block(display)、flex(display)都可(副作用:脱流、行内级效果等,父元素由内容撑起);
- 父元素设置overflow属性,值非默认值visible即可,一般为hidden,不会有副作用;
4、兄弟元素:上下margin重叠(collapse)
垂直方向两个块级元素的下外边距与上外边距会重叠,以较大的外边距为实际间距;
解决:只设置其中某一个元素的外边距;
5、边框border属性
应用:
实现三角形、箭头:(前提块级元素宽高=0)
- 通过四条边框,设置三条透明;
- 通过两条边框,设置一条透明;
1 2 3 4 5 6 7 8 | .box{ margin: 20px; border-top: 100px solid transparent;//其中一个设置透明 border-left: 100px solid #900; width: 0; height: 0; transform: rotate(-45deg); } |
6、边的圆角属性:border-radius:50%(参考显示宽度:width+padding+border)
左上:border-top-left-radius
右上:border-top-right-radius
左下:border-bottom-left-radius
右下:border-bottom-right-radius
1 2 | border-radius: 20px;//四个角都是圆角 border-top-left-radius: 20px 30px;//左上:左20px上30px,椭圆角 |
7、outline属性
效果:不占标准流空间;默认显示在border外面。
用途:
- 去除a元素、input元素、textarea元素的focus效果;
a,input,textarea{outline:none;} - 页面调试时查看元素;
div{outline:1px solid #000;}
三、盒子背景设置
1、阴影
1 2 | box-shadow: 5px 5px; box-shadow:inset 5px 5px 5px 5px #009; |
2、文字阴影:text-shadow
1 | text-shadow:5px 5px 5px #009;//没有延伸距离,没有inset |
适用于::first-line、::first-letter;
3、盒子尺寸:box-sizing
box-sizing:content-box;//宽度不包括内边距及边框(W3C标准盒子模型)
box-sizing:border-box;//宽度包括内边距及边框(IE8以前的浏览器)
4、水平居中效果
普通文本:text-align:center;(父元素)
行内元素:text-align:center;(父元素)
行内替换元素:text-align:center;(父元素)
行内块级元素:display:inline-block;(自身)text-align:center;(父元素)
块级元素(不是内部文本):margin:0 auto;(自身)
5、背景图片:background-image、background-repeat、background-size、background-position
1 2 3 4 5 6 7 8 9 10 11 | background-image: url(""),url("");//类似进栈展示,第一张在最上面,不能显示,就会显示第二张; background-repeat: no-repeat;//背景图片不平铺 background-repeat:repeat-x;//横轴平铺 background-repeat:repeat-y;//纵轴平铺 background-repeat:repeat;//默认值,平铺,不写这个属性就是平铺效果 background-size: cover;//图片等比拉伸填充背景 background-size: contain;//图片拉伸到一边到头即停止,正常全部展示,不一定覆盖背景空间 background-size: 30% 50%;//占背景的百分比,宽占总宽30,高占50,写一个就是宽,高自适应 background-size: 50px 60px;//宽 高 background-position: center/left/right center/top/bottom;//默认值居中,位置居中,宽 高 background-position: 10px 10px;//宽的开始点 高的始点 |
6、CSS Sprite精灵图、雪碧图(ps)
:是一种CSS图像合成技术,用于将小图片集中在一张图上,然后通过css背景定位(background-position)展示对应部分;
- 减少网页的http请求,加快网页访问速度,减轻服务器负担;
- 减少图片总大小
- 解决图片太多不好命名问题
7、背景依托:background-attachment
1 2 3 | background-attachment:local;//背景图跟随元素内容滚动 background-attachment:scroll;//默认值,跟随元素移动 background-attachment:fixed;//相对于浏览器窗口固定在那 |
8、背景属性缩写
1 2 | background: image position/size repeat attachment color; //size要写必须写在position后面;都可以省略; |
9、background-image与img
10、光标的样式:cursor
1 2 3 4 5 | cursor:auto;//浏览器决定指针样式 cursor:default;//操作系统决定,一般是小箭头 cursor:pointer;//小手,也是移动到链接上的默认样式 cursor:text;//竖线,文本输入框的默认样式 cursor:none;//没有任何指针显示在元素上 |
四、标准流、定位
1、标准流Normal Flow(常规流、正常流、文档流【document flow】)
- 从左到右、从上到下按顺序摆放
- 默认情况下,互相之间不存在层叠现象(指兄弟元素之间)
2、利用margin、padding定位
在标准流中,可以使用内外边距定位;
缺点:
- 设置某元素边距,通常会影响到标准流其他元素的定位效果;
- 不便于实现兄弟元素层叠效果
3、利用position属性定位
- 静态定位、相对定位,无论设置属性还是值(left、right、top、bottom)都不影响标准流;
- 绝对定位、固定定位只要设置就会影响标准流;只是默认位置是标准流中原来的位置而已。
1 2 3 4 5 6 7 8 9 10 | position:static;//默认值,静态定位,还在标准流(left、right、top、bottom没有效果) position:relative;//相对定位,不脱离标准流,原有位置一直占着(子绝父相的由来),单纯设置这个属性,不影响其他标准流; //left、right、top、bottom相对于自身位置,位移前自身位置依旧保存,位移后的元素相当于悬浮移动,不影响其他元素,可以实现层叠; position:absolute;//绝对定位,设置后脱离标准流,不占原来位置,默认先在原有位置上方; //left、right、top、bottom相对于参考的上级非static元素或浏览器视口;可以使用z-index属性;脱离标准流,但是不设置位置时,还在标准流所在位置,只是位置是虚的,会被其他元素占用,相当于悬浮在上面; position:fixed;//固定定位,设置后脱离标准流,不占原有位置,默认在原有位置上方; //left、right、top、bottom的设置相对于浏览器视口(viewport); |
4、脱离标准流元素特点(flex布局没有脱离标准流)
原本为inline、inline-block、block的元素脱标后为block块级元素;只不过没有参考的父元素,不再占据整行,宽度由内容决定。
- 可以随意设置宽高,一般变为块级元素
- 宽高默认由内容决定,不占据整行,所以不能直接用margin:0 auto;水平居中;
- 不再受标准流的约束
- 不再与父元素有关联
5、绝对定位公式
- left、right:auto;浏览器不会平分;
- margin:auto;浏览器会平分;
- margin默认为0;
6、绝对定位元素的层叠顺序
五、浮动float属性
CSS中3种常用方法对元素进行定位与布局
- normal flow :标准流、常规流、文档流(同类间不层叠)
- absolute positioning:绝对定位(absolute、fixed)
- float:浮动定位(同类间不层叠)
层叠高低:浮动定位>绝对定位>标准流
绝对定位、浮动定位让元素脱离标准流,宽高自身内容决定,不占据整行,实现更灵活的布局。
1、三个取值:
1 2 3 | float:none;//默认,不浮动 float:left;//向左浮动 float:right;//向右浮动 |
2、六条规则:
- 脱离标准流,朝着向左/向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止;
- 浮动元素不能与行内级内容层叠,行内级内容会被浮动元素推出;(行内级元素、inline-block元素、块级元素的文字内容)–【图文环绕】
- 行内级元素、inline-block元素浮动后,其顶部将与所在行的顶部对齐;
- 如果元素向左/右浮动,浮动后的元素边界不会超出包含块的边界;
- 浮动元素之间不能层叠;
- 浮动元素的顶端不能超过包含块的顶端,也不能超过之前所有浮动元素的顶端。
3、display:inline-block水平布局的缺陷
- 代码换行引发元素间空隙(与font-size有关);
- 元素中有文本,对齐方式会沿基线对齐;(与vertical-align: baseline;有关)
4、浮动的应用
- 解决行内级元素、inline-block元素的水平间隙问题
- 布局
5、margin负值的应用
- 可用宽度:实际占据的宽度,没占据的可以被其他元素占据;影响布局;
- 展示宽度:通过margin负值,可以比可用宽度大,但是多出去的不占空间;影响展示;
- 父元素的展示宽度(width属性)为子元素的可用宽度。
问题描述一:
在进行布局时,同一行多个元素摆放后,设置margin-right让它们之间产生间距,那么最后一个元素设置的右边距总是多余的,怎么处理?
解决方案:
- 方案一:每一行最后的元素,单独再加一个类,去除这个margin-right;
- 方案二:通过伪类选择器;(兼容性问题:IE8以上才支持)
- (最优)方案三:利用margin负值;
.container固定宽度>.wrap过渡层auto宽度+margin负值>很多的item占据的是.wrap的宽度 - .container:外层div,设置固定宽度,用于居中显示;
- .wrap:关键过渡div,不设置宽度,总宽度(可用宽度)继承,内容宽度(展示宽度)用于内部浮动元素做可用宽度(内部浮动元素在可用宽度基础上做展示);
1 | width of block(实际可用宽度/只能继承上一级展示宽度/浏览器视口) = content width(设置的展示宽度/auto/不能继承) + padding width(默认0) + border width(默认0) + margin width(默认0,用于补差) |
问题描述二:
浮动元素设置边框时的中间边框重复问题?
解决方案:
给浮动元素设置margin-right:-1px;让边框重合;浮动元素的内容宽度是定值不变(可用宽度变小了),只是少占据了包含块1px的宽度,导致其他浮动元素左移覆盖;
6、清除浮动
浮动引发的不足:
浮动元素脱离标准流,不再向父元素汇报高度,父元素无法计算浮动子元素的高度,如果不设置高度没法被浮动子元素撑起来,导致高度坍塌问题;
清楚浮动目的:
让父元素计算总高度时,把浮动子元素的高度也计算进去,便于页面布局。
清楚浮动方案:
- 给父元素设置固定高度(不推荐);
- 利用clear样式属性,给空div元素设置,来做浮动元素结尾分割(可以写在父元素内或外)(不推荐);
- 利用br标签的clear属性,类似clear样式效果(可以写在父元素内或外)(不推荐);
- 利用伪元素+clear属性,给某个类添加伪元素,后续谁需要谁添加这个类;(推荐)
.clear-float::after{content:""; clear:both; display:block;} - 给父元素设置 overflow:hidden(非默认值皆可);(触发父元素BFC,会计算内部浮动元素高度)
1 2 3 | clear:left;//要求该元素的顶部低于之前生成的所有左浮动元素的底部 clear:right;//要求该元素的顶部低于之前生成的所有右浮动元素的底部 clear:both;//要求该元素的顶部低于之前生成的所有浮动元素的底部 |
六、transform形变
1、transform形变属性
CSS transform属性允许通过函数传值,旋转、缩放、倾斜、平移给定元素,不占标准流,悬浮会挡住其他元素。
- 平移(函数):translate(x,y)//数值、百分比(参照元素自身大小)
transform: translate(5px); //x轴移动
transform: translate(5px,5px); //x、y轴移动,不影响标准流,相当于悬浮,会挡住其他元素 - 缩放(函数):scale(x,y)//数字、不支持百分比,函数必须加逗号
transform: scaleX(2);
transform: scale(2); //x、y放大 - 旋转(函数):rotate(40deg/-40deg)
- 倾斜(函数):skew(deg,deg)
- 变形的原点(属性):
transform-origin:center top;//x、y一起设置
2、transition过渡属性
1 | transition:all 300ms linear 2s; |
七、vertical-align垂直对齐方式
1、定义
vertical-align 会影响行内级元素在一个行盒中的垂直方向的位置。
行盒(inline-box):行内级元素(div文本)产生每一行的行高,一行的行高撑起一行的行盒,总的行盒撑起div高度;
- 包含了内部元素的可用空间:行内级元素、inline-block元素及边距
2、取值
默认值:baseline;
行内级盒子:行内替换元素、inline-block元素
1 2 3 4 | vertical-align: baseline;//默认,基线对齐 vertical-align: top;//让行内级盒子顶部与行盒顶部对齐 vertical-align: bottom;//让行内级盒子底部与行盒底部对齐 vertical-align: middle;//让行内级盒子中心与行盒中X的中心对齐 |
3、vertical-align:middle;做行内级盒子垂直居中的不足
不足:
因为行内级盒子中心是与X的中心(比基线高比中线低)对齐的,而行盒通过line-height=height居中,是中线居中;所以导致行内级盒子会相对偏下一些。
弥补:
配合设置父元素的字体font-size:0;
x的中心就是中线就是基线了;字体不能显示。
真正居中方法:
利用定位:img{position:relative;top:50%;tranform:translate(0,-50%)}