![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
前端小菜羊
这个作者很懒,什么都没留下…
展开
-
层叠上下文(stacking context)
一、什么是层叠式上下文层叠上下文,是HTML中的一个三维概念如果元素具备以下任何一个条件,则该元素会创建一个新的层叠上下文。根元素 z-index不为auto的定位元素二、什么是层叠级别同一个层叠上下文的背景色以及内部元素,谁在上谁在下,这些都是由层叠级别来决定的。层叠级别是针对同一个层叠上下文而言的。在同一个曾得上下文中,层叠级别从低到高排列如下:边框和背景:也就是当前层叠上下文的边框和背景 负z-index:z-index为负值的“内部元素” 块元素:普通文档流下的块盒子原创 2020-12-17 16:19:10 · 1374 阅读 · 0 评论 -
css属性简写
一、盒模型简写属性 说明 border 边框 padding 内边距 margin 外边距 1、边框完整形式:border-width:1px;border-style:solid;border-color:red;简写形式:border: 1px solid red;当我们只想定义三条边的样式时:border:1px solid red;border-bottom:0;或者 border-bottom:none;2、内边距原创 2020-12-15 14:46:59 · 436 阅读 · 0 评论 -
深入定位布局
定位布局的注意点:默认情况下,固定定位元素和绝对定位元素的位置是相对于浏览器而言的的,相对定位元素是相对于原始位置而言的, position一般配合tip、bottom、left和right元素来使用。元素只有在定义position属性之后,top、bottom、left、right才生效 这四个属性不会全都用到,一般只会用到其中的两个 position:absolute会将元素转换成block元素一、子元素相对于父元素定位语法:2父元素{position:relative}子元素原创 2020-12-11 15:13:36 · 216 阅读 · 0 评论 -
清除浮动的方法
一、clear:bothclear属性运用于浮动元素后面的元素clear元素取值:left、right、both通常会使用clear:both<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>原创 2020-12-10 16:46:24 · 86 阅读 · 0 评论 -
浮动带来的影响
一、浮动对自身的影响一旦元素设置了浮动,不管这个元素是什么类型,都会转化为块元素,也就是此时display属性的取值为block。举例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2020-12-10 15:31:49 · 1819 阅读 · 0 评论 -
盒子模型之负margin技术
负margin对普通文档流元素的影响,可以分为两种情况:当元素的margin-top或者margin-left为负数时,“当前元素”会被拉向指定方向。当元素的margin-bottom或者margin-right为负数时,“后续元素”或被拉向指定发向。举例:margin-top或margin-bottom为负数<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2020-12-03 16:22:07 · 438 阅读 · 0 评论 -
盒子模型之外边距叠加
在开发过程中,可能会遇到这样的一种情况,有相邻的两个块元素A和B,其中A定义了一个margin-bottom,B定义了一个margin-top。当我们在浏览器中查看时,明显发向A和B的垂直距离明显小于相加之和。这个现象是由外边距叠加所引起的。外边距叠加有三种情况:1、同级元素叠加当一个元素出现在另一个元素上面的时候,第一个元素的下边距就会和第二个元素的上边距发生合并。2、父子元素叠加当一个元素包含在另外一个元素中时,加入没有padding和border把外边距分隔开,父元素和子元素的相邻上下外边距原创 2020-12-01 14:07:08 · 298 阅读 · 0 评论 -
:first-letter和:first-line
一、:first-letter选择器在css中,我们可以使用该选择器,选中元素内容中的第一个字或者字母。语法:元素:first-letter{}举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-11-30 15:24:35 · 1584 阅读 · 0 评论 -
层次选择器(父子、后代、兄弟、相邻)
选择器说明M N后代选择器,选择M元素内部后代的N元素(所有N元素)M>N子代选择器,选择M元素内部子代的N元素(所有第1级N元素)M~N兄弟选择器,选择M元素后所有的统计N元素M+N相邻选择器,选择M元素相邻的下一个N元素(M、N是同级元素)一、后代选择器语法:M N{}说明:在后代选择器中,M元素与N元素用空格隔开,表示选中M元素内部后代的N元素。举例:<!DOCTYPE html><html lang="en">...原创 2020-11-30 15:09:42 · 7462 阅读 · 3 评论 -
CSS优先级(5种样式覆盖发生的冲突)
我们在使用CSS时,会出现样式覆盖的问题每当样式的覆盖发生冲突时,一优先级高的为准。对于样式覆盖发生的冲突,常见的共有以下5种情况。引用方式冲突继承方式冲突指定样式冲突继承样式和指定样式冲突!important1、引用方式冲突css有三种常用的引用方式,分别是外部样式、内部样式和行内样式。这3种引入方式的优先级如下:行内样式>(内部样式=外部样式)<!DOCTYPE html><html lang="en"><head> <原创 2020-11-27 15:47:14 · 3338 阅读 · 0 评论 -
CSS两大特性
1、继承性CSS的继承性,指的是子元素继承父元素的某些样式属性。需要我们注意的是并不是所有的属性都具有继承性,只有能给我们带来书写便利的属性才可以继承。在CSS中,具有继承性的由3类。文本相关属性:font-size(字体大小)、font-family(字体系列)、font-style(字体样式)、font-weight(字体粗细)、font、line-height(行高)、text-align(水平对齐方式)、text-indent(首行缩进)、word-spacing(字间距)。列表相关属性原创 2020-11-27 14:24:37 · 1180 阅读 · 0 评论 -
CSS单位 相对单位px % em rem 详谈
在CSS中除了最基础的px单位以外,还会有许多其他常用的单位1、绝对单位绝对单位的显示效果不会受到外界因素的影响。绝对单位主要运用于传统平面印刷中,很少用于前端的开发绝对单位说明cm厘米mm毫米in英寸pt磅pcpica,1pc=12pt2、相对单位在CSS中,相对单位不是固定不变的,其一般是相对其他长度而言,常用的相对单位如下表:相对单位说明px像素%百分比em1em=“当前元素”字体大小re原创 2020-11-26 17:00:44 · 298 阅读 · 0 评论