文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS概要

CSS 基础知识 语法 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式， 如文字大小、颜色、字体加粗等。...流动布局模型具有2个比较典型的特征: 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的 宽度都为100%。实际上，块状元素都会以行的形式占据位置。...在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。 浮动模型 float 浮动模型，浮动(Float)如果想让两个块状元素并排显示，需要用到浮动模型。...相对定位完成的过程是首先按static(float)方式生成一个元 素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、 bottom属性确定，偏移前的位置保留不动...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕 位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会 受文档流动影响

1.4K50

前端基础篇css

常见内联元素：a,span,strong,b,i,em,br,img,input,select,textarea 内联元素特点： a) 内联元素没有自己的形状，也显示为一个矩形区域 b) 内联元素在一行逐个进行显示...一、移动端相关概念 1.屏幕尺寸 屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米 2.屏幕分辨率 屏幕分辨率是指横纵方向上的像素点数，单位为px，1个像素点=1px (这里的1px是指物理设备上的一个像素点...) 常见移动端设备屏幕分辨率： iphone6,6s,7,8 1334*750 iponee6plus,7plus,8plus 1920*1080 注：移动端设备一般为 纵向像素*横向像素 3.ppi...文件中的像素值，即要显示在设备上的像素值 常见设备dpr值： iphone6,7,8 dpr=2 iphone6plus,7plus,8plus dpr=3 5.移动端meta设置 <meta name...适用于内容较少比较简单的移动端页面 2.等比例缩放布局(rem布局) 特点：使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放 案例：网易 注：适用于页面内容较多较复杂的移动端页面

1.7K30
您找到你想要的搜索结果了吗？
是的
没有找到

前端入门学习--CSS

class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示： 下面的例子中，所以拥有center类的HTML元素均为居中。...多重样式优先级 样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。...:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。...在鼠标移动到div 上时显示提示信息。提示文本放在内联函数上(如 span) 并使用class=”tooltiptext”。...:hover 选择器用于在鼠标移动到到指定元素div上时显示的提示。 图片廊 以下是使用 CSS 创建图片廊： <!

27.6K20

CSS总结

background-attachment:[scroll ,fixed] 　　　　注：背景图像，默认情况下是进行水平和垂直位置上的平铺，默认在盒子的左上方显示。...图片的依附方式的含义是：将图像固定在屏幕的某个位置。（但在IE6中只有html和body 两个元素支持此属性。） 　　...核心思想是把多张图片合成一张图片里，通过修改背景属性中的定位来控制到底显示图片中的哪些部分。 [5]:CSS常见布局方式：一行一列居中、一行两列居中、两行两列、三行两列、三行三列....　　[6]:当父元素没有指定高度并且子元素有浮动时，这个父元素的高度不会自动增加. [7]:在给盒子的父盒子加居中时，一定要有宽度才能使得父盒子居中....auto(在必须时对象内容才会被裁切或显示滚动条)   　　　　　　　　　　　   hidden(不显示超过对象尺寸的内容)  　　　　　　　　　　　　 scroll(总是显示滚动条) 　　2.Zoom

2.1K10

【Axure交互教程】 隐藏页面滚动条的3种方法

很多朋友在使用Axure制作移动端原型时，希望内容区域在固定的区域内滚动，但是转换为动态面板后，显示滚动条会使美观度大打折扣，本文将介绍3个可以隐藏滚动条的小tips。...- 方法一：使 用设备 模版素材进行遮挡 - 1.按照下图所示准备好所有的元件，页面排列方式选择居中，这样可以保证预览时我们内容始终是页面居中显示的。...- 方法二：转换两次动态面板 - 方法一仅限于设备模版素材的宽度足以遮挡住滚动条的情况，如果不想添加设备素材，或设备素材的边框比较宽度不足以遮挡滚动条时，我们可以通过转换两次动态面板的方式来遮挡。...1.首先按照方法一中的步骤1-4制作出第一层动态面板，在此动态面板的基础上右键再次转换为动态面板。...预览效果： - 方法三：利用内联框架结合动态面板实现 - 1.首先在内容区内拖入一个内联框架的元件，在右侧样式面板中勾选【隐藏边框】，调整内联框架宽度和高度，使滚动条超出内容区。

3.2K50

BootStrap应用开发学习入门

元素和 CSS 属性满足一些新特性: BS设计目标是移动设备优先然后才是桌面设备； BS全局显示、排版和链接 响应式布局以及图像响应式 BS支持跨浏览器一致性:使用了 Normalize.css 是一个很小的...CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性 BS支持 Internet Explorer 8 及更高版本的 IE 浏览器 WeiyiGeek.浏览器支持情况 (1) 移动设备优先策略...列中进行分 4 个 col-md-6 则，相对于在 9列中再次等分为2行12列；（具体查看下面的案例） 列排序 描述:以一种顺序编写列，然后以另一种顺序显示列。...BS 代码展示 两种方式显示代码： :内联显示代码 :显示为一个独立的块元素或者代码有多行 :显示变量赋值 :按键文本提示 : 电脑程序输出格式显示...添加四个像素的内边距（padding）和一个灰色的边框, 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

17.4K20

BootStrap应用开发学习入门

元素和 CSS 属性满足一些新特性: BS设计目标是移动设备优先然后才是桌面设备； BS全局显示、排版和链接 响应式布局以及图像响应式 BS支持跨浏览器一致性:使用了 Normalize.css 是一个很小的...CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性 BS支持 Internet Explorer 8 及更高版本的 IE 浏览器 WeiyiGeek.浏览器支持情况 (1) 移动设备优先策略...列中进行分 4 个 col-md-6 则，相对于在 9列中再次等分为2行12列；（具体查看下面的案例） 列排序 描述:以一种顺序编写列，然后以另一种顺序显示列。...BS 代码展示 两种方式显示代码： :内联显示代码 :显示为一个独立的块元素或者代码有多行 :显示变量赋值 :按键文本提示 : 电脑程序输出格式显示...添加四个像素的内边距（padding）和一个灰色的边框, 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

14.5K30

CSS再学

设置display:block就是将元素显示为块级元素 内联元素 display:inline将元素设置为内联元素 特点： 1.  和其他元素都在一行上 2. ...块级元素都会在所处的包含元素自上而下按顺序垂直延伸分布，因为在默认情况下，块状元素的宽度都是100%，实际上，块级元素都会以行的形式占据位置。 2. ...相对定位完成的过程是首先按static（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动。...css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。...代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素

1.9K70

前端面试之CSS重点概念精讲

如何区分内联元素 从「定义」上：内联元素的内联特指外在盒子 从「表现」上：可以和文字在一行显示 幽灵空白节点 在H5文档声明中，内联元素的所有解析和渲染表现就，如同每个「行框盒子」的前面有一个空白节点一样...---- 盒模型 一个盒子由四个部分组成：content、padding、border、margin content，即实际内容，显示文本和图像 content 属性大都是用在::before/::after...-webkit-line-clamp: n：和①结合使用，用来限制在一个块元素显示的文本的行数(n) -webkit-box-orient: vertical：和①结合使用 ，设置或检索伸缩盒对象的子元素的排列方式...justify-content属性 justify-content属性定义了项目在「主轴上的对齐方式」。...6步： ❝ 构建DOM树； 样式计算； 「布局定位」； 图层分层； 「图层绘制」； 「合成显示」； ❞ 在CSS属性改变时，重渲染会分为「回流」、「重绘」和「直接合成」三种情况，分别对应从「布局定位」/

2.4K30

前端课程——盒子模型

当距离等于外部容器的一半时就形成了一个原型 边框图像 使得边框可以引入图像，从而免去在某些情况下使用九宫格了。...每一个都用一次来形成最终边界图像的角点。 区域 5-8 边区域。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。 区域 9 为中心区域。...它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作背景图像。 中间的区域将不会被边框使用，但当设置有 fill 关键词时将会被作为 background-image。...负值:下一个兄弟元素向左移动 内容水平居中 使用margin即可. div{ margin:0 auto; } 固定写法,其中0表示上下 auto表示左右....盒子模型的类型 块级元素 可以设置宽高 内联元素 水平方向的内边距有效的 - 控制文本内容在水平方向的位置 垂直方向的内边距有效的 - 文本内容的位置没有变化，内边距向上和向下进行扩展 垂直方向的外边距无效的

1.1K10

Axure RP 9 for Mac(原型设计软件)

）下一页和上一页的快捷方式自动包含Axure上的Google字体的Web字体 选色器 色轮保存的颜色径向渐变建议的颜色 形状 形状绘制工具绘图工具的单键快捷方式从草图粘贴（带插件）双击边框以编辑矢量点形状上的背景图像钢笔工具改进形状在原型中生成为...动态面板 axure rp 9 mac内联编辑边框角半径外阴影 自适应视图 axure rp 9 mac页面可以有不同的自适应视图页面可以共享自适应视图集原型显示最适合的视图（替换条件） 图书馆 将图像文件夹添加到...（1,1.1,1.1.1）注意数字显示在原型中注意数字是连续的动态面板主要注释是生成原型的 表单小部件 自定义样式样式效果（鼠标悬停，禁用等） 互动 内联交互构建器在交互构建器中搜索启用/禁用时的条件显示...只需发送一个链接（和密码），其他人就可以在浏览器中查看您的项目。在移动设备上，使用适用于iOS和Android的浏览器或Axure Share App。...注释您的图表和原型以指定功能，跟踪任务或存储项目信息。将笔记整理到不同的受众群体的不同字段中。选择要在HTML中或包含屏幕截图的自动生成的Word文档中显示哪些注释。

1.5K20

CSS技术入门

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点"."...号显示ID 属性不要以数字开头，数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用第三种选择器为标签选择器，即以 HTML 标签作为 CSS 修饰所用的选择器第四种内联选择器即直接在标签内部写...float浮动CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。...该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 @media 规则允许在相同样式表为不同媒体设置不同的样式。...除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

2.8K61

前端语言基础【第一篇：HTML5 & CSS】

(一) HTML5：超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签（标记）嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现，用于标记文本内容的含义 浏览器通过元素标签解析文本内容并将结果显示在网页上...，而元素标签本身并不会被浏览器显示出来 (2) 基本结构 HTML5元素的内容一般以起始标签开始，以结束标签终止 src:图片的路径 width： 图片的宽度 height：图片的高度 alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容 有些浏览器下不显示（没有效果） 6....该标签是一个内联元素（inline element），与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。 ?...(二) 层叠样式表 多个样式可以作用在同一个html元素上，使得页面效果更加好，CSS将网页内容和显示样式进行分离，降低耦合度，提高了开发效率 (1) CSS和html结合的方式 内联样式 在每个html

1.8K20

2020 年「我与技术面试那些事儿」

（触发严格模式或者标准模式，就是在HTML标签前声明正确的DTD；触发混杂模式可以在HTML文档开始时不声明DTD，或者在DOCTYPE前加入XML声明） 4.静态网页是没有数据交互的网页（没有数据库参与...DOCTYPE不存在或格式不正确都会导致文档以混杂模式来呈现。 严格模式下以浏览器支持的 最高标准来运行的，在混杂模式中，以向后兼容的方式来显示。...11.img标签上的title是为提供标题信息，当光标悬浮在标签上后显示的信息，而alt是当图片不能正常显示时，图片的替换文案。...14.在新窗口打开链接的方式： target=_blank 15.HTML是网页内容的载体；CSS是网页内容的表现；JavaScript是用来实现网页上的特效和交互。...对于float可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素，即遮盖现象。

1.2K20

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

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。...在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？...如何区分 HTML 和 HTML5？ HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。...（包括水平居中和垂直居中） 内联元素居中方案 水平居中设置： 1.行内元素 设置 text-align:center； 2.Flex布局 设置display:flex;justify-content:...（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。

5.6K60

HTML之图像，表格，列表，区块（笔记小结）

1 图像1.1 图像标签图像由 标签定义； 是空标签，只包含属性，并且没有闭合标签；需要使用源属性（src），页面上才能显示图像，其值是图像的 URL 地址；标签说明 定义图像...；作用：浏览器无法载入图像时，就会显示替换文本，这样很容易知道错误信息。...="64" height="64">复照青苔上。...>图片3.2 列表标签标签 描述定义有序列表定义无序列表 定义列表项定义列表自定义列表项目 定义自定列表项的描述 4 区块4.1 区块元素块级元素在浏览器显示时...，通常会以新行来开始（和结束）；如, , , ；4.2 内联元素在显示时通常不会以新行开始；如, , , ；4.3 div元素

1.7K60

【Java 进阶篇】HTML 图片标签详解

这是 标签中最重要的属性，因为它告诉浏览器在哪里找到图像文件。 alt 属性：指定图像的替代文本，用于在图像无法显示时显示。这对于可访问性很重要，也可以提供图像的简要描述。...这些属性可以用于调整图像的大小，但最好使用与原始图像比例相同的值，以避免图像变形。 title：指定当用户将鼠标悬停在图像上时显示的文本，通常用于提供附加信息。...border：指定图像的边框宽度，以像素为单位。 align：指定图像在文本中的对齐方式，常见的值包括 left（左对齐）、right（右对齐）和 center（居中对齐）。...响应式图片 在移动设备和不同屏幕尺寸的计算机上显示图像时，通常希望图像能够根据屏幕大小进行自适应。为了实现这一点，可以使用CSS和HTML结合的方法，或者使用HTML5的srcset属性。...响应式设计：在移动设备和桌面计算机上都能正常显示图像，采用响应式设计是一种良好的实践。 图像格式：选择适当的图像格式，如JPEG、PNG或GIF，以满足您的需求。 6.

24520

CSS常见样式（一）

属性是作用在块级元素上让里面的文本居中： 我要居中我要居中我要居中 //若想要上面的文本居中，对应的CSS样式因如下所示编写 div{ text-align...像素px是相对于显示器屏幕分辨率而言的。在Web页面制作中，我们一般使用“px”来设置我们的文本，因为他比较稳定和精确。...但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的 Web页面时，他改变了浏览器的字体大小（虽然一般人不会去改变浏览器字体大小），这时会使用我们的Web页面布局被打破，这时就提出了使用“em”来定...在使用“em”作单位时，一定需要知道其父元素的设置，因为“em”就是一个相对值，而且是一个相对于父元素的值。...对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

1.7K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券