首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

web前端页面布局学习

p=2 默认未设置定位 元素 宽度最大填充元素,高度正好容纳子元素。...如果子元素左浮动,宽度仍在容纳子元素的基础上最大填充元素,高度正好容纳子元素 如果子元素右浮动,宽度正好容纳子元素,高度正好容纳子元素 这是因为子元素默认就是独占一行,向左对齐的。...可以通过对元素overflow:hidden,来实现自身的最大填充 Div块状与浮动 div块状属性是有独占一行的特性,默认是纵向排列,一旦设置float:left,则会以行来横向浮动排列。...属性,div的display属性block(块元素),而span元素的display属性inline(行内元素) 行内元素(inline): 1.没有宽高属性,不会独占一行 span,设置宽高均无用...隐藏元素 display:none;隐藏元素,不保留物理空间 visibility:hidden;隐藏元素,保留物理空间 定位 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个元素进行定位

99030

【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

控制 元素的 显示 与 隐藏 的样式有如下三种 : display visibility overflow 二、display 隐藏对象 ---- 1、display 隐藏对象语法说明 标签元素设置...display: none 可以 隐藏该元素 ; 如果想要 显示该对象 , 该元素设置 display: block 即可 ; 2、display 显示元素代码示例 设置 display: block...; 三、visibility 隐藏对象 ---- 1、visibility 隐藏对象语法说明 visibility 的属性值 默认为 inherit , 继承自元素 , 一般默认都是可见的 ; 一般情况下元素设置不可见...隐藏对象语法说明 overflow 只能对超出部分隐藏代码 ; overflow 可设置的值 : visible : 子元素超出容器的部分仍然显示 ; hidden : 子元素超出容器的部分隐藏 ;...scroll : 不管子元素是否超出容器 , 都显示滚动条 ; auto : 如果子元素超出容器显示滚动条 , 如果子元素没有超出容器不显示滚动条 ; 效果参考 【CSS】清除浮动 ② ( 清除浮动

5.2K30

jQuery

假设Person,子类Student,有下面的两行定义: Student sTest = new Student(); Person pTest = sTest; 其中,pTest就是类的对象引用...那么, (1).如果子类的 成员变量与类的 成员变量 的类型及名称都相同,则用sTest访问时,访问到的是子类的成员变量;用pTest访问时,访问到的是类的成员变量; (2).如果子类的静态成员变量与类的静态成员变量的类型及名称都相同...,则用sTest访问时,访问到的是子类的静态成员变量;用pTest访问时,访问到的是类的静态成员变量; (3).如果子类的静态成员方法重写了类的静态成员方法,则用sTest调用时,调用的是子类的静态成员方法...;用pTest调用时,调用的是类的静态成员方法; (4).如果子类的成员方法重写了类的成员方法,则用sTest调用时,调用到的是子类的成员方法;用pTest调用时,调用的也是子类的成员方法; (5)....用sTest调用未覆盖的类成员方法时,该方法中如果使用到了被隐藏的变量或方法时,规则同上; jQuery background-color 和 backgroundColor 入口函数 $(document

1.1K20

css(2)

使块级元素变成行内元素 inline-block 使元素同时具有行内元素和块级元素的特点 display的none和visibility的hidden的区别:两者都可以隐藏元素,但是display将元素隐藏之后...,第二个控制左右,第三个控制下,如果四个全写控制顺序上、右、下、左(顺时针)。...浮动常用的三种方式:l left 向左浮动 right 向有浮动 none 默认值,不浮动 1.8.1浮动带来的影响 会使浮动框的标签塌陷,就是当边框是标签的时,如果子标签设置浮动,外边框就会塌陷成一条线...重点:如果级设置了position属性,例如position:relative;,那么子元素就会以级的左上角原始点进行定位。...这样能很好的解决自适应网站的标签偏离问题,即自适应的,那我子元素就设置position:absolute;元素设置position:relative;,然后Top、Right、Bottom、Left

1.4K20

css-height

元素高度百分比需要向上遍历标签要找到一个定值高度才能起作用,如果中途有个heightauto或是没有设置height属性,高度百分比不起作用,此时的情况是元素高度依赖子元素堆砌撑高,而子元素依赖元素的定高起作用...注意: body100*100,div170*70,继承的是级元素内容高度,不包括border和padding!...一旦html标签含有背景色,body的背景色变成了正常的body标签(一个实实在在,普普通通标签)的背景色,而此时的html标签最顶级,背景色被浏览器获取,成为浏览器的背景色 div块级元素,默认占据一行... div2的高度100px,受到div1的高度影响;如果去掉div1的height: 100%;,受到其子元素影响,高度500px...').scrollHeight350px; 如果子元素高度大于元素设置高度,实际高度则会被撑开!

1.1K21

【CSS】清除浮动 ② ( 清除浮动 - 级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 )

君不见高堂明镜悲白发,朝青丝暮成雪。 人生得意须尽欢,莫使金樽对月。 天生我材必有用,千金散尽还复来。 烹羊宰牛且为乐,会须一饮三百杯。 岑夫子,丹丘生,将进酒,杯莫停。... 展示效果 : 2、overflow: hidden 溢出隐藏效果 设置 overflow: hidden; 属性 , 会将溢出的内容隐藏 ; 代码示例...君不见高堂明镜悲白发,朝青丝暮成雪。 人生得意须尽欢,莫使金樽对月。 天生我材必有用,千金散尽还复来。 烹羊宰牛且为乐,会须一饮三百杯。 岑夫子,丹丘生,将进酒,杯莫停。...君不见高堂明镜悲白发,朝青丝暮成雪。 人生得意须尽欢,莫使金樽对月。 天生我材必有用,千金散尽还复来。 烹羊宰牛且为乐,会须一饮三百杯。 岑夫子,丹丘生,将进酒,杯莫停。...君不见高堂明镜悲白发,朝青丝暮成雪。 人生得意须尽欢,莫使金樽对月。 天生我材必有用,千金散尽还复来。 烹羊宰牛且为乐,会须一饮三百杯。 岑夫子,丹丘生,将进酒,杯莫停。

1.8K30

VUE作用域插槽详解(<slot>、v-slot、slot-scope)「建议收藏」

插槽就是子组件中的提供给组件使用的一个占位符,用 表示,组件可以在这个占位符中填充任何模板代码, HTML、组件等,填充的内容会替换子组件的标签。...插槽显不显示、怎样显示是由组件来控制的,而插槽在哪里显示就由子组件来进行控制 如下代码: 在子组件中放一个占位符 在组件中给这个占位符填充内容: 展示的效果: 现在来看看,如果子组件中没有放插槽...如果子组件没有默认插槽,而级的填充内容指定到默认插槽中,那么该内容就不会填充到子组件的任何一个插槽中。 3....如果子组件有多个默认插槽,而组件所有指定到默认插槽的填充内容,将会且全都填充到子组件的每个默认插槽中。...4.常用场景(以下为常用的情况之一) 如果子组件中的某一部分的数据,每个组件都会有自己的一套对该数据的不同的呈现方式,这时就需要用到作用域插槽。

8.7K20

第213天:12个HTML和CSS必须知道的重点难点问题

3.3 清除浮动的方法 方法1:给div定义 高度 原理:给DIV定义固定高度(height),能解决DIV 无法获取高度得问题。...(不推荐使用) 方法二:使用元素, (.clear{clear:both}) 原理:添加一对DIV标签,利用css的clear:both属性清除浮动...优点:浏览器支持好 缺点:多出了很多DIV标签,如果页面中浮动模块多的话,就会出现很多的空置DIV了,这样感觉视乎不是太令人满意。...当前对行内文本的字体尺寸未被人为设置, 相对于浏览器的默认字体尺寸。它会继承级元素的字体大小,因此并不是一个固定的值。...无法触发其点击事件 适用于那些元素隐藏后不希望页面布局会发生变化的场景 opacity:0 将元素的透明度设置0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。

2.2K20

5分钟快速回顾HTML CSS

0 auto; 2.内联元素(行内)[不支持width, height, margin上下,padding上下] 常用内联元素 span(无语义) 超链接标签 a src可以为,...但一定要写 其它常见问题 子级内联元素之间有间隙,可以把级元素font-size设置0,子级单独设置font-size 内联元素居中:由于内联元素自身不支持width,使用在级元素设置text-alian...子元素已经脱离了文档流 定位的四种方式同相对定位 如果子元素找不到元素,则会一直向上找,直到找到最外层标签页面 3.固定定位(相对于浏览器定位) 元素css设置 position: fix...: 一组子元素,同时左浮动;同时右浮动;最后一个右浮动,其它左浮动 (三)引入方式 1.内联式(新手模式) ...(六)display选项 内联元素: display: inline; 内联块元素 display: inline-block; 块元素 display: block; 隐藏元素

1.3K90

深入理解和应用Float属性

水平方向上的外边距、边框、内边距所占空间都放在一起(displayinline、inline-block;元素本身具有inline特性的元素都具体以下特征)。...) Display值table-cell、table-caption、inline-block、flex、inline-flex等   d) Position值absloute、fixed   e)...> footer 3.1.3 最后一个子元素clear:both 利用clear:both触发容器重新计算高度的原理实现,示例代码如下: .wrap...但是存在以下局限性,要适环境而用:     a) Overflow方式:滚动条会被隐藏,如果子内容超高存在显示不全的问题;     b) Float方式:让容器浮动,那么就存在对容器同辈元素的影响...;     c) Dipslay方式:让容器变为table或者flex等,都存在不明确的影响,大家都不推荐使用。

1.1K100

Web APIs第三天

查找节点 1.查找节点: parentNode 属性, 返回最近一级的节点 找不到返回null 你好 <...删除节点 若一个节点在页面中已不需要时,可以删除它 在 JavaScript 原生DOM操作中,要删除元素必须通过元素删除 如不存在父子关系删除不成功 删除节点和隐藏节点(display:none)...重绘和回流(重排) 会导致回流的操作: 页面的首次刷新 浏览器的窗口大小发生改变 元素的大小或位置发生改变 改变字体的大小 内容的变化(:input框的输入,图片的大小) 激活css伪类(::hover...发布内容不能为 // 点击button后判断 内容 提示不能输入 并直接return 不能为 // 使用字符串.trim()去掉首尾空格 // 并将表单value值设置空字符串 同时字数设置...重置表单域内容 text.value = '' useCount.innerHTML = 0 }) ---- 本节单词: parentNode children nextElementSibling

56650

CSS&HTML面经专题——(三)CSS定位盒模型经典布局浮动布局与BFC

b、元素定位参考的是离自身最近的定位祖先元素,要满足两个条件,第一个是自己的祖先元素,可以是元素也可以是元素的元素,一直找,如果没有选择body对照对象。...它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时表现fixed。该属性的表现是现实中你见到的吸附效果。...相对于元素的(content + padding)值, 注意不含border 延伸:如果子元素不是绝对定位,那宽高设为百分比是相对于元素的宽高,标准盒模型下是content, IE盒模型是content... //将元素的overflow设置hidden 复制代码 after伪类 : 推荐,是标签的加强版,目前各大公司的做法。

1.9K30

【CSS】464- 5种 CSS 浮动和清除浮动的方法

缺点:必须定义width或zoom:1,不能和position配合使用,因为超出的尺寸的会被隐藏。 建议:只推荐没有使用position或对overflow:hidden理解的朋友使用。...2、结尾处加div标签clear:both ? 原理:添加一个div,利用css提高的clear:both清除浮动,让div能自动获取到高度。...缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多div,让人感觉很不爽。 建议:此方法是以前主要使用的一种清除浮动方法。 3、div定义height ?...原理:div手动定义height,就解决了div无法自动获取到高度的问题。 优点:简单,代码少,容易掌握。...优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,:腾迅,网易,新浪等等)。 缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。

1.4K20
领券