给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“.container是可以设置一个高度即可解决覆盖问题...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。...，并且设置标签对象的left、top等值是不起作用的的。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
使用 max-width/max-height 解决图像溢出盒子 例如：下述有两个盒子长宽均为 200 像素，尝试在示例中的 元素加入 max-width: 100%，你会看到，左边那张小的图像没有变化...属性来设置图像溢出时的处理。...; li> li> repeat-y li> li> repeat-x, repeat-y..., 值得注意的是当 background-attachment 属性为 fixed 时，该属性将被忽略不起作用。...温馨提示: 当 clip-path 属性不为 none 时，会创建新的层叠上下文，就像 CSS opacity 的值不为 1 时那样。
li>奔驰li> li>奥迪li> ul li{ color:green; } 子代选择器：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用...所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin），边框（border...弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 弹性盒子只定义了弹性子元素如何在弹性容器内布局...此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象 当所有元素同时浮动的时候，会变成水平摆放，向左或者向右 当容器不足以横向摆放内容时候，会在下一行摆放 清除浮动...，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动 z-index属性设置元素的堆叠顺序。
父级 子级{属性:属性值;属性:属性值;} .class h3 {color:red;font-size:16px;} 当标签发生嵌套时，内层标签就成为外层标签的后代。 子孙后代都可以这么选择。...：内容的宽度和高度 + 内边距 + 边框 IE盒子模型 IE 盒子模型的 content 部分包含了 border 和 pading 当设置为box-sizing: border-box时，将采用怪异模式解析计算...1.3 overflow 溢出 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...，而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）...滑动门 6.1 滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？
，当边框是正方形时，设置半径是边框的一半可以得到一个圆形，如果边框是长方形则可以得到一个椭圆。...1.8float（浮动） 在css中任何元素都可以浮动，浮动的特点： 浮动的框可以左右移动，直到碰到网页的边框或者另一个浮动的框，浮动的框可以覆盖固定的框，而且浮动的框会把原来框占有的位置让出来。...（需要说明的，浮动的框可以覆盖固定的框，但是覆盖不了固定框的文本内容，这些文本内容会被挤出到浮动框下方显示）（另外本人试的浮动的p标签改成的块标签无法覆盖固定的块标签div，但是浮动的div可以。）...浮动常用的三种方式：l left 向左浮动 right 向有浮动 none 默认值，不浮动 1.8.1浮动带来的影响 会使浮动框的父标签塌陷，就是当边框是父标签的时，如果子标签设置为浮动，则外边框就会塌陷成一条线...溢出发生的原因是标签的文本内容太多，标签的尺寸放不下这么多内容，导致标签文本内容的溢出。
然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。 我们只要给对应的标签设置字体颜色就可以覆盖掉它继承的样式。...有一些属性不能被继承，如：border，margin，padding，background等。...） 6.1 static static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。...6.4 fixed（固定） fixed：对象脱离正常文档流，使用top、right、bottom、left 等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...，数值大的会覆盖在数值小的标签之上，z-index 仅能在定位元素上凑效。
，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏 （1）元素显示使用display:block属性，隐藏使用display:none属性 2、二级菜单显示在一级菜单的右侧 （1）给一级菜单和二级菜单共同的父元素设置相对定位...4、一级菜单的文字和二级菜单的文字垂直居中显示 5、一级菜单的每一项和二级菜单的每一项有下边框，边框为点线（dotted） 6、一级菜单的最后一项和二级菜单的最后一项没有下边框（可以使用li:last-child...规范 1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字、背景的颜色不统一要求 2、要求HTML代码和CSS代码书写、命名符合规范 整体 1、鼠标移入一级菜单时，二级菜单显示，鼠标移出一级菜单时...，二级菜单隐藏 2、二级菜单显示在一级菜单的右侧 一级菜单 1、一级菜单的文字水平居中显示 2、一级菜单的文字垂直居中显示 3、一级菜单的每一项有下边框，边框为点线（dotted） 4、一级菜单的最后一项没有下边框...二级菜单 1、二级菜单的文字水平居中显示 2、二级菜单的文字垂直居中显示 3、二级菜单的每一项有下边框，边框为点线（dotted） 4、二级菜单的最后一项没有下边框 效果 <!
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。...，然后把标签的高度和宽度设置的比较小的时候，文字就溢出了： 然后我们就可以设置一下，如果文字溢出了，溢出的部分怎么办，设置一个overflow为hidden： 再看效果，溢出的文字就不显示了...fixed（固定）不管页面怎么动，都在整个屏幕的某个位置 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动...bottom: 20px; #距离窗口下边框的距离 /*height：20px； line-height：20；当line-height等于height的值的时候，就能实现一个文本居中的效果...综合示例 顶部导航菜单 <!
-- 在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开 main后的footer元素在页面布局时无法在main后正常显示（如下图） -->...相对标签原来的位置做定位 absolute（绝对定位）相对已经定位过的父标签做定位(没有则参考body标签)，参考小米官网导航条内购物车 fixed（固定定位）：相对浏览器窗口做定位，固定不动，参考小米官网右边回到顶部...overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） 溢出问题 解决办法 /*默认值*/ div { width...层级属性z-index 用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效，数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方） 通俗理解为，...’三明治结构‘，浏览器平面并不是二维坐标的而是三维坐标； z-index属性值相同时，遵循后来者居上的原则，后面的元素会覆盖前面的元素！
然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。 我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。...，并且设置标签对象的left、top等值是不起作用的的。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...，数值大的会覆盖在数值小的标签之上。...综合示例 顶部导航菜单 <!
溢出(重点) 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。...，而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...） 注意： 一定要首先强制一行内显示，再次和overflow属性 搭配使用 ?...滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ ?...我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 为了照顾兼容性 低版本的浏览器，加上 font-size
清除溢出（超出div大小的部分） position 定位 对文档流的影响 z-index 层级 opacity 标签整体透明度 去掉li 前面的标识 文本垂直居中 单行文本居中 作业案例 关于自适应（...不需要了解） 控制标签元素样式 小心得： 样式有继承(遗传)效果（子元素将继承父元素的样式，如果子元素单独设置了该样式，那么子元素的样式就是子元素单独设置的样式） （可以做统一设置） 注意在调样式时...overflow 清除溢出（超出div大小的部分） div{ overflow: hidden; overflow: auto; 自适应，有个滚动条可以看 overflow:...scoll; 有水平和垂直滚动条 overflow: visible; 默认值，不会清除溢出，直接显示 overflow-x: auto; 可以设置水平的溢出 overflow-y...相对定位 相对于标签自身原来的位置做一个定位 绝对定位 相对于已经定位过的父标签做一个定位（购物车展开）*** 当只给你一个父标签的属性让你做定位时，就用绝对定位 固定定位 相对于浏览器窗口
关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...，并且设置标签对象的left、top等值是不起作用的的。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 示例代码： <!...综合示例 顶部导航菜单 <!
溢出(重点) 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...，位于边框边缘的外围，可起到突出元素的作用。...，而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）...滑动门 先来体会下现实中的滑动门,或者你可以叫做推拉门： 滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多..., 做法如下： 我们用css 边框可以模拟三角效果 宽度高度为0 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了 为了照顾兼容性 低版本的浏览器
/* 在li>标签得联合作用下的样式 */ li strong { font-style: italic; font-weight: normal; } id 选择器 id 选择器可以为标有特定...background-attachment 背景图像是否固定或者随着页面的其余部分滚动，防止滚动时图形消失 fixed。 background-color 设置元素的背景颜色。...z-index 属性 设定了一个定位元素及其后代元素或 flex 项目的 z-order，当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。...overflow 属性 overflow:hidden——溢出,坍塌,清除浮动 1. 隐藏溢出 当父div拥有固定的高度时 2. 清除浮动 当父元素的高height:auto时 3....该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 （6）align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
如何插入样式表 插入样式表的方法有三种： 外部样式表 内部样式表 内联样式 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。...注意：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。...重叠的元素 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） 一个元素可以有正数或负数的堆叠顺序： img {...设置到元素的宽度将防止它溢出到容器的边缘。...a href="#contact">联系li> li>关于li> 全屏高度的固定导航条 接下来创建一个左边是全屏高度的固定导航条
# 自适应 # media 默认img的标签，有一个1px的边框 img{ border: 0; } css盒子模型 盒子模型内容范围包括margin...你记不记得很多的网站都是左边一个菜单栏，右边一堆的其他内容啊 ? Example1 的值。 overflow溢出属性 我们在一个标签里面写了一堆的文字，然后把标签的高度和宽度设置的比较小的时候，文字就溢出了： <!...# overflow（水平和垂直均设置） # overflow-x（设置水平方向，只出现x轴的滚动条） # overflow-y（设置垂直方向，只出现y轴的滚动条） 圆形图像示例 固定）不管页面怎么动，都在整个屏幕的某个位置 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动
浮动和定位 定位 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 通过使用 position 属性，选择不同类型的定位。...相对定位:position: relative; 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。...固定位置:position:fixed; 直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化 浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止...>菜单1li> li>菜单2li> li>菜单3li> li>菜单4li> li>菜单5li> 时，函数会停止执行，并返回指定的值。
/* 在内容后加 */ } 伪类 一、链接伪类选择器： :hover 鼠标悬停状态 :visited 鼠标点过之后状态 :link 初始状态 :active 鼠标点击时的状态...例如： 二、焦点伪类选择器： 常用于form表单： 作用：鼠标定位时的状态 input:focus{ background-color: pink; } 三、...四、溢出部分显示效果： 属性：overflow： 属性值 效果 visible 默认值，溢出部分可见 hidden 溢出部分隐藏（⭐常用） scroll...相邻表格边框进行合并，得到细线边框效果。...通过PxCook测量小图片左上角坐标，分别取 负值 设置给盒子的background-position：x y 精灵图的标签都用行内标签 移动背景图位置：backkground-position
：块元素都可以设置宽和高，行内元素设置的宽和高不起作用，一般不设置高度，让内容自动撑出来 案例： ?...4.列表属性 说明：对ul、ol、li、dl、dt、dd、进行样式的修改 属性名 描述 属性值 List-style-type 列表的符号样式类型 None（无） List-style-image.../li01.jpg) List-style-position 列表符号的位置，只对li用 Inside（内）、outside（外） List-style 把三个属性的值都写到一个属性中 None...List-style-position 列表符号的位置，只对li用 Inside（内）、outside（外） background 简写形式 颜色、图片 、平铺方式、 定位、固定，其中的选项可能没用...精灵图： 说明就是吧很多小图片放入一个大的图片背景中，这个图就称为“精灵图” 在制作网站时只要精灵图必须是背景才能设置 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
云直播
腾讯会议
