css
文章平均质量分 68
micoria
这个作者很懒,什么都没留下…
展开
-
绝对定位、固定定位、相对定位分别和浮动使用的影响
今天我们讲一下 一个盒子使用绝对定位和浮动会有什么影响。当一个盒子在另一个盒子的下边重叠,那么就会想到定位,这时就要想,是要使用绝对定位和相对定位。效果如图一:下面分为三种情况如果使用绝对定位,和浮动的效果,如图二咱们看一下代码:<style> .box1 { width: 100%; height: 50px; } .box1 div { float: left原创 2021-02-04 18:26:26 · 2224 阅读 · 1 评论 -
如何将对象显示和隐藏?display、visibility和overflow的区别?应用?
显示和隐藏1. display 显示隐藏(重点){display: none}: 隐藏对象{display: block} :显示对象。注意:并不是只可以进行显示模式的转换。隐藏元素,并没有删除元素。不再占有原来的位置。2. visibility 可见性对指定的一个元素进行隐藏。{visibility: visible;} 元素可视{visibility: hidden;}元素隐藏隐藏元素,继续占有原来的位置。3. overflow 溢出隐藏(重点)语法:{ overflow: vi原创 2021-01-21 20:37:26 · 386 阅读 · 0 评论 -
绝对定位、相对定位、固定定位特点
一、定位1、定位的定义某个元素可以自由地在盒子上面移动,并且可以压着其他元素当滚动窗口时,某个元素可以固定在页面上可以让盒子自由的在某个盒子上进行移动并且可以压住其他盒子,或者可以在屏幕上固定在页面上。2、组成定位=定位模式+边偏移定位模式(position)制定一个元素在文档中的定位方式定位模式描述static静态定位relative相对定位absolute绝对定位fixed固定定位边偏移(方位名词)据定了元素的最终位置原创 2021-01-21 20:35:54 · 4733 阅读 · 0 评论 -
常见的布局技巧~(margin负值的应用、行内块巧妙应用以及三角的强化)
四.常见的布局技巧1.1 margin负值运用 商品的显示框 1.解决盒子边框重合 margin:-1.....; 2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con原创 2021-01-21 20:32:29 · 228 阅读 · 0 评论 -
CSS三角形、vertical-align、如何取消表单的轮廓线,单行、多行文字溢出如何操作
三、三角形网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标。一张图, 你就知道 CSS 三角是怎么来的了, 做法如下: div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; }我们用css 边框可以模拟三角效果宽度高度为0我们4个边框原创 2021-01-21 20:31:21 · 296 阅读 · 0 评论 -
CSS3浮动的本质、如何设置浮动、清除浮动的几种方法
浮动1、传统网页布局的三种方式本质:用css摆放盒子。将盒子放到相应的位置。普通流(标准流/文档流)浮动定位2、标准流3、为什么选择浮动?浮动最典型的应用:可以让多个块级元素进行一行排列网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动4、浮动浮动原理:float属性用于创建浮动框,将其移动到一边,直到左边缘或者右边缘碰到包含块或另一个浮动框的边缘。float:left:左浮动float:right右浮动5、浮动特性元素加了浮动之原创 2021-01-12 16:51:52 · 733 阅读 · 0 评论 -
用列表和浮动如何实现导航栏nav
示例:<style> * { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-decoration: none; } body {原创 2021-01-10 22:30:40 · 615 阅读 · 0 评论 -
CSS盒子模型(border、padding、margin、content)
文章目录盒子模型1. 网页布局三大核心2. 组成2.1 边框(border)2.2 内边距(padding)2.3 外边距(margin)**2.水平方向居中****3. 垂直居中**2.3.1外边距合并2.3.2外边距塌陷2.4 影响盒子大小属性盒子模型1. 网页布局三大核心盒子模型、浮动、定位2. 组成border 、margin 、padding 、 content :边框,内边距,外边距,实际内容2.1 边框(border)语法:border : border-weight | b原创 2021-01-10 22:13:37 · 879 阅读 · 0 评论 -
CSS的显示模式(块元素、行内元素,行块级元素)
CSS的显示模式显示模式的定义:元素以什么方式进行显示。作用:不同地方会用到不同类型的标签,了解他们会更好的布局网页。元素显示模式的分类一. 块元素特点:内容独占一行宽、高、内边距、外边距都可以设置默认宽度是父级宽度的100%它是一个容器盒子,里面可以放块级元素或者行内元素‘’最典型的块级标签例如:‘,,,,,~’注意:文字类块级元素标签不能嵌套块级元素标签.( 例如:‘,~’)二. 行内元素(内联元素)特点:和相邻行内元素在一行上,一行可以显示多个宽、高、内边距、外原创 2021-01-08 15:14:12 · 833 阅读 · 1 评论 -
CSS三大特性(层叠性、继承性、优先级)
文章目录CSS三大特性1. 层叠性2. 继承性3. 优先级CSS三大特性1. 层叠性选择不同的样式,主要解决样式冲突的情况样式冲突,就近原则样式不冲突,不会层叠2. 继承性子标签继承父标签的某些样式。如文本色号或者字体样式。简单理解:子承父业子元素可以继承的样式,例如文字相关的样式。例如:text- 、font- 、 line- 这些元素开头可以被继承以及 color属性visibility 可见性行高(line-height): font: 12px/1.5 "M原创 2021-01-10 22:02:19 · 139 阅读 · 0 评论