CSS3 盒子模型 ; .news a { /* 设置浮动 让三个链接盒子水平排列 */ float: left; /* 由于需要设置左侧的 border 边框...设置了边框整体增加 1 像素 导致第三个元素换行 因此不能使用传统的盒子模型 需要使用 CSS3 盒子模型 */ box-sizing: border-box; } 使用结构伪类选择器...设置了边框整体增加 1 像素 导致第三个元素换行 因此不能使用传统的盒子模型 需要使用 CSS3 盒子模型 */ box-sizing: border-box;..., 始终在最上方显示 */ position: fixed; /* 防止外边距塌陷进行的设置 */ overflow: hidden; /* 搜索栏宽度充满全屏 */...设置了边框整体增加 1 像素 导致第三个元素换行 因此不能使用传统的盒子模型 需要使用 CSS3 盒子模型 */ box-sizing: border-box;
1.2 文本属性 alt ：在图像无法显示时告诉用户该图片的内容。...1.3 图像的宽高属性 width，height 两者不能同时使用 1.4 图像的边框的属性 border ：可以为图像添加边框，设置边框的宽度，但边框颜色的调整仅仅通过HTML属性时不能通过的。...1.5 图像的边距属性 vspace 和hspace 1.6图像的对齐方式用align表示 2.相对路径和绝对路径 1.绝对路径 绝对路径一般是指带有盘符的路径 <img src="D:\html...，之间用”/“隔开 2.3图像文件位于html 文件的上一级文件夹：<em>在</em>文件名之前加入”.....；属性2：属性值2；属性3：属性值3；} 2.2 类选择器“.”<em>后面</em>紧跟类名 .类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；} 2.3 id选择器用“#”进行标识，<em>后面</em>紧跟id名 #id
:粗细 样式 颜色； 4.2.5 border-collapse border-collapse 属性是用来设置 table 表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示...设置表格单元格边框的方法 直接设置表格table属性：cellspacing="0" CSS方法1：border-collapse: collapse; 边框会合并为一个单一的边框； CSS方法2：border-spacing...right 元素向右浮动 none 不浮动 5.3 清除浮动 clear属性 值 说明 left 在左侧不允许浮动元素 right 在右侧不允许浮动元素 both 在左右两侧不允许浮动元素 none...--在clear类后面添加内容为空--> display: block; clear: both; <!...获得聚焦对象的元素 ：checked 选中 2.媒体查询：通过@media属性判断设备的尺寸，方向等 JavaScript触发： 3.用JavaScript脚本触发 特殊用法 <!
这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。 Q6、使用CSS的优势？ 1、多个文档的样式可以通过使用一个站点来控制。...= 1/72in) *像素或许被认为是最好的”设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。...使网站具有响应能力意味着某些元素将通过CSS媒体查询根据设备的屏幕尺寸（通常是视口宽度）来调整其大小或其他功能，从而做出响应。 例如，在较小的设备上减小字体大小。...box-sizing：边框更改了元素的宽度和高度的计算方式，边框和填充也包括在计算中。 元素的高度由内容的高度+垂直填充+垂直边框宽度计算得出。...元素的宽度是通过内容的宽度+水平填充+水平边框宽度来计算的。 在我们的盒子模型中，考虑到填充物和边框，与设计人员实际如何想象网格中的内容产生了更好的共鸣。 Q39、什么是CSS预处理器？
： 它们都影响空白区域，并且在 CSS 盒模型中紧挨着，只有在存在边框的情况下才会被边框分隔开来。...长度可以是绝对值，也可以是相对值。 绝对单位和相对单位有什么区别？ CSS 提供了两种类型的单元，因此我们可以建立灵活的网站，使其适用于各种设备和配置。...绝对长度单位总是相同的，而不是基于页面中的其他内容 相对长度单位单位可以改变，并基于字体和视口 如何确定何时使用绝对或相对 CSS 单位？...在决定使用绝对还是相对 CSS 单位来处理某个 CSS 属性时，你需要考虑用户想要做什么。 你可能已经熟悉了在文本大小方面使用相对长度单位。...在 "行动呼吁 "部分的文字栏中，文字周围的空间更大，留给阅读文字的水平空间更小。大号文字每行显示大约一个字，而小号文字每行只显示几个字。
今天继续学习CSS的高级技巧....溢出的文字省略号显示 单行文本溢出显示省略号 尝试了一下,效果图: 多行文本溢出显示省略号 因为要考虑兼容性的问题,使用的时候直接粘贴即可....* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 3; /* 设置或检索伸缩盒对象的子元素的排列方式 */.... 1.第一个盒子向左边(margin-left: -1px)移动1像素 2.第二个盒子向左浮动,随后再向左移动1像素 3.后面的也一样....,使用后不保留位置,在浮动之上 */ position: relative; /* 子绝父相 绝对定位 脱标 不保留位置 */ border
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。...浮动 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 C. 定位 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。 「2....相对定位(relative)」 相对定位是元素相对于它原来在标准流中的位置来说的。 相对于自己原来在标准流中位置来移动的 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 「5....定位(position)的扩展 绝对定位的盒子居中 绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中 在使用绝对定位时要向实现水平居中，可以按照下面的方法： left : 50%...---- CSS高级技巧 元素的显示与隐藏 **目的:**让一个元素在页面中消失或者显示出来 **场景:**类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
现在开始 在决定仅用HTML和CSS构建它之前，我先做了一个动画版。 ? 它可以给我们一个很好的参考。正如你看见的，这个动画包含4步。 四个边框依次出现。 红色、桔色、白色矩形滑入。 三个矩形滑出。...logo"> 红色矩形在桔色矩形的后面...，而桔色矩形在白色矩形的后面。...然后我们通过让伪元素的width和height从0%至100%依次动画显示出来，从而让每个边框单独显示出来。 让我们试下吧。首先创建一个静态的版本。...div.logo::before绝对定位于 div.logo左顶角，将显示顶部边框和右边框。div.logo::after定位于右底部，显示底部和左边框。
本章文中示例代码托管在CodeSandbox[1] 3.1 盒模型 盒模型是 CSS 的核心概念，描述了元素如何显示以及(在一定程度上)如何相互作用、相互影响。...相应的，span、strong这些是行内元素，所以它们会以行内盒子(简称行盒子，inline box)显示在行内。 CSS 中有几种不同的定位模型，包括浮动、绝对定位和相对定位。...它们之间的水平间距可以通过水平方向的内边距、边框和外边距来调节。但是行内盒子的高度不受其垂直方向上的内边距、边框和外边距的影响，且给行内盒子显示地设置宽高也不会起作用。...3.2.1.3 固定定位 固定定位是由绝对定位衍生出来的，不过其包含块在设计之初是视口(viewport)。...如果包含块太窄无法容纳所有浮动元素水平排列，后面的元素会向下移动如下图左侧。如果浮动元素高度不同，后面的浮动元素在向下移动时可能会“卡”在前面的浮动元素左侧，如下图右侧。 ?
现在开始 在决定仅用HTML和CSS构建它之前，我先做了一个动画版。 ? 它可以给我们一个很好的参考。正如你看见的，这个动画包含4步。 四个边框依次出现。 红色、桔色、白色矩形滑入。...logo"> 红色矩形在桔色矩形的后面...，而桔色矩形在白色矩形的后面。...然后我们通过让伪元素的 width和 height从0%至100%依次动画显示出来，从而让每个边框单独显示出来。 让我们试下吧。首先创建一个静态的版本。...div.logo::before绝对定位于 div.logo左顶角，将显示顶部边框和右边框。 div.logo::after定位于右底部，显示底部和左边框。
“> CSS全称Cascading Style Sheets，层叠样式表，用于定义HTML元素的显示样式，实现内容与表现分离。...style="" href=""/>标签链接外部的CSS文件，应用最广泛； 导入样式表，在标签中使用@import导入外部样式表，用的不多。...important的属性优先级会被提升）： 直接选中>间接选中 不同选择器：id>类>标签>通配符>继承>浏览器默认 相同选择器，写在后面的优先级高 CSS基础语法 CSS语法组成：选择器+声明语句selector...--内容溢出时是否修剪 visible默认值，不会修剪，溢出部分会显示在框外 hidden隐藏，溢出部分会修剪掉 scroll内容会被修剪，始终显示滚动条 auto如果内容被修剪，则显示滚动条 inherit...absolute绝对定位，通过top/right/bottom/left定位 relative相对定位 fixed相对于浏览器窗口的绝对定位，可以用来制作网站的导航条，或者烦人的广告 static默认值
（宽高、边框样式、边距等）以及版面的布局等外观显示样式。...尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 CSS Unicode字体 在 CSS 中设置字体名称，直接写中文是可以的。...元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。...auto : 超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 CSS高级技巧 CSS用户界面样式...通常我们使用于强制一行显示内容 normal : 默认处理方式 nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
CSS概述 CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。...简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。 那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。...CSS与HTML相结合的四种方式 ☆ 1、style属性方式 这种方式很少用，因为还是和HTML差不多。 一般用后面3种。...——总之，一般情况是以后加载为主，但还有细节优先级问题（后面会讲到）。 ☆CSS代码格式 选择器名称 { 属性名：属性值；属性名：属性值；…….}...relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。 absolute —绝对定位。
(2)块状元素特点：如果没有设置自身宽度，则显示为父容器的100%。 (3)行内元素：如 显示宽度由自己的内容决定，其他元素可以排在它后面。...如果是右浮动，后面的文本流将环绕在它左边： 47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。...left(左侧不允许浮动元素)、right(右侧不允许)、 both(左右都不允许，常用于文本在图片下方显示)、 none(允许浮动元素出现在两侧) 49.解决父级边框塌陷 (1)浮动元素后加空的div...b.使用场景： 相对定位可以不设偏移量，让后面的绝对定位以它为祖先元素作基准定位。...clip : rect(top, right, bottom, left); CSS 伪类： 1.Anchor伪类 (伪类如:link冒号和伪类名之间不能有空格) 在支持 CSS 的浏览器中，链接的不同状态可用不同的方式显示
注：CSS优先级从大到小为：行内CSS>内嵌式CSS>外联CSS and CSS优先级从大到小为：ID选择器>伪类选择器>类选择器>标签选择器>通用选择器 （两种分类不同）其中在属性值的后面加上“！...background-color: black; } .test:visited{ /* 点击之后 */ background-color: teal; } ---- 伪装结构选择器...，border为边框，margin为边框外侧离父容器的距离。...那么问题来了，我如果想让三个在同一行显示，如何实现？ ---- 先来解释一下CSS定位的概念，也就是说你一个HTML元素在网页的哪里？ 自动定位：默认的定位方式。...（设置偏移值方法 top:20px;left:20px; ） 绝对定位：相对于父组件的位置（要求父组件也是绝对定位，否则再往上找） 固定定位：相对于浏览器窗口（）而言的位置 position
： 伪元素名 说明 :first-letter 向文本的第一个字母添加样式 :first-line 向文本的第一行添加样式 :after 在元素之后添加内容 :before 在元素之前添加内容 css...设置是否显示表格中空单元格上的边框和背景 table-layout 设置用于表格单元格列宽的设置方式 盒模型 css盒模型，包含元素内容 content，内边距 padding，...css内边距属性，元素的内边距在边框和内容之间。...css轮廓是绘制在元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。...裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则 overflow 设置内容溢出元素框时的处理方式，值：visible,auto,hidden,scroll display 设置元素如何显示，值none
浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。...6.4、浮动小结 我们使用浮动的核心目的——让多个块级盒子在同一行显示。 因为这是我们最常见的一种布局方式。...在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）。...7.3、定位模式 在 CSS 中，通过 position 属性定义元素的定位模式，语法如下： 选择器 { position: 属性值; } 定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。...原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 7.3.3、绝对定位(absolute) 绝对定位是元素以带有定位的父级元素来移动位置，也就是我们常说的拼爹。
由块级元素（块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）和行级元素（块级元素特点： 在同一行内显示，不会改变HTML文档结构 ）组成。...倡导的是结构、样式、行为分离 3.盒模型（Box Model） 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。...CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、盒子中的内容（content）....盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 元素的宽度和高度： 重要: 当你指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。...这样的话，该框及其所有内容就不再显示，不占用文档中的空间。 但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。
开发响应式Web布局时，可以直观地显示CSS样式表所定义的分辨率的效果。 BuiltWith — 用于查看当前网站使用什么技术搭建。...CSS Shapes Editor — 在所选中元素上方显示交互式编辑器，用于新建和调整用CSS写的图形。...Pesticide — 在当前网页插入Pesticide CSS，为元素添加明显的边框，方便查看元素位置。 Responsive Web Design Tester —测试移动网站在移动设备上的效果。...jQuery Audit — 在元素面板创建侧边栏，显示jQuery委托代理事件、内部数据、当前选中的DOM节点、函数和对象等信息。...PerfectPixel — 在页面上显示半透明的图像，便于逐像素对比调整前后的页面效果，以达到最佳水准。
对于现代浏览器来说，css中指定的width就是content width。 对于IE5.x和6来说，在怪异模式中width等于content、左右padding和左右border。...（CSS2.1 新增的值） none 此元素不会被显示。 list-item 此元素会作为列表显示。...display:node：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。 如何画一个三角形 左右边框设置为透明，长度为底部边框的一半。...左右边框长度必须设置，不设置则只有底部一条边框，是不能展示的。...center的div需要放到后面，将左右两边使用absolute定位，因为绝对定位使其脱离文档流，最后面的center会显示在正常文档流中，然后设置margin属性，留出左右两边的宽度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
