绝对定位 | 易学教程

css 块级格式化上下文（BFC）

阅读更多关于 css 块级格式化上下文（BFC）

一、块级格式化上下文（BFC） 1、什么是块级格式化上下文？ Block Formatting Contexts (BFC，块级格式化上下文)就是一个块级元素的渲染显示规则（可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素） 2、触发BFC的条件如下：根元素 float的值不为none。 overflow 除了 visible 以外的值（hidden，auto，scroll） display的值为table-cell, table-caption, inline-block中的任何一个。绝对定位元素：position (absolute、fixed) 弹性盒 flex boxes (元素的 display: flex 或 inline-flex) 3、BFC 的布局规则：内部的盒子会在垂直方向，一个个地放置； BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然属于同一个BFC的两个相邻Box的上下margin会发生重叠；计算BFC的高度时，浮动元素也参与计算每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； BFC的区域不会与float重叠； 4、BFC特性 1.同一BFC下外边距会发生折叠：代码如下： <!doctype html> <html> <head> <meta

Web前端基础(6):CSS(三)

阅读更多关于 Web前端基础(6):CSS(三)

1. 定位定位有三种：相对定位、绝对定位、固定定位 1.1 相对定位现象和使用： 1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。 2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right。特性：1.不脱标 2.形影分离 3.老家留坑所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果用途： 1.微调元素位置 2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。 1.2 绝对定位特性：1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。参考点：一、单独一个绝对定位的盒子 1.当我使用top属性描述的时候是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。二、以父辈盒子作为参考点 1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点。 3.不仅仅是父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点。注意了：父绝子绝，没有实战意义

Web前端基础(5):CSS(二)

阅读更多关于 Web前端基础(5):CSS(二)

1. 盒模型在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。 1.1 盒模型示意图 1.2 盒模型的属性 width：内容的宽度 height: 内容的高度 padding：内边距，边框到内容的距离，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域 border: 边框，就是指的盒子的宽度 margin：外边距，盒子边框到附近最近盒子的距离 1.2.1 盒模型的计算如果一个盒子设置了padding，border，width，height 盒子的真实宽度=width+2*padding+2*border 盒子的真实高度=height+2*padding+2*border 如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。 1.2.2 padding的设置 padding有四个方向，分别描述4个方向的padding。描述的方法有两种。 1.写小属性，分别设置不同方向的padding padding-top: 30px; padding-right: 30px; padding

【前端知识体系】CSS布局知识强化

阅读更多关于【前端知识体系】CSS布局知识强化

1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局（兼容性的问题） 1.1 基础布局 <style> * { margin: 0; padding: 0; } .layout { margin-top: 10px; } .layout div{ min-height: 100px; } </style> <body>  <section class="layout float"> <style> .layout.float .left { float: left; width: 300px; background-color: #48adff; } .layout.float .main { background-color: #ff4344; } </style> <article class="left-main"> <div class="left"></div> <div class="main"> <h1>浮动两栏布局</h1> <p>两栏布局的中间部分</p> <p>两栏布局的中间部分</p> </div> </article> </section>  <section class="layout absolute">

CSS常见问题小技巧解决办法收集

阅读更多关于 CSS常见问题小技巧解决办法收集

一、常见问题 1、div标签未关闭　这是书写代码是最为常见的一种错误了。特别是记事本书写习惯的设计师，在未关闭的情况下记事本的不会提示你什么，如果是在DW中，未关闭DIV，开始的DIV会显示灰色，即无效。 2、DOCTYPE声明　　不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。　　 3、结尾斜线　　结尾斜线也是造成页面失效比较常见的原因。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。　　 4、图像alt属性　　你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像，如alt="收藏生活，享受生活"。搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的。 5、未知实体数据　　实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替“&”等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。 6、不良嵌套嵌套就是元素里又包括元素，如下所示：我们容易混淆嵌套元素的顺序

html&css面试笔记

阅读更多关于 html&css面试笔记

1、CSS选择器有哪些？它们的优先级是怎样的？选择器类型： id选择器（ # myid）类选择器（.myclassname）标签选择器（div, h1, p）相邻选择器（h1 + p）子选择器（ul > li）后代选择器（li a）通配符选择器（ * ）属性选择器（a[rel = "external"]）伪类选择器（a:hover, li:nth-child）选择器优先级：就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准; 优先级为:!important > id > class > tag，同时important 比内联优先级高权重的规则：标签的权重为1，class的权重为10，id的权重为100；如果权重相同，则最后定义的样式会起作用 2、列出px、em、rem三者的区别 px：像素，绝对单位，指定是多少就是多少，计算比较容易； em：相对单位，相对于父元素的字体大小，如果当前对象没有设置字体尺寸，则相对于浏览器默认字号，em的值不固定，并且em会继承父级元素的字体大小； rem：相对单位，相对于HTML根元素的字体大小；浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。 3、写出一个两列等高，左列固定宽度为200px

css浮动

阅读更多关于 css浮动

设置标签样式给标签设置长宽只有块级标签才可以设置长宽，行内标签设置了也没有任何作用 div { width:10px; height:10px; } 字体属性 font-size 可以设置字体大小字体粗细 normal：默认标准粗细 bold：粗体 bolder：更粗 lighter：更细 100~900：设置具体粗细，400等同于normal，700等同于bold inherit：继承父元素字体的粗细值字体颜色 COLOR 后面可以跟多种颜色数据颜色的英文：red #4e4e4e 十六进制 rgb(1,1,1)模式，三基色数字 rgba（1,1,1,0.2）和rbg一样，最后一个数字用来调节颜色的透明度字体属性文字对齐 text-align属性规定元素中的文本的水平对齐方式 left：左边对齐，默认 right：右对齐 center：居中对齐 justify：两端对齐文字修饰 text-decoration 属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline：定义文本下的一条线，相当于下划线 overline：定义文本上的一条线 line-through：定义穿过文本下的一条线，相当于删除线 inherit：继承父元素的text-decoration属性的值注意：a标签默认自带下划线，如果要去掉就如以下代码 a{ text

css(2)

阅读更多关于 css(2)

目录一、css属性及用法 1.1css样式操作 1.2字体属性 1.2.1文字字体 1.2.2字体大小 1.2.3font-weight 1.2.4文本的颜色 1.3文字属性 1.3.1文字对齐 1.3.2文字装饰 1.3.3首行缩进 1.4背景属性 1.5边框 1.5.1边框的属性 1.5.2border-radius 1.6display属性 1.7css盒子模型 1.8float（浮动） 1.8.1浮动带来的影响 1.8.2清除浮动带来的影响 1.9overflow溢出属性 1.9.1 圆形头像示例 1.10定位（position） 1.10.1static 1.10.2relative（相对定位，了解） 1.10.3absolute（绝对定位，重要） 1.10.4固定定位（fixed） 1.10.5z-index 1.10.6opacity 一、css属性及用法 1.1css样式操作块级标签的长度和宽度都是可以设置的，但是行级标签不可以直接设置长度和宽度。如： <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width:200px; height:300px; background-color: fuchsia; } span{ width:100px; height:150px;

11.14 CSS样式

阅读更多关于 11.14 CSS样式

1.设置标签样式给标签设置长宽：只有块级标签可以设置长宽，行内标签设置了没作用（仅仅只取决于内部文本值） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; height:200px; background-color: aqua; } span{ width: 60px; height:80px; background-color: orange; } </style> </head> <body> <div>div</div> <span>span</span> </body> </html> 2.字体颜色 color后面可以跟多种颜色数据颜色英文 pink #06a0de 直接用pycharm提供的取色器即可 rgb(1,1,2) 可以利用截图软件获取三基色数字 rgba(0,128,128,0.9) 最后一个数字只能用来调节颜色的透明度 <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-family: "Microsoft New Tai Lue","新宋体","Arial",sans-serif;

day44 css

阅读更多关于 day44 css

css样式操作给标签设置长宽只有块级标签才可以设置长宽，行内标签设置了没有任何作用（仅仅只取决于内部文本值） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 400px; } span { width: 50px; height: 50px; } </style> </head> <body> <div> div </div> <span>span</span> </body> </html> 字体属性 font-family: 字体类型 font-size: 字体大小 font-weight: 字体粗细值|描述 :-:|:-: normal|默认值，标准粗细 bold|粗体 bolder|更粗 lighter|更细（***************） 100~900|设置具体粗细，400等同于normal，而700等同于bold inherit|继承父元素字体的粗细值 color: 字体颜色颜色英文 red 06a0de 直接用python提供的取色器即可 rgb(1,1,1) 可以利用截图软件获取三基色数字 rgba(128,128,128,0.6) 最后一个数字

订阅绝对定位