大小： utf-8>gbk 性能： uft-8<gbk 约定：将来我们在整个学习过程中都用utf-8; utf-8存储一个汉字占3个字节， gbk存储一个汉字上2个字节 标签的分类： 双标签：有开始有结束...内嵌 1.可以在一行显示 2.不支持宽高，不支持上下的margin和padding等样式的问题 3.宽度由内容撑开 4.代码换行被解析 那如何判断他们是块状还是内联？...:visited 伪类将应用于已经被访问过的链接，与:link互斥。 :hover 伪类将应用于有鼠标指针悬停于其上的元素。...:active 伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。...它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
创建回应式表格：在荧幕宽度 小于 992px 时会创建水平卷轴，如果可视区域宽度 大于 992px 则显示不同效果(没有卷轴)。...需要将 .active 添加到其中一个轮播元素上，否则轮播将不可见。另外一定要在 .carousel 上为控制项元件设置一个唯一的 id，特别是当你在一个页面上使用多个轮播的时候。...from: 当前对象的索引 to: 下一个对象的索引 所有轮播事件都在轮播本身(即 )下被触发。...内联表单需要在 元素上添加 .form-inline 类 所有内联表单中的元素都是左对齐的 在荧幕宽度 小于 576px 时为垂直堆叠，如果荧幕宽度 大于等于 576px 时表单元素才会显示在同一个水平线上...，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。
::before 为父级元素定义一个伪元素 padding-top:100%; 设置伪元素的内上边距，这里的百分比的值是按照宽度计算的，所以会呈现为一个响应式的元素块。...可在 CodePen 上查看真实效果和编辑代码 说明 ::after 定义一个伪元素 position:absolute 使伪元素脱离文档流并相对于父级定位 width:100%andheight:100%...可在 CodePen 上查看真实效果和编辑代码 说明 伪类：：focus-within 将对应的样式应用于父元素（任何子元素被聚焦）。例如，表单元素内的输入元素。...position:relative 设置父元素为相对定位 ::after 定义一个伪元素 position:absolute 将伪元素脱离文档六，并将其相对于父元素定位 width:100% 确保伪元素和父元素的宽度一致...:hover::after 然后使用scaleX（1）将宽度转换为100％，然后将中心点更改为左下角，允许它在悬停时从另一个方向转换出来。
一、大结构上的导航栏和内容区域两栏布局 首先我们从 大结构上 说起，因为我发现很多网站从整个首屏的大结构上都是这种两栏布局： 旁边是侧边栏导航，中间是大块内容区域。...width：100%的元素使用了padding后的，宽度会增大。使用box-sizing把padding的宽度算到width中。 main伪元素after清楚浮动，解决父元素塌陷问题。...css关键思路： main依旧应该负责总宽度和水平居中之类的布局，这里因为这一小块是嵌套在其他结构里的。就没有什么设置。 nav样式上在右边，但是结构上被放到了上边。进行右浮动。...关键点是左边absolute“漂浮”起来（父元素需要relative限制一下） 然后右边自适应占据整个父元素的宽度，并用margin-left把左边图片遮挡的部位空出来。 ? ?...对了，说到伪元素，问一个很基础但是很多人都混乱的问题： 请问什么是伪元素，什么是伪类？伪元素的权重高还是伪类的权重高？ 这是一个前端老阿姨我亲身经历的题。虽然简单的不像话，但是我摔得也很不像话。
它在什么情况下才能生效？ BFC(块格式化上下文) 常见布局的实现 1. 伪类和伪元素 为什么引入? css引入伪类和伪元素概念是为了格式化文档树以外的信息。...在div的width为固定的情况下，设置height为0，使内容自然溢出，再通过设置padding-bottom使元素有一定高度。...； line-height 百分比 可以直接查看MDN[7]上的相关解释： line-height 属性被指定为以下任何一个： 一个 ：该属性的应用值是这个无单位数字乘以该元素的字体大小...清除浮动常用的四种方式： 父级div定义height 额外标签法：在有浮动的父级元素的末尾插入了一个没有内容的块级元素div 并添加样式clear:both。...元素浮动， right元素设置 width: 100%; padding-left:left元素的宽度; 右边宽度固定, 左边宽度自适应 左右都浮动,左边自适应元素设置外层div 100%宽度, 这样就会独占一行
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起方便。...Collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用。 如果此值被用在其他的元素上，会呈现为 hidden。...解释一下这 2 个伪元素的作用 单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。 ::before 就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。...起初，伪元素的前缀使用的是单冒号语法，但随着 Web 的进化，在 CSS3 的规范里，伪元素的语法被修改成使用双冒号，成为 ::before、 ::after 。...---- 有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另一个填满剩下的高度 ？
利用 clear:both 清除浮动 1.clear:both + 多余的标签 `` 将以上div放在浮动元素父级的内部 ``` css .clear1...与1.相比，是将伪类去替代div，感觉本质还是没变 .Clear2:after{ content:'...####什么是BFC BFC（Block Formatting Context）直译为“块级格式化范围”，是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用...自身对外界表现正常 不会覆盖float元素，并且自适应的占据这一行剩下的宽度 ####如何触发BFC 使用 float，并且值不为 none 使用 absolute 定位的元素 使用 overflow,...在使用 auto 或者 hidden 时，需要保证容器的高度为自适应(即不显式定义height)；此外浮动元素的总宽度应该始终小于容器的宽度。
18、margin和padding分别适合什么场景使用？ 19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 20、对line-height是如何理解的？...单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。...起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。...height: 1px; transform: scale(0.5); 30、html元素的id跟class什么区别 id和class是网页中两个通用属性，他们协同工作使整个页面丰富多彩，当我们为一个元素定义样式时...来控制元素时就会出错 6、在实际应用中，class常被用到文字版块和页面修饰上，而id多被用在宏伟布局和设计包含块，或包含框的样式。
我把鼠标悬停在按钮上，光标仍然是一个指针，这很好。不过，我也可以选择文本和悬停时，有一个文本光标!如果使用了正确的元素，就不会发生这种情况。 ?...这样，问题得以解决，整个复选框或单选按钮都是可单击的，如下图所 ? 侧边栏 对于带有类别的页面，有时我会注意到列表链接没有扩展到其父页面的整个宽度。 也就是说，可点击区域仅在文本上，如下图所示： ?...解决方法： 删除元素的 padding，并将其移动到元素 通过添加display: block使a标签的宽度等于其父链接的宽度。...使用伪元素来增加可点击区域 仅通过改变元素的宽度和高度或使用padding，并不总是能够使可点击区域变大，这时候就需要伪元素救场了。...这个想法是，伪元素属于其父元素，因此当我们创建具有特定宽度和高度的伪元素时，它将充当其父元素的单击/触摸/悬停区域。
4、边距： 边距是元素边界之外的空间。它在相邻元素之间创建了一个空间。...CSS calc() 函数示例： 计算 HTML div 元素的宽度。....div { width: calc(100% - 100px) } 上述 div 的大小将等于 div 的父级的计算宽度减去 100px。 其他需要查看的重要 CSS 属性。...当用户单击或点击元素或使用键盘上的 tab 键选择元素时触发。 它类似于 focus 伪类，但不同之处在于如果该元素中包含的元素获得焦点，则不会触发焦点。...Codepen 上的焦点伪类示例：https://codepen.io/nasyxnadeem/pen/JjOZqOG Codepen 上的 focus-within 伪类示例：https://codepen.io
注意：这里所说的少创建元素，实际上并没有少创建，添加的伪元素也是元素，只不过没有写在HTML文档中而已。...最简单的初始化方法就是：*{ padding：0；margin：0；} 11、如何居中div？如何居中一个浮动元素？ 确定容器的宽高，例如宽400px、高200px的div.设置层的外边距。...浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止。要想使元素浮动，必须为元素设置一个宽度（ width）。...IFC中的线框一般左右都贴紧整个IFC，但是会被foat元素扰乱。同一个IFC下的多个线框高度不同。...伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元可以是任意数量的。伸缩单元内和伸缩容器外的一切元素都不受影响。简单地说， Flexbox定义了伸缩容器内伸缩单元的布局。
5、如何居中div？...水平居中：给div设置一个宽度，然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 让绝对定位的div居中 div { position...（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）...3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; 4）通过content:"."...fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是在移动这个所谓的viewport， 原来的网页还好好的在那，fixed的内容也没有变过位置， 所以说并不是iOS不支持fixed，只是fixed
伪类：以冒号为前缀，被添加到一个选择器末尾的关键字，样式在特定状态下才被呈现到指定的元素 CSS 2.1 E:first-child 匹配父元素的第一个子元素 E:link 匹配所有未被点击的链接...em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值 rem：相对单位，可理解为"root em...带有 clear属性的空元素方法： clearfix 方法：结合 :after 伪元素和 IEhack 触发 hasLayout 给父元素设置...transform 使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。因此 translate() 更高效，可以缩短平滑动画的绘制时间。...多数显示器默认频率是 60 Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms # 超链接访问过后hover样式就不出现的问题是什么？如何解决？
比如，我想让元素的宽度是其父元素的50％，或者元素背景变为红色。 一个 选择器，它选择元素，这（些）元素是你想应用这些最新的属性值于其上的元素。...1）伪类 一个 CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类...你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。...百位：在整个选择器中每包含一个ID选择器就在该列中加1分。 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。...个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。 下表显示了几个示例。试着通过这些，并确保你理解他们为什么具有我们给予他们的专用性。
3) 3、CSS层叠样式默认规则后者覆盖前者，特殊情况除外—!important优先级最高，高于上面一切。...4）行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效,margin上下无效，padding上下无效。...盒子模型（它的整个宽度包括（内容宽度 + border宽度 + padding宽度 + margin宽度），整个的宽度充满父容器） 例子：padding，border和margin，即内边距、边框、外边距...他们三者就构成了一个“盒子”。就像我们收到的快递，本来买了一个小小的iphone，收到的确实那么大一个盒子。...，如果找到一个设置了position:relative、absolute、fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位 4）fixed：fixed元素的定位永远是相对于浏览器边界的
无论你是指向一个、.class还是#id，选择器都是你的样式声明的信使，确保正确的元素被"标记"。让我带你回到CSS的早期时代。那是一个网页设计新鲜、原始，而且在很多方面都有限制的时代。...媒体查询的灵活性 媒体查询是CSS的一个关键优势，它提供了内置的响应式设计能力。媒体查询帮助你针对不同的设备或屏幕宽度应用不同的样式。...过去，更新CSS值是一项手动、耗时的工作，静态CSS的时代已经过去了。现在，我们的工具包中有了CSS变量，可以在整个样式表中存储和重用特定的值。这些变量确保一致性，并使更新变得轻而易举。...justify-content: space-between;让我们的项目之间保持良好的间距。然后我们使用flex: 1;给项目添加了相同的宽度，填满了整个容器的空间。简洁而简单。...根据后代元素来设置样式的一种方法。基本上，你可以根据子元素来应用样式，这意味着它可以作为一种理想的父选择器。然而，你也可以在父元素内部对子元素进行样式设置。
一个更好的解决方案是在不改变按钮原始尺寸的情况下增加其可点击区域。具体来说：我们可以使用伪元素来增加一个元素的可点击区域。 例如，这里有一个按钮。...p> 这个容器有一个固定的宽度和高度，包裹着名字和介绍。...为了防止这个问题，使我们的页面更加健壮，我们可以设置图片的宽度和高度。这样，我们就不必担心后端返回的图片的大小。...video>，应该如何调整大小以适合其容器。...如果该值是 cover，那么被替换的内容的大小将保持其长宽比，同时填充元素的整个内容框。如果对象的长宽比与它的盒子的长宽比不一致，那么该对象将被剪掉以适配。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。...也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!...图层菜单---新建基于图层的切片 利用标尺 基于参考线的切片 （选择切片工具） 先选个一个整个的切片， 切片选择工具-- 属性面板中有 “划分” --可以等分数平分切图 导出切片： 文件--...CSS Reset 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化) normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。...样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。
常见块级元素、行内元素、行内块元素的特点和区别 块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%； 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...（如div下可包含div） 行内元素（常见的行内元素a,span.img） 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签（如a标签内包含a标签） 行内块元素 行内块元素包含块级元素和行内元素的特征...3. css3新增伪类 p:first-of-type 选择属于父元素的首个p元素 p:last-of-type 选择属于父元素的最后一个p元素 p:only-of-type 选择属于父元素的唯一...（或者把其中一个margin改为padding） 解决高度塌陷 阻止元素被浮动元素覆盖 5....初始化css的方式 * { padding：0； margin：0； } 12. 如何使英文单词发生词内断行 word-wrap:break-word。
以下是一个简单的代码案例演示，演示如何使用CSS盒子模型来控制元素的大小和位置： HTML 代码： Hello World!...上外边距 + 下外边距 如何调整盒子的大小和位置？...: #ccc; } 如何使一个盒子在其容器中水平居中？...伪元素用于表示元素的某个部分，可以在元素内部插入一些特殊的内容，并用CSS来控制这些内容的样式。 简单来说，伪类用于描述元素的状态，而伪元素用于描述元素的一部分。...可以使用伪类和伪元素来精确控制某些元素的样式，从而实现更加复杂的效果。 什么是BFC？如何创建BFC？
领取专属 10元无门槛券
手把手带您无忧上云
