css
文章平均质量分 75
hello_dashen
这个作者很懒,什么都没留下…
展开
-
CSS3 - calc()
calc()特点:CSS3 的 calc() 函数允许在属性值中执行数学计算操作1、混合使用各种单位进行计算,百分比、px、em、rem等单位2、使用" + " 、" - " 、" * " 和 " / " 四则运算3、表达式中有" + "和 " - "时,其前后必须要有空格,如"width: calc(12%+5em)"这种没有空格的写法是错误的;4、表达式中有 " * " 和 " / "时,其前后可以没有空格,但建议留有空格。5、使用 calc(),计算值是表达式它自己,而非表达式的结果,浏原创 2021-08-04 16:20:37 · 111 阅读 · 0 评论 -
块级格式化上下文 BFC
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,外边距合并等等BFC 有着具体的布局特性:有宽度和高度 , 有 外边距margin 有内边距padding 有边框 border不是所有的元素模式都能产生BFC,w3c 规范: display 属性为 block, list-item, table的元素,会产生BFC.注意其他的display属性,比如 inline 等等,创建的是 IFC 。什么情况下可以让元素产生BFCbody根元素f原创 2021-08-04 16:26:58 · 61 阅读 · 0 评论 -
CSS - 浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。原创 2019-06-07 11:10:07 · 133 阅读 · 0 评论 -
CSS - 清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动就是把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素。清除浮动方式具体实现优点缺点clearclear: left | right | both额外标签法浮动元素末尾添加空标签或换行等<div style=”clear: both;”></div>书写方便添加了无意义标签,结构性差父overflow实质触发BFC,overflow: hi原创 2019-06-07 11:14:01 · 130 阅读 · 0 评论 -
CSS - 元素的定位属性 - 静态、相对、绝对、固定、粘性
元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1、边偏移边偏移属性描述top顶端偏移量,定义元素相对于其父元素上边线的距离bottom底部偏移量,定义元素相对于其父元素下边线的距离left左侧偏移量,定义元素相对于其父元素左边线的距离right右侧偏移量,定义元素相对于其父元素右边线的距离也就说,以后定位要和这边偏移搭配使用了, 比如 top: 100px; left: 30px; 等2、定位模式(定位的分类)静态定位(stati原创 2019-06-07 11:15:32 · 4178 阅读 · 0 评论 -
CSS - 子绝父相
子绝父相子级是绝对定位的话, 父级要用相对定位。其实,子级是绝对定位,父亲只要是定位即可(不管父亲是绝对定位还是相对定位,甚至是固定定位都可以),就是说, 子绝父绝,子绝父相都是正确的。为什么要是“子绝父相”呢? 因为子级是绝对定位,不会占有位置, 可以放到父盒子里面的任何一个地方。 父盒子布局时,需要占有位置,因此父亲只能是 相对定位....原创 2019-06-07 11:16:24 · 3306 阅读 · 0 评论 -
CSS - 叠放次序(z-index)
叠放次序(z-index)当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。在CSS中,要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0。比如: z-index: 2;注意:z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。如果取值相同,则根据书写顺序,后来居上。后面数字一定不能加单位。只有相...原创 2019-06-07 11:18:12 · 3434 阅读 · 0 评论 -
CSS - 元素的显示与隐藏
元素的显示与隐藏让一个元素在页面中消失,但是不在文档源码中删除属性值特点displaynone隐藏之后,不再保留位置visibilityhidden隐藏之后,继续保留原有位置overflowhidden不显示超过对象尺寸的内容,超出的部分隐藏掉...原创 2019-06-07 11:20:15 · 268 阅读 · 0 评论 -
CSS - 文字盒子居中图片和背景区别、清除元素的默认内外边距
文字盒子居中图片和背景区别文字水平居中是 text-align: center盒子水平居中 左右margin 改为 autotext-align: center; /* 文字居中水平 */margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */插入图片 我们用的最多 比如产品展示类背景图片我们一般用于小图标背景 或者 ...原创 2019-06-06 12:23:05 · 2409 阅读 · 0 评论 -
CSS - 外边距(margin)、 外边距实现盒子居中
外边距(margin)margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。margin-top:上外边距margin-right:右外边距margin-bottom:下外边距margin-left:上外边距margin:上外边距 右外边距 下外边距 左外边取值顺序跟内边距相同。外边距实现盒子居中可以让一个盒子实现水平居中,需...原创 2019-06-06 12:22:15 · 1744 阅读 · 0 评论 -
CSS - 内边距(padding)
内边距(padding)padding属性用于设置内边距。 是指 边框与内容之间的距离。padding-top:上内边距padding-right:右内边距padding-bottom:下内边距padding-left:左内边距注意: 后面跟几个数值表示的意思是不一样的。值的个数表达意思1个值padding:上下左右边距 比如padding: 3px; 表示...原创 2019-06-06 12:21:25 · 1988 阅读 · 0 评论 -
CSS三种样式表(内部样式表、行内样式表、 外部样式表)
引入CSS样式表(书写位置)CSS可以写到那个位置? 是不是一定写到html文件里面呢?内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:<head><style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style...原创 2019-06-06 11:05:21 · 34630 阅读 · 4 评论 -
CSS基础选择器(标签选择器、类选择器、多类名选择器、 id选择器、通配符选择器、属性选择器)
CSS基础选择器标签选择器(元素选择器)标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。类选择器类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:.类名原创 2019-06-06 11:08:05 · 7540 阅读 · 0 评论 -
CSS字体样式属性(font-size、font-family、Unicode、font-weight、font-style、font)
CSS字体样式属性font-size:字号大小font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下C...转载 2019-06-06 11:10:26 · 10086 阅读 · 0 评论 -
CSS复合选择器( 交集、 并集、后代、子元素、兄弟、伪类、伪元素)
CSS复合选择器总结复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。:first-child与:first-of-type区别:first-child 匹配的是其父元素的第一个子元素,可以说是结构上的第一个子元素。:first-of-type 匹配的是在其父元素的所有子元素中 该类型元素的第一个元素<p>结构上的第一个p元素</p> <!-- p:first-child --> &转载 2019-06-06 11:14:24 · 13189 阅读 · 0 评论 -
CSS-块级元素、行内元素、行内块元素
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。具体如下:块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。行内元素(inline-level)行内元素(内联元素)不原创 2019-06-06 11:16:43 · 139 阅读 · 0 评论 -
CSS 三大特性(层叠性、继承性、优先级)
CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加样式冲突,遵循的原则是就近原则。 哪个样式离着结构近,就执行哪个样式, 按照CSS书写的顺序,以最后的样式为准样式不冲突,不会层叠CSS继承性所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可 ---- 子承父业注意:恰当地使用继承可以简化代码,降低CSS样式的复杂性子元原创 2019-06-06 11:19:18 · 1499 阅读 · 0 评论 -
CSS 背景(background)+背景透明(CSS3)
CSS 背景(background)CSS 可以添加背景颜色和背景图片,以及来进行图片设置。background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写(复合属性)...原创 2019-06-06 11:21:56 · 26922 阅读 · 0 评论 -
盒子模型(Box Model)
盒子模型(Box Model)盒子模型(Box Modal): 把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形包括:margin border padding content 四个属性设置的width包含盒子总宽度指定盒模型类型标准盒模型(W3C盒模型)content宽度width + padding + border + marginbox-sizing: content-box;怪异盒模型(IE盒模型)content + p原创 2019-06-06 12:17:48 · 775 阅读 · 0 评论 -
CSS - 盒子边框(border)、圆角边框(CSS3)
盒子边框(border)边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。语法:border : border-width || border-style || border-color 边框属性—设置边框样式(border-style)边框样式用于定义页面中边框的风格,常用属性值如下:none:没有边框即忽略所有边框的宽度(默认值)solid:边框为单实线(最为常用的)d...原创 2019-06-06 12:19:10 · 2937 阅读 · 0 评论 -
CSS总结(内容略长)
CSS样式表内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:<head><style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。type=“text/CSS” 在html5原创 2019-05-31 15:47:13 · 1778 阅读 · 0 评论