首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端知识点总结(html+css)(上)

(如div下可包含div) 行内元素(常见的行内元素a,span.img) 一行显示多个 宽度为内容的宽度 不可以设置高度宽度 标签内一般不包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块级元素行内元素的特征...3. css3新增伪类 p:first-of-type 选择属于父元素的首个p元素 p:last-of-type 选择属于父元素的最后一个p元素 p:only-of-type 选择属于父元素的唯一...高度塌陷 原因 很多情况父盒子不方便给高度,子盒子浮动脱离文档流不占位置,使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签,设clear:both 父级添加overflow:hidden 使用...父元素display:table;width:100% 所有元素:display:table-cell calc布局:全部float:left .main:calc(100% - 两宽度) 使用...如何使英文单词发生词内断行 word-wrap:break-word。 13. div水平垂直居中的几种方式。

28610

年薪30万的前端面试题,你能答对几道?|附答案

搜索引擎的爬虫依赖于标记来确定上下文各个关键字的权重,利于 SEO。 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。 5.HTML5 为什么只需要写 !DOCTYPE HTML?...的:after伪元素; 使用邻接元素处理; 4.CSS居中(包括水平居中和垂直居中) 内联元素居中方案 水平居中设置: 1.行内元素 设置 text-align:center; 2.Flex布局 设置...c:父元素设置 position:relative left:50%,子元素设置 position:relative left:50%; 垂直居中设置: 使用position:absolute...margin-left、margin-top的属性; 利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了; 利用display:table-cell属性使内容垂直居中...id选择器( # myid) 类选择器(.myclassname) 标签选择器(div, h1, p) 相邻选择器(h1 + p) 子选择器(ul > li) 后代选择器(li a) 通配符选择器( *

5.6K60
您找到你想要的搜索结果了吗?
是的
没有找到

前端面试之HTML && CSS

选择器 id选择器(#myid) 类选择器(.myclass) 属性选择器(a[rel=“external”]) 伪类选择器(a:hover, li:nth-child) 标签选择器(div, h1,...Fixed 定 位使元素的位置与文档流无关,因此不占据空间。 Fixed 定位的元素其他元素重叠。 相对定位 relative: 如果对一个元素进行相对定位,它将出现在它所在的位置上。...(1)table标签配合margin左右auto实现水平居中。...使用table标签(或直接将块级元素设值为 display:table),再通过给该标签添加左右margin为auto。 (2)inline-block实现水平居中方法。...(4)flex布局使用justify-content:center 垂直居中 利用 line-height 实现居中,这种方法适合纯文字类 通过设置父容器 相对定位 ,子级设置 绝对定位,标签通过

4.4K10

让div水平垂直居中的几种方法

前言导读 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。使用 CSS 实现水平居中很容易,但要实现垂直居中并不容易。而且有些方法在一些浏览器中无效。...缺点: Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签(其实没那么糟糕,另一个专题)....不需要嵌套标签 缺点: 没有足够空间时,content 会消失(类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况) 追加元素 这种方法,在 content 元素外插入一个 div...position:absolute,有固定宽度高度的 div。...但是因为它有固定高度,其实并不能上下都间距为 0,因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

2.1K20

web前端开发初学者十问集锦(2)

行框高度等于本行内所有元素中行内框最大的值。当有多行内容时,每行都会有自己的行框。 块框:块级元素形成的框称为块框,又叫块级框。如div、h1 或 p 元素常常被称为块级元素。...替换元素: 替换元素就是浏览器根据元素标签属性,来决定元素的具体显示内容。...例如浏览器会根据标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据标签的type属性来决定是显示输入框,还是单选按钮等...可替换元素也在其显示中生成了框。注意,几乎所有的可替换元素都是行内元素。 非替换元素: (X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。...-->标签进行注释,例如: 8.margin:0 auto;无法使div水平居中使元素进行居中的时候,我们要清楚需要居中元素的类型,对症下药。

1.4K10

强烈推荐一个Python库!制作Web Gui也太简单了!

主要功能: • 预加载了随时可用的 GUI 元素,如按钮、标签、复选框、滑块、开关等 • 表情符号图标、SVG base64 支持 • 提供简单的数据绑定 • 用于刷新数据的内置定时器 • 能够渲染...效果展示: 2、选择元素 NiceGui 有不同的选择元素,如切换框、单选框复选框。 • toggle():此函数可以生成一个切换框,我们在其中通过包含值到标签的映射的字典值列表传递选项。...效果展示: 在这里,我们看到了我们创建的所有选择元素。单击 Dropdown Select,出现下拉操作,允许我们选择其中一个选项。这些只是我们研究过的部分元素。...包括每列的名称、标签字段值(通常所有列都相同)。可以根据需要提供额外的键值对。 例如,“required:True”键值对确保名称列需要添加到表中的任何新元素的值。...其提供了必要的工具来开发一个完整的网站,所有的前端部分都完全在 Python 中。我们甚至看到了 NiceGUI 的不同元素以及如何接受用户输入

2.3K11

探索CSS:从入门到精通Web开发(二)

我们将介绍如何利用CSS媒体查询弹性布局来创建适应不同屏幕尺寸的网页。 CSS动画过渡效果: 通过CSS的动画过渡效果,可以让网页元素变得更加生动吸引人。...选中的这个标签所有的这个标签都生效 字体 属性名 font-family 常见取值:具体字体1/2*/3、 css具有层叠性 一个属性冒号后面跟书写多个值叫做复合属性 font: style...:center 居中 text-align :left 左对齐 要想给图片居中 给图所在的标签的父标签加上text-align :center注意不是img标签 文本修饰 属性名:text-decoration...: 在想居中标签里加margin :0 auto 选择标签进阶 后代选择器:空格,儿子孙子都会选中 选择选择器 {…} 儿子选择器:>,只儿子选中 选择器>选择器 {…} 并集选择器:...float 使盒子在同一行 浮动元素会脱离标准流,在标准流中的不占原来位置 浮动元素比标准流高半个级别,可以覆盖标准流中的原素 清除浮动·: 清除浮动带来的影响、 父子级标签,子集浮动,父级没有高度

16210

探索CSS:从入门到精通Web开发(二)

我们将介绍如何利用CSS媒体查询弹性布局来创建适应不同屏幕尺寸的网页。 CSS动画过渡效果: 通过CSS的动画过渡效果,可以让网页元素变得更加生动吸引人。...选中的这个标签所有的这个标签都生效 字体 属性名 font-family 常见取值:具体字体1/2*/3、 css具有层叠性 一个属性冒号后面跟书写多个值叫做复合属性 font: style...:center 居中 text-align :left 左对齐 要想给图片居中 给图所在的标签的父标签加上text-align :center注意不是img标签 文本修饰 属性名:text-decoration...: 在想居中标签里加margin :0 auto 选择标签进阶 后代选择器:空格,儿子孙子都会选中 选择选择器 {…} 儿子选择器:>,只儿子选中 选择器>选择器 {…} 并集选择器:...float 使盒子在同一行 浮动元素会脱离标准流,在标准流中的不占原来位置 浮动元素比标准流高半个级别,可以覆盖标准流中的原素 清除浮动·: 清除浮动带来的影响、 父子级标签,子集浮动,父级没有高度

14610

探索CSS:从入门到精通Web开发(二)

我们将介绍如何利用CSS媒体查询弹性布局来创建适应不同屏幕尺寸的网页。 CSS动画过渡效果: 通过CSS的动画过渡效果,可以让网页元素变得更加生动吸引人。...选中的这个标签所有的这个标签都生效 字体 属性名 font-family 常见取值:具体字体1/2*/3、 css具有层叠性 一个属性冒号后面跟书写多个值叫做复合属性 font: style...:center 居中 text-align :left 左对齐 要想给图片居中 给图所在的标签的父标签加上text-align :center注意不是img标签 文本修饰 属性名:text-decoration...: 在想居中标签里加margin :0 auto 选择标签进阶 后代选择器:空格,儿子孙子都会选中 选择选择器 {…} 儿子选择器:>,只儿子选中 选择器>选择器 {…} 并集选择器:...float 使盒子在同一行 浮动元素会脱离标准流,在标准流中的不占原来位置 浮动元素比标准流高半个级别,可以覆盖标准流中的原素 清除浮动·: 清除浮动带来的影响、 父子级标签,子集浮动,父级没有高度

14010

献给前端的小伙伴,祝大家面试顺利!

搜索引擎的爬虫依赖于标记来确定上下文各个关键字的权重,利于 SEO。 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。 3.常见的浏览器内核有哪些?...标签选择符 类选择符 id选择符 继承不如指定 Id>class>标签选择 后者优先级高 6.CSS清除浮动的几种方法(至少两种) 使用带clear属性的空元素 使用CSS的overflow属性;...使用CSS的:after伪元素; 使用邻接元素处理; 7.CSS居中(包括水平居中和垂直居中) 内联元素居中方案 水平居中设置: 1.行内元素 设置 text-align:center; 2.Flex...:inine 方法; c:父元素设置 position:relative left:50%,子元素设置 position:relative left:50%; 垂直居中设置: 使用position...margin-left、margin-top的属性; 利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了; 利用display:table-cell属性使内容垂直居中

1.2K50

一个简单完整的网页密码_简单的个人网页

margin: 0 auto使nav-con居中。。。。。。。。...a链接是行内元素,设置宽高的时候要转成行内块 display: inline-block; font:字体加粗,字体大小 /行高字体高度相同的时候字体会居中显示 三、banner 效果: 四...六、底部 效果 注意:这里在news的部分用到一个类来清除浮动,这样保证news部分底部不发生重叠clearfix 首先dtdd是放于dl标签内,标签dt与dd处于dl下相同级...分析:有上下两部分,一个是dl dt dd设置列表的标题虚线下的居中文字 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

74440

java学习与应用(4.1)--HTML、CSS

width表示:数值(px),百分号(占比,相对父元素)。center标签居中。 特殊字符,对应的字符编码表。手册-->符号。...选择器:基础选择器:id选择器(#id属性值{},优先级高于元素选择器),元素选择器(标签名{}),类选择器(.名称{},使用标签的class属性调用,高于元素选择器,低于id选择器)。...拓展选择器:*表示选择所有元素,并集选择器(选择器1,选择器2{}),子选择器(选择器1 选择器2{}选择元素1下的元素2),父选择器(父标签 > 子标签{},作用于父标签) 属性选择器(元素名[属性名...=属性]{},选中有该属性的标签),伪类选择器,选择一些元素具有的状态,格式如:XXX(如a等标签):输入关键字(如link初始化状态,visited访问过,hover悬浮,active正在访问等属性)...margin外边距(复合属性,auto居中)(相对于当前的对象),padding内边距(相对于当前的对象)。

2K20

css笔记

选择标签用的 这就用到基础选择器组: CSS基础选择标签选择器(元素选择器) 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。...id选择选择器最大的不同在于 使用次数上 通配符选择器 通配符 选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有元素。...当标签发生嵌套时,内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说,它能选择任何包含在内 的标签。 子元素选择器 子元素选择器只能选择作为某元素元素元素。...标签的类型(显示模式) HTML标签一般分为块标签行内标签两种类型,它们也称块元素行内元素。...scale(X,Y)使元素水平方向垂直方向同时缩放(也就是X轴Y轴同时缩放) scaleX(x)元素仅水平方向缩放(X轴缩放) scaleY(y)元素仅垂直方向缩放(Y轴缩放) scale()的取值默认的值为

7.7K50

使用CSS完成元素居中的七种方法

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的,但是复杂的布局往往使一些解决方案不能很好的发挥作用。...在网页布局中元素水平居中元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代,我们很难确切的知道元素的准确高度宽度,所以一些方案不大适用。...使用table-cell居中 ? 使用 display: table-cell, 而不是使用table标签; 可以实现水平居中和垂直居中,但是这种方法需要添加额外的元素作为外部容器。...给htmlbody设置高度后,也可以使元素在body垂直居中。此方法在IE8+浏览器上生效。 使用absolute定位居中 ? 这种 方案 有非常好的跨浏览器支持。...理解这六种方案之后,web开发人员在面对元素居中的时候会有更多的选择。----

1.4K40

『知识巩固#1』Html、Css基础整理

指定标签的style 一个标签需要多个类名,用空格隔开即可 id 选择器 配合js 诞生,在一个页面中式唯一的,不可替代的 #id {属性名: 属性值} 所有标签上都有id 属性 每一个标签只能有一个...id属性值 一个id 选择器只能选中一个标签 通配符选择器 使用* 号可以匹配所有标签 一般用其清除margin、padding属性 字体和文本样式 字体 字体大小 font-size 浏览器有默认值...能让哪些元素水平居中 文本 span 标签 input标签、imp标签 文本修饰 text-decoration 属性值有: underline下划线 常用 line-through 删除线 不常用...网页设计时直接取色器吸就好啦qvq 关键词 rgb rgba 十六进制 标签水平居中 margin: 0 auto 选择器进阶 后代选择器: 空格 选择器1 选择器2 {css} 只要是后代,...设置浮动 行内元素、行内块元素的padding、margin无效情况 给行内元素设置marginpadding 水平方向的marginpadding布局中有效 垂直方向的marginpadding

4K20

CSS3

使用基础选择器在 HTML 中选择元素 标签选择器 。...一个标签上只能有一个id属性值,一个id选择器只能选中一个标签。id一般配合js使用。 #id+{CSS} 通配符选择器。在极特殊情况下才会用到。找到页面中所有标签,设置样式。...hidden 转换成行内块元素 设置浮动 行内元素加marginpadding只有水平生效 ---- 附加:父盒子中小盒子居中方法(多种): 基础 HTML 界面: <!..., line-height:500px 与 子盒子的vertical-align:middel共同作用使子盒子垂直居中。...但是若不换行,全部标签放一行,大大降低了代码的可读性难度。所以就引入了浮动。 ---- 结构伪类选择器 根据元素在HTML中的结构关系查找元素,查找某父级选择器中的子元素.

76290

如何制作一个简单的网页(二)_简单的个人网页

1、以元素的style 属性来指定 (内联样式) 2、以style 标签包裹 (内部样式) 3、以外部文件的方式 (外部样式) 2.CSS中的选择器 1.标签选择器 2.id选择器 3.类选择器 4...,就是你要插入的图片,路径错误的话,就显示你输入的文字 5.块级无语义元素 组织内容的 6.内联无语义元素 h1,ul,ol 都是称为块级元素...="stylesheet" href="(样式表地址)"> 语法是内部样式是相同的 2.CSS中的选择器 介绍几种常用选择器 1.标签选择器 直接写标签名,表示选中该页面中所有的对应名字的元素。...但是很多时候同一个标签我们希望其拥有不同的功能~~,这时候就可以使用id选择器了 2.id选择器 先给HTML标签指定一个id的值,在通过该id 选择器选中这个元素 通过指定一个id 去选择同一标签...+类名 在标签中加上 class=“类名” 类选择器可以给任意多的元素引用对应的类 4.子元素选择器 内外选择选择加空格 能选择到内部中,搭配其他选择器使用 基本命令: width: 600px;

1.8K20

css多浏览常见问题

.) 2).水平居中. margin: 0 auto;(当然不是万能) 3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签) 4, FF IE...解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个...,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. 10 IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。... 同时给P元素两个类,中间用空格格开,这样所有textside两个类的属性都会加到P元素上来。...content"> 来围上所有元素

1.1K30
领券