没有接触过的链接），用于定义链接的常规状态 a:hover（鼠标放在链接上的状态），用于产生视觉效果 a:visited（访问过的链接），用于阅读文章，能清楚的判断已经访问过的链接 a:active（在链接上按下鼠标时的状态...Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 CSS Float（浮动） CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。...浮动元素之前的元素将不会受到影响。 如果图像是右浮动，下面的文本流将环绕在它左边： ? 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。...元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本中添加图片廊： ? ?
通常用在简单文档和正式报告中 2.2 四周型环绕 文本中放置图形的位置会出现-一个方形的“洞” ，文字会环绕在图形周围。使文字和图形之间产生间隙，可将图形拖到文档中的任意位置。...通常用在带有大片空白的新闻稿和传单中 2.3 紧密型环烧 实际上在文本中放置图形的地方创建了一个形状与图形轮廓相同的“洞”，使文字环绕在图形周围。...2.4 衬于文字下方 嵌入在文档底部或下方的绘制层，可将图形拖动到文档的任何位置。通常用作水印或页面背景图片,文字位于图形上方。...2.5 浮于文字上方 嵌入在文档上方的绘制层，可将图形拖动到文档的任何位置,文字位于图形下方。通常用在有意用某种方式来遮盖文字来实现某种特殊效果。...结语 今天简单介绍了一下插入图片，及其插入的环绕效果设置，这样以后在工作和学习中就能使文档更加美观，下期我们接着介绍文档中的图片处理其他技术。 编辑：玥怡居士|审核：子墨居士
1) 、文本选择颜色 当你访问网站或阅读博客时，你经常使用鼠标选择文本，它只是蓝色选择白色文本。你可以通过自定义文本颜色选择使你的网站脱颖而出。 ? 使用选择伪元素为你网站上的文本提供个人风格。 ?...2) 、首字下沉 在一些专业的文章/报纸上，我们经常会看见首字母下沉这样的样式外观，一般都是在文本的第一个字母上使用首字下沉。首字下沉是那个大写字母，文字环绕在它周围。 效果如下图： ?...你可以将 CSS scroll-behavior 属性与 html一起用作选择器，以启用整个 HTML 页面的平滑滚动。 ?...4) 、输入插入符号颜色 你可以更改输入字段插入符号的颜色以使其更加个性化。 ? 你只需要为这个效果使用 caret-color 属性！ ?...6) 、文本居中显示 有时将 div 元素居中可能令人生畏，但你只需几行 CSS 即可将任何 div 居中。 ?
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行，内联元素不独占一行； CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位...需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。...而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。...当把box3样式改为：.box3{background-color: aqua;}时，可以看到box3中间的文本依然为box1 box2让出了位置。 ?...可以看到，box3中的文本不见了，被box1遮盖了，也可以反映出，box3的定位也是不受到绝对定位的box1 box2的影响，而且box3的文字也没有为box1 box2让出位置。
float 属性用于定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。...使用 float 属性后 元素会跳出当前区域，下面的元素会挤占上来，所以需要清除浮动，清除 float 浮动常用的方法有以下几种： 1、同辈元素清除浮动：clearfix 有以下两点需要注意： 清除浮动元素本身不能为浮动元素...; 清除浮动的元素必须是块级元素; HTML代码如下： li1 li2 li3 style部分代码，先设置浮动元素，给一个宽高和边框，方便观察： .fl{ float: left...2、父辈元素清除浮动，常用的方法有两种： 第一种：给父元素设置 overflow:hidden 或者 auto。
-- 补充内容 1、正常文档流：将元素（标签）在进行排版布局的时候按从上到下，从左到右的的顺序排版的一个布局流。...-- float 1、float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。...浮动元素会生成一个块级框，而不论它本身是何种元素。 2、left：元素向左浮动，如果前一个元素是正常文档流元素，保持垂直距离，如果是脱离文档流，紧跟在其后。文本内容不会被覆盖。...3、right：元素向右浮动，如果前一个元素是正常文档流元素，保持垂直距离，如果是脱离文档流，紧跟在其后。文本内容不会被覆盖。 4、none：默认值。...元素不浮动，并会显示在其在文本中出现的位置。 5、inherit：规定应该从父元素继承 float 属性的值。
什么是css盒子模型 可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content...盒子的内容，显示文本和图像。 padding：内边距。清除内容周围的区域，内边距是透明的。 border：边框。围绕在内边距和内容外的边框。 margin：外边距。清除边框外的区域，外边距是透明的。...根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。但 IE5 和 6 在怪异模式中使用自己的非标准模型。...解决IE8及更早版本不兼容问题可以在HTML页面声明即可。...在使用doctype声明情况下，设置属性box-sizing:border-box就可以定义使用ie盒模型。
如果想要定义表格标题的位置，在table或caption这两个元素的CSS中定义caption-side属性，效果是一样的，一般情况，我们只在table中定义就行。...表格边框间距 语法：boreder-spacing:像素值; 图片对齐 图片水平对齐 在css中使用text-align来实现图片的水平对齐，其属性值跟文本的一样。...图片是在父元素中进行水平对齐，因此我们是在图片的父元素中定义。 img的父元素是div，因此想要实现图片的水平对齐，就应该在div中定义text-align属性。...middle 中部对齐 baseline 基线对齐 bottom 底部对齐 W3C（Web标准制定者）对vertical-align属性的定义是极其复杂的，其中有一项是“vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式...以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动，定义之后，浮动元素会生成一个块级框(inline-block)，而不论它本身是何种元素。
浮动 CSS 属性 , 可以实现 : 元素标签 不再受 标准流 控制 ; ( 块级元素 , 行内元素 , 行内块元素 的布局方式 ) 元素标签 可以 放置在指定的位置 , 靠左 或 靠右 ; CSS..., 与文字地位相同 , 无法实现文字环绕图片效果 ; 3、左浮动的效果 左浮动效果 , 可以让图片浮动在左上角 , 文字环绕在图片周围 ; 设置左浮动效果 : /* 左浮动效果 */ float:...left; 展示效果 : 4、右浮动的效果 右浮动效果 , 可以让图片浮动在右上角 , 文字环绕在图片周围 ; 设置右浮动效果 : /* 右浮动效果 */ float: right; 展示效果 :...DOCTYPE html> 浮动效果 展示效果 :
文字环绕图片的方式在实际页面中的应用非常广泛，如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。 在CSS中，使用浮动属性float可以设置文字在某个元素的周围，它能应用于所有的元素。... 在浏览器预览效果如下： image.png 分析： 细心的读者可能会发现，文本的顶部与图片的顶部怎么不水平对齐，就像下图那样呢？...image.png 这是由于在某些浏览器下，p元素具有默认样式，就像strong元素默认加粗一样。要实现上图那样的效果，这就要去除元素的浏览器默认样式。...对于如何去除元素的浏览器默认样式，我们可以在“CSS进阶教程”的“CSS reset”这一节学习到。现在大家不需要理会，循序渐进地跟着学习就行了。...2、设置图片与文字的间距 文字紧紧环绕在图片周围，如果希望图片本身与文字有一定的距离，只需要给标签添加margin属性即可。
本文节选自霍格沃兹测试开发学社内部教材 CSS 就是层叠样式表（Cascading Style Sheets），定义如何显示 HTML 元素。HTML 元素的样式通常存储在层叠样式表中。...为什么要使用CSS 使用 CSS 可以定义 HTML 元素显示的样式，其实是为了解决内容与表现分离的问题。通过 CSS 可以让相同的一个页面在不同的浏览器当中呈现相同的样式。....png] 盒子模型 所有 HTML 元素可以看作盒子，在 CSS 中，“box model”这一术语是用来设计和布局时使用。...CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素。它包括：边距，边框，填充，和实际内容。...Border（边框）：围绕在内边距和内容外的边框。 Padding（内边距）：清除内容周围的区域，内边距是透明的。 Content（内容）：盒子的内容，显示文本和图像。
DOCTYPE html> Title ...-- 文本属性 1、背景颜色 background-color 2、文本居中（位置）text-align 3、行高 line-height 4、字母间距 letter-spacing...-- 外边距和内边距 1、margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。...4、margin:10px; ---------------------上右下左 2、padding：用于控制内容与边框之间的距离； 3、Border(边框)：围绕在内边距和内容外的边框...-- Content 1、样式在head添加 --> 百度
不会像行内块一样被当做文本处理（没有行内块的空白问题）。...浮动相关属性 实际应用示例 示例1：图片与文字环绕 假设你有一个博客文章页面，需要在文章中插入图片，并让文字环绕在图片的周围。你可以使用浮动布局来实现这一效果。... 图片右侧的文字内容会环绕在图片的周围。... 在这个示例中，img元素被设置为浮动到右侧，文章的正文内容会环绕在图片的左侧。 示例2：多列布局 在一些新闻网站或博客中，你可能需要将文章分成多列显示。...通过媒体查询，你可以在小屏幕上调整这些元素的宽度和布局，使其在小屏幕上显示为单列。
所有 HTML 元素可以看作盒子，在 CSS 中，Box Model 这一术语是用来设计和布局时使用。...CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，每个盒子由四个部分（或称区域）组成：内容（Content），内边距（Padding），边框（Border），外边框（Margin）。...盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型（Box Model）： ?...CSS 盒模型不同组成部分的说明： Content（内容） - 由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。...即围绕在内边距和内容外的边框。 Margin（外边距） - 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。
浮动元素会脱离文档流但不会脱离文本流，当浮动时其不会影响周围的盒子模型，但是文字会环绕在浮动元素周围，可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层。...文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。 文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。...脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 文字环绕效果 可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层，当元素浮动时，其脱离文档流不脱离文本流，所以浮动元素的渲染与文字的渲染是一并渲染的，浮动元素会将文字元素挤开，呈现文字环绕浮动元素的效果...> 虽然float最初的设计就是用来实现文字环绕效果的，在某些使用float的布局下若是不想触发文字环绕效果，可以通过触发BFC来避免文字环绕。
当你需要内容在形状周围流动时，使用 shape-outside 属性。你必须向左或者向右浮动元素，以便 shape-outside 产生效果。...img { float: ; shape-outside: ;} 注意：当有流动的内容围绕在形状的周围时，请注意不要让任何文本行变得太窄而只能容纳一两个单词。...这五个设计系列的 HTML 只包含标题和主要元素、图形、图像，并且通常不会比下面的更复杂： Mini Cooper <...在印刊设计中经常看到内容在形状周围流动，在 CSS Shapes 之前，这在 web 上是不可能实现的。 即使 CSS Grid 只涉及到列和行的设置，也没有理由不使用它来创建动态对角线。...由于这些汽车的图像没有透明的 alpha 通道，因此，在形状周围的流动文本需要包含仅包含 alpha 通道信息的第二个图像。 ?
更准确地一点说，是一个元素脱离文档流（out of normal flow）之后，其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。...但是有趣的是，h2和p里面的文本（属于content flow）却都看到了这个被float的div，在自己的盒子里往右推，飘到了蓝色div的边上。...总结： 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。...需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。...而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。 参考
盒子模型 在css中，width和height指的是内容区域的宽度和高度，增加内边距， 边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。...以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。...如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。...其他浮动元素会碰到它的边框停下。 这就是文字环绕图片的原理。 浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素，它将塌陷具有零高度。...你可以按以下方法处理： 在浮动元素后加个div设置clear: both; height:0,overflow:hidden 使用clearfix; 设置父元素浮动; 四.制作弹出层 需要的知识点：
实际开发中常用浮动来做什么 3、 提问，为什么要清除浮动 4、 回答，如何清除浮动以及常用的几种方法 5、 结论，得出本文认为最好用的方法 三、 正文 1、 浮动本来的意义 浮动的意义原本仅是用来让文字环绕在图片周围而已...--让文字环绕在图片周围（关于为什么文字不会插入浮动元素下面在网上也有一些讨论，大家可以去搜索一下，本文在此就不做更详细的解释了）。...PS: 如果想让文字也插入到浮动元素下面，可以通过设置绝对定位来实现。 // html代码 !...我是跟在ul后面的新div 效果： ul后边的div元素确实可以在浮动元素下边排列，并且设置margin、padding等也是针对浮动元素的下边框。...(3) 采用伪类方法，在最后一个浮动元素的后边，添加clear:both。
定位是什么 所谓定位，简单来说就是通过CSS样式属性设定HTML页面元素在运行时显示的位置。 定位的基本思想很简单，它允许定义元素相对于父级元素、另一个指定元素或者当前浏览器窗口应该显示的位置。...文档流 文档流是HTML页面中元素在排列时所占用位置的一-种规则。理解好文档流的概念有助于学习CSS样式中的浮动和定位两块内容。...将HTML页面中的元素自，上向下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。 文档流是HTML页面的底层结构，HTML页面创建的元素默认都在文档流中。...浮动 float属性指定一个 元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该属性具有以下几个值: . none:默认值，表示元素不浮动。...，为下一个兄弟元素设置为浮动，下一个兄弟元素不会超过上一个兄弟元素的位置 文本与浮动的元素 文本内容与浮动的元素之间，文本内容不会被浮动的元素所覆盖，而是环绕在浮动元素的周围 清除浮动 clear属性设置元素是否显示在其之前元素的下方
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
