首页 > 其他分享 >前端知识汇总2(css,css2, 页面布局,移动端适配)

前端知识汇总2(css,css2, 页面布局,移动端适配)

时间:2024-02-20 10:02:13浏览次数:31  
标签:css2 val 定位 适配 元素 att 选择器 css 属性

  1. 固定定位(fixed)
    固定定位是绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素。当position属性的
    取值为fixed时,即可将元素的定位模式设置为固定定位。
    当对无素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。
    不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化,该无素都会始终在浏览器窗口的固定位
    置。
    固定定位有两点:
    1、固定定位的元素跟父亲没有任何关系,只认浏览器。
    2、固定定位完全脱标,不占有位置,不随着滚动条滚动。

2.叠放次序(z-index )
当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。

定位模式 是否脱标占有位置 是否使用边偏移 移动位置基准
1.静态static 不脱标正常模式 不可以 正常模式
2.相对定位relative 脱标,占有位置 可以 相对自身位置移动
3.绝对定位absolute 完全脱标,不占有位置 可以 相对定位父级移动位置
4.固定定位fixed 完全脱标,不占有位置 可以 相对浏览器移动位置

3.display显示
display设置或检索对象是否如何显示
display: none 隐藏对象(不占有位置)
display: block显示对象,除了转换为块级元素之外,同时还有显示元素的意思。
特点:隐藏之后,不再保留位置,下面的元素会跑上去。

/* display: none; /
/
隐藏某个元素 display: block 显示某个元素 /
/
visibility: visible; 显示某个元素 /
visibility: hidden;
/
隐藏某个元素 */

	overflow溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible:不剪切内容也不添加滚动条。
hidden:不显示超过对象尺寸的内容,超出的部份隐藏掉。
scroll:不管超出内容否,总是显示滚动条。
auto:超出自动显示滚动条,不超出不显示滚动条。

CSS用户界面样式:鼠标样式,表单轮郭
4.鼠标样式cursor

     
  • 我是箭头
  •  
  • 我是小手
  •  
  • 我是移动
  •  
  • 我是文本
  1. 轮郭outline
    是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用 textarea {
    resize: none; /* 防止拖拽 /
    outline: none; /
    取消边框 */
    }

6.vertical-align 垂直对齐
vertical-align不影响块级元素中心内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元
素。通常用来控制图片/表单与文字的对齐。
vertical-align: baseline 基线对齐,默认的是文字和图片基线对齐
vertical-align: middle 垂直居中,
vertical-align: top 顶部对齐
vertical-align: bottom 底部对齐

  1. 溢出的文字隐藏white-space,text-overflow
    white-space设置或检索对象内文本显示方式,通常我们使用于强制一行显示内容。
    normal:默认处理方式
    nowrap:强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
    li {
    width: 260px;
    height: 30px;
    border: 1px solid red;
    line-height: 30px;
    white-space: nowrap; /* 强制在同一行内显示所有文本 /
    text-overflow: ellipsis; /
    溢出的部份用省略号替代 /
    overflow: hidden; /
    超出的部分隐藏 */
    }

css3 层叠样式表的升级版本:层叠样式,对网页布局、字体、颜色、背景灯效果做出控制

css3新增的选择器
1.属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样可以不用借助于类或id选择器。
注:类选择器,属性选择器,伪类选择器权重是10
属性选择器还有以下匹配规则(E表示选择器,att表示属性值,val表示匹配的内容)
选择器 简介
E[att] 具有att属性的E元素
E[att=val] 具有att属性且值为val的E元素
E[att^=val] 具有att属性且值以val开头的E元素
E[att$=val] 具有att属性且值以val结尾的E元素
E[att*=val] 具有att属性且值包含val的E元素

2.结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素 权重10
选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个

标签:css2,val,定位,适配,元素,att,选择器,css,属性
From: https://www.cnblogs.com/chenshaojun2008/p/18022454

相关文章

  • 修改标签官网自带css——dialog
    对于标签原本自带的class类就如下图的.el-dialog__body就是自带的原dialog:现在若要更改padding值方式一(但是修改的是全局的了):<style>.el-dialog__body{padding:15px;}</style>方式二(给dialog加一个自定义类名,修改的是所有class匹配的el-dia......
  • CSS学习记录
    块级元素block总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度;<div>,<p>,<h1>,<form>,<ul>和<li>是block元素。display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,......
  • css样式相关代码记录
    element样式穿透:::v-deepposition属性值有static、relative、absolute、fixed、sticky。static:该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。relative:该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会......
  • css小技巧
    水平居中1.单行文本的水平居中text-align:center2.元素水平居中2.1块元素一般都是在最外部套一个div(块元素),然后对这个div设置width即宽度,然后让其margin-left和margin-right的值为auto实现水平居中。1. 写一个div包裹2.给div设置宽度3.给div的左右外边框的属性,设置......
  • 10 个图像悬停效果 CSS & JavaScript 代码片段
    悬停效果一直是向网站添加交互元素的最简单方法之一,我们看到它们经常用于突出显示文本链接或按钮。悬停效果尤其强大的一个领域是当它们应用于图像时,无论是作为小型卡片布局的一部分还是大型相册的一部分,都可以产生很棒的效果。今天,我们将向您展示设计师将悬停效果集成到图像中的......
  • CSS 的BFC
    BFC是什么含义是:blockformattingcontext上下文可以理解为(区域)blockformattingcontext表示被隔离的区间:(BFC的子元素不会对外面的元素产生影响)1.普通流2.定位流3.浮动流0.BFC的规则1.BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排列。2.BFC就是页面中一个隔......
  • [Vue] CSS中的v-bind
    在Vue中说到v-bind大多数时候都是想到template中动态绑定script中的响应式数据。但其实在单文件组件(SFC)中,<style>标签内也可以使用v-bind函数绑定数据。如上图第18行代码,使用v-bind(color)绑定了数据。当数据变化时,css样式随之变化:原理:(截取自Vue官方文档)实际的值会被编......
  • 如何使用TailwindCSS和JavaScript构建自定义的HTML5视频播放器
    HTML5自带了一个原生视频播放器。它在浏览器中配备了简单的用户界面、功能和一些基本的控件。尽管通过浏览器的默认视频播放器的功能完美运行,但用户界面并不那么美观和时尚,总体上并不令人满意。因此,大多数现代Web应用程序和平台,如Udemy、Netflix、YouTube和AmazonPrime,不会将默......
  • css table 设置记录
     td,th{padding:3px7px2px7px;font-weight:bold;--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#......
  • CSS
    CSS标签(1)介绍在HTML中,标签(Tag)是用于定义文档结构和内容的元素,而CSS(CascadingStyleSheets,层叠样式表)则用于控制网页的样式和布局。CSS样式表中可以通过选择器(Selectors)来选择HTML中的标签,并为其应用样式。在HTML中,标签(Tag)是用于定义文档结构和内容的元素,而CSS(Cas......