![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
小木house
这个作者很懒,什么都没留下…
展开
-
CSS层叠相关的理解
参考张鑫旭慕课网CSS的z-index课程,链接为:https://www.imooc.com/learn/6431.几个概念z轴:指的是用户的眼睛与屏幕之间的垂直的轴线,表征了屏幕与用户眼睛之间的距离远近。这里我们一般认为用户的眼睛位置不动,因此通过让页面上的元素成为“层叠上下文元素”来拉近其与用户的距离。层叠上下文(stacking context):HTML元...原创 2019-03-05 09:31:11 · 332 阅读 · 0 评论 -
带偏移量的绝对定位
参考张鑫旭慕课网CSS的absolute课程:https://www.imooc.com/learn/1921.absolute的特性与偏移量1.1 偏移量1. 四个方向的偏移量一般组合使用,水平方向的一个与垂直方向的一个。2.当只使用水平方向或者垂直方向时,那么另一个方向将仍受到普通文档流的影响。比如只有top:10px;那么水平方向需要用margin-left或者m...原创 2019-03-25 17:35:04 · 1331 阅读 · 0 评论 -
无依赖绝对定位的应用
参考张鑫旭慕课网绝对定位课程:https://www.imooc.com/learn/192含义、特点:无依赖的绝对定位:当绝对定位元素不使用top/right/bottom/left中任何一个属性时,或者上述四个偏移量都使用auto取值时,该绝对定位元素不受其参照物的限制,又可以称为无依赖的绝对定位元素。 特点1:是一个无宽、高的浮动元素,因此会尽可能向上浮动。 特点2:位置跟随性...原创 2019-03-23 21:23:40 · 1031 阅读 · 0 评论 -
CSS垂直水平居中汇总
1.块级元素水平居中方法解读:块级元素水平居中是指块级元素相对于自己的包含块水平居中,方法为对块级元素设置margin:0 auto; 如果块级元素变成float或者absolute的话,那么这个方法失效。 代码写为margin:auto;在这种场景下等价于margin:0 auto; <div id="wrap"> <div id="t...原创 2019-06-15 16:43:40 · 215 阅读 · 0 评论 -
CSS百分比参照物整理
百分比的参照物1.参照于包含块的高度:top、bottom、height2.参照于包含块的宽度:left、right、width、margin(四个方向)、padding(四个方向)3.参照于自身的尺寸:transform:translate(50%,30%);水平方向参照于自身的宽度,垂直方向参照于自身的高度4.参照于背景区(background-origin指定)的尺寸:backgro...原创 2019-06-20 15:34:39 · 504 阅读 · 0 评论 -
CSS背景总结
1.background简写属性 background是一个简写属性,本身不可继承,其中所有分量也不可继承,其所包含的分量有很多,顺序无关,下面给出一个列表。由于分量太多,一般不建议使用简写属性,因为一旦简写属性写在了分量属性的后面,就会把分量属性覆盖,除非把简写属性写在分量前面,分量属性才不会被简写属性覆盖。通常也可以把background-image background-repe...原创 2019-06-18 11:18:56 · 276 阅读 · 0 评论 -
vertical-align的应用
参考张鑫旭慕课网CSS的absolute课程:https://www.imooc.com/learn/5421.vertical-align概述1.1 适用元素默认状态下能够使用vertical-align属性的元素有:图片、按钮、文字、单元格等inline水平元素:<img>、<span>、<strong>、<em>、匿名文本结...原创 2019-03-24 17:26:11 · 2232 阅读 · 0 评论 -
面试中常问的几个水平、垂直居中的方法
1. 对齐相关的几个CSS属性三个属性:text-align、vertical-align、line-height参考链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-alignhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/text-alignhttps...原创 2019-03-20 17:15:36 · 643 阅读 · 0 评论 -
CSS对链接应用样式
参考:《精通CSS高级Web标准解决方案(第2版)》 http://www.w3school.com.cn/html/html_links.asp http://www.w3school.com.cn/tags/tag_a.asp1.<a>基础注意:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。常用属性:属性名 属性值 ...原创 2019-03-05 18:00:31 · 462 阅读 · 0 评论 -
对表单应用样式
参考《精通CSS 高级Web标准解决方案(第2版)》第7章关于label的使用参考如下链接:https://blog.csdn.net/gnail_oug/article/details/728521501. 简单的表单布局效果(这里对Name项focus)HTML<div id="content"> <form> ...原创 2019-03-05 17:55:11 · 338 阅读 · 0 评论 -
对列表应用样式和创建导航条
参考自《精通CSS 高级Web标准解决方案(第2版)》第6章基础知识总结: 伪类和伪元素选择器:https://www.cnblogs.com/ihardcoder/p/5294927.html、https://www.cnblogs.com/zcynine/p/5008985.html实战技术要点:写CSS的一些体会(个人理解,待完善)先整体后局部:先对宽泛的标签添...原创 2019-03-07 21:43:15 · 642 阅读 · 0 评论 -
对表格应用样式
参考自《精通CSS高级Web标准解决方案(第2版)》1.待补充基础1.1<table>相关基础summary属性<legend>标签<thead>、<tbody>、<tfoot>border-collapse属性border-spacing属性1.2 投影、边框圆角等属性<text-shad...原创 2019-03-19 14:08:05 · 199 阅读 · 0 评论 -
利用border实现等高布局
参考张鑫旭慕课网CSS视频border课程:https://www.imooc.com/learn/755利用border实现等高布局(边框宽度固定),效果图如下HTML:<div class="box clearfix"> <nav class="left"> <h3>导航1</h3>...原创 2019-03-04 11:40:01 · 459 阅读 · 0 评论 -
前端面试(CSS)中常问的几个布局
CSS中常用的页面布局:两栏布局、三栏布局注意:只要用到了浮动,都要考虑要让父元素包含它1. 两栏布局1.1 两栏固定布局width+leftwidth+right<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...原创 2019-03-19 20:11:21 · 1271 阅读 · 0 评论 -
CSS-FlexBox总结(API)
-----------------学习笔记---------------1.老版本与新版本本质上的一些差异(1)老版本没有“换行”、“收缩”,也就是说老版本的容器只能放一行item,且当一行放不下时,既不会换行,也不会收缩,而是选择溢出。(2)老版本由于没有“换行”,因此侧轴没有方向而言,只有哪一根是侧轴而已。2.老版本属性【容器】display:-webkit-box【容器】【主...转载 2019-06-22 11:28:34 · 302 阅读 · 0 评论