1. css中行内元素和块级元素有哪些?
行内元素和块级元素的区别:
行内元素:
与其他行内元素并排
不能设置宽高,默认的宽度就是文字的宽度
块级元素:
霸占一行,不能与其他任何元素并列。
能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。
行内元素:
- a - 锚点
- abbr - 缩写
- acronym - 首字
- b - 粗体(不推荐)
- bdo - bidi override
- big - 大字体
- br - 换行
- cite - 引用
- code - 计算机代码(在引用源码的时候需要)
- dfn - 定义字段
- em - 强调
- font - 字体设定(不推荐)
- i - 斜体
- img - 图片
- input - 输入框
- kbd - 定义键盘文本
- label - 表格标签
- q - 短引用
- s - 中划线(不推荐)
- samp - 定义范例计算机代码
- select - 项目选择
- small - 小字体文本
- span - 常用内联容器,定义文本内区块
- strike - 中划线
- strong - 粗体强调
- sub - 下标
- sup - 上标
- textarea - 多行文本输入框
- tt - 电传文本
- u - 下划线
- var - 定义变量
块级元素: - address - 地址
- blockquote - 块引用
- center - 举中对齐块
- dir - 目录列表
- div - 常用块级容易,也是css layout的主要标签
- dl - 定义列表
- fieldset - form控制组
- form - 交互表单
- h1 - 大标题
- h2 - 副标题
- h3 - 3级标题
- h4 - 4级标题
- h5 - 5级标题
- h6 - 6级标题
- hr - 水平分隔线
- isindex - input prompt
- menu - 菜单列表
- noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
- noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
- ol - 排序表单
- p - 段落
- pre - 格式化文本
- table - 表格
- ul - 非排序列表
2. block和inline-block有什么区别
display:block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
3. 如何让元素垂直居中
1.通过verticle-align:middle实现CSS垂直居中。
通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block。
2.通过display:flex实现CSS垂直居中。
随着越来越多浏览器兼容CSS中的flexbox特性,所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的,只是在flex-direction上有所差别,一个是row(默认值),另外一个是column。
3.通过伪元素:before实现CSS垂直居中。
具体方式是为父元素添加伪元素:before,使得子元素实现垂直居中。
4. css隐藏元素
css隐藏元素的方法
1、利用opacity透明度来隐藏,opacity设置为0,它只是一种视觉隐藏,元素本身依旧占用它的位置并对网页的布局起到作用,它也同样影响用户交互。在读屏软件中会被识别。
2、visibility:规定元素 是否可见,一般设置为hidden,它可以很好的隐藏,不会影响用户的交互,在读屏软件中不会被识别。(visibility可能的值)
3、display:当display设置为none,任何对该元素直接打用户交互操作都不可能生效,被隐藏的元素完全不会占用空间,仿佛元素完全不存在一样。(display可能的值)
4.position:元素的定位。把position:absolutely;top:-4555px;left:-45545px;top和left设置成足够大的负数,相当于把元素放到可视区域外,它不会影响布局,能够让元素保持可操作性,在读屏软件上可以被识别。(position可能的值)
5、clip-path:可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。它只是一个实验中的功能,兼容性并不是很好。
5. Vue指令
使用Vue的过程就是定义MVVM(Model-View-ViewModel)各个组成部分的过程的过程。
Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:
•v-if指令•v-show指令•v-else指令•v-for指令•v-bind指令•v-on指令:
1.v-if指令:
v-if = “表达式”
本质是通过操纵dom元素来进行切换显示
表达式的值为true的时候元素存在于dom树中,为false的时候从dom树中移除。
满足条件是会渲染到html中,不满足条件时是不会渲染到html中的,是通过操纵dom元素来进行切换显示
2.v-show指令:
元素始终被渲染到HTML,它只是简单的伪元素设置css的style属性,当不满足条件的元素被设置style=“display:none”的样,是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
3.v-else指令:
v-if=“条件” 条件成立 v-else 条件不成立,有没有发现 v-else离不开v-if,如果没有v-if的存在 v-else将变得毫无意义。
4.v-for指令:
v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名
5.v-bind指令
v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute)
6.v-on指令:
v-on是用来绑定事件监听器,用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
1.v-on指令的作用是:为元素绑定事件
2.事件名不需要写on
3.指令可以简写为@
4.绑定的方法定义在methods属性中
7.v-model指令
v-model在表单控件元素上创建双向数据绑定
6.伪类和伪元素
css引入伪类和伪元素概念是为了格式化文档树以外的信息,也就是说。伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者列表中的第一个元素。
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的,比如说,当用户悬停在指定的元素时,我们可以用:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
伪元素用户创建一些不在文档树中的元素,并为其添加样式,比如说,我们可以通过:before来在一个元素前增加一些文本
伪类-状态
:link 选择未访问的链接
:visited 选择已访问的链接
:hover选择鼠标指针浮动在其上的元素
:active选择活动的链接
:focus 选择获取焦点的输入字段
伪类-结构化
:not 一个否定伪类,用于匹配不符合参数选择器的元素
:first-child 匹配元素的第一个子元素
:last-child 匹配元素的最后一个子元素
:first-of-type 表示一组兄弟元素中其类型的第一个元素
:last-of-type 表示一组兄弟元素中其类型的最后一个元素
:nth-child 根据元素的位置匹配一个或者多个元素,它接受一个an+b形式的参数
:nth-last-child 与:nth-child相似,不同之处在于它从最后一个子元素开始计数
:nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型的元素
:nth-last-type 与nth-of-type相似,不同之处在于它是从最后一个子元素开始计数的。
:only-child 当元素是其父元素中唯一的子元素时,:only-child匹配该元素
:only-of-type 当元素是其父元素中唯一特定类型的子元素时,:only-child匹配该元素
:target 当url带有瞄名称,指向文档内某个具体的元素时:target匹配该元素
伪类-表单相关
:checked 匹配被选中的input元素,这个input元素包裹radio和checkbox.
:default 匹配默认选中的元素
:disabled 匹配禁用的表单元素
:empty 匹配没有子元素的元素,如果元素中含有文本节点,html元素或者一个空格,则:empty不能匹配这个元素
:enabled 匹配没有设置disabled属性的表单元素
:in-range 匹配在指定区域内元素,
:out-of-range 匹配不在指定区域内的元素
:indetermimate 当某组中的单选框或复选框还没有选取状态时,:indeterminate匹配该组中所有的单选框或复选框
:valid 匹配条件验证正确的表单元素
:invalid 匹配提交验证错误的表单元素
:optional :required匹配设置有无设置required属性的表单元素
:read-only 匹配设置了只读属性的元素
:read-write匹配处于编辑状态的元素
伪类-其他关
:root 匹配文档的跟元素
:fullscreen 匹配处于全屏模式下的元素
伪元素
有时你会发现伪元素使用了两个冒号 (:😃 而不是一个冒号 (😃. 这是CSS3的一部分,并尝试区分伪类和伪元素. 大多数浏览器都支持这两个值。
1 ::before/:before 在被选元素前插入内容,需要使用content属性指定要插入的内容。被插入的内容实际上不在文档树中
2 ::after/:after 在被元素后插入内容.其用法和特性与:before相似
3 ::first-letter/:first-letter 匹配元素中文本的首字母
4 ::first-line/:first-line匹配元素中第一行的文本,这个伪元素只能用在快元素中。不能用在内联中
5 ::selection匹配被用户选择或者处于高亮状态的部分,该元素只支持双冒号的形式
6 ::placeholder 匹配占位符的文本,只有元素设置placeholder属性是,该伪元素才能生效。