css基础 选择器 id选择器 #id值{} 通配符选择器 *{} 群组 选择器1,选择2{} 后代 选择器1... 字体加粗 font-weight 字体大小 font-size 字体样式 font-style 控制字体...text-decoration 行高 line-height 首行缩近 text-indent 表格属性 ...浮动特性 float:left; 怎样把行元素变成块元素 float 怎么解决高度塌陷 1.让父元素浮动... 2.加块级子元素 让子元素clear:both 3.给父元素设置高度 4.设置父元素的overflow值为auto或者hidden
块元素 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为： 支持全部的样式 如果没有设置宽度，默认的宽度为父级宽度100%...好了，使用display: inline-block 将div转为行内块元素之后的确可以将两个div放到一行了。...） 宽高由内容决定 盒子并在一行 代码换行，盒子之间会产生间距 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式 ---- 下面代码演示如下： ?...解决内联元素间隙的方法 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size 内联块元素 内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的...它们在布局中表现的行为： 支持全部样式 如果没有设置宽高，宽高由内容决定 盒子并在一行 代码换行，盒子会产生间距 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
强调，表示内容的重要性 em：斜体强调标签，更强烈的强调，表示内容的强调点 1.3 语义化 HTML 中的元素、属性及属性值都拥有某种含义，如有序列表用 ol，无序列表用 ul....语义化好处： 了解每个标签和属性的含义 思考什么标签最适合描述这个内容 不使用可视化工具生成 1.4 src 和 href 的区别 src 指向的内容会嵌入到文档当前标签所在的位置，而 href 是用于建立这个这个标签与外部资源之间的关系...属性取值过程 某些属性会自动继承父元素的计算值，除非显式指定一个值。.../p/7dadcc458410 2.6 块级元素与行级元素的区别 块级 行级 不和其他盒子并列摆放 可以和其他行级盒子一起放到一行 适应所有的盒模型属性 盒模型中的 width、height 不适用...2.9 Grid 布局 display: grid 使元素生成一个块级的 Grid 容器 使用 grid-template 相关属性将容器划分为网格 设置每一个子项占哪些行/列 暂时只是初略了解，之后还是得正式学
CSS(二) 發佈於 2018-06-24 这一篇讲解在 CSS 中与字体和文本相关的属性。...在上面的示例中，浏览器将首先尝试使用 Source Sans Pro。如果不可用，它会尝试使用 Arial。如果也不可用，它将使用浏览器的 sans-serif 字体族中的可用字体。...6 种 font-size 可用取值 像素(pixel) font-size: 20px; em: 相对于父元素的 font-size font-size: 1.2em; rem: 相对于根元素的...font-size(即 html 元素) font-size: 1.2rem; 百分数(percentage): 相对于父元素的 font-size font-size: 90%; 相对关键字...注意: line-height 属性也可以放到 font 简写属性里，写法为在 font-size 后加一个 / ，再跟 line-height 的值。
本文，我们将探讨 CSS 中使用 REM（Root EM）。 CSS 中 REM 是什么？ REM 代表 font size of the Root element，即 Root EM。...REM 是值/数据类型长度的值。长度的另外一个值是我们老朋友 - 像素 px。每个接受长度作为值的属性都接受 REM 值。比如：margin, padding, font-size 等。...更多的内容，参考 MDN。 当你使用这些长度的时，你可以确定它们的大小始终大致相同。当你知道确切的尺寸的时候，这很有用。...EM 的定义： 父元素定义的 font-size 值 子元素相对父元素 font-size 处理长度值 比如： <...但是有一个不同的地方 - 样式优先级，:root 优先级大于 html 1 rem 代表根元素的 font-size。这就意味着 1 rem 在你整个代码中都是固定的值。
display: none：彻底隐藏元素，元素从文档流中消失，既不占据空间也不能交互，也不影响布局 z-index: -9999：将层级放到底部，被覆盖，看起来隐藏 transform: scale(...",相对根节点 html 的字体大小来计算，CSS3 新增的属性 # 块级元素水平居中的方法 margin: 0 auto 水平居中 <body...，此时的 相对 是相对于正常文档流的位置 absolute 相对于最近的非 static 定位祖先元素的偏移，来确定元素位置 如一个绝对定位元素的父级和祖父级都为 relative，会相对父级来产生偏移...，也叫 CSS 精灵，是一种 CSS 图像合成技术，开发人员往往将小图标合并在一起后的图片称作雪碧图 使用工具将多张图片打包成一张雪碧图，并为其生成合适的 CSS，每张图都有相应的 CSS 类，该类定义了... # 盒模型 盒模型是什么 当对一个文档进行布局时，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子 CSS 决定这些盒子的大小、位置以及属性
行内元素设置width，height属性无效，它的长度高度主要根据内容决定。 块级元素可以设置margin和padding属性。行内元素的margin和padding属性。...1、css继承：设置父级元素的样式，其子级元素的样式会和父级元素一样； 2、不可继承的属性： display、margin、border、padding、background、height、min-height...解决文本溢出问题，我们需要设置两个属性： white-space: nowrap ，强制文本在一行内显示 overflow: hidden ，将溢出内容改为隐藏 { white-space: nowrap...; overflow: hidden; } 补充：若想将溢出内容显示为省略标记......最后我们还需要设置text-overflow属性： text-overflow: ellipsis ，将文本溢出内容显示为省略标记...计算公式：1 ÷ 父元素的font-size × 需要转换的像素值 = em值 EM特点： em的值并不是固定的； em会继承父级元素的字体大小 注意：任意浏览器的默认字体高都是16px。
：分段，段前有比较大的空白。 3.URL / 表示网站根目录 ../ 表示父目录 ../../ 表示父目录的父目录 ....CSS有三种方式： （1）元素内嵌 直接将样式写入元素的style属性中。适用于样式没有可复用性的场合。...（3）外部引用 将css内容写入css后缀的样式文件，然后在页面中引用，在head中加入。... 将内容放到层中，整体处理，整体移动 div将所有内容包成一个方块。...将内容放在一个矩形的区块中，会影响布局 （2）span：块 span只是把一段内容定义成一个整体进行操作，但不影响布局和显示。
: bolder; 规定文字大小的属性 格式：font-size: 30px; 单位：px（像素 pixel） 注意点： 通过font-size设置大小一定要带单位， 也就是一定要写px 快捷键fz font-size...间接选中就是指继承 补充内容 优先级之important 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高 !...如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高 标签理解 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级...文本级的标签 span p buis strong em ins del ... 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素 什么是块级元素, 什么是行内元素?...块级元素 独占一行 如果没有设置宽度, 那么默认和父元素一样宽 如果设置了宽高, 那么就按照设置的来显示 行内元素 不会独占一行 如果没有设置宽度, 那么默认和内容一样宽 行内元素是不可以设置宽度和高度的
因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前1-12个CSS重难点整理出来，具体内容如下： CSS选择器与优先级 CSS中可继承与不可继承属性有哪些 display的...2、CSS中可继承与不可继承属性有哪些 可继承属性 字体系列的属性：font-family、font-weight、font-size、font-style 文本系列属性：text-indent、text-align...block 设置元素为块级元素，块级元素可以独占⼀⾏，可设宽⾼，默认宽为父元素宽。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。...不足：代码不美观 将元素的父元素设置font-size:0; 。...同时需要单独给元素自身加上font-size样式 将元素的父元素设置 letter-spacing:-8px; 同时需要将元素自身加上letter-spacing:normal; 对于单张图片产生的空隙
前言： 本篇文章主要分享 CSS 与 JavaScript 基础面试题。CSS 和 JavaScript 都是前端基础知识，是前端学习中一定要学的内容，也是前端面试中必不可少的内容。...在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为 content-box，即标准盒模型； 如果将 box-sizing 设为 border-box 则用的是IE...CSS 优先级算法如何计算？ 相关知识点： CSS的优先级是根据样式声明的特殊性值来判断的。...active 声明放到 :link 和 :hover 之后。...默认值为auto，表示继承父元素的align-items 属性，如果没有父元素，则等同于stretch。 14. 用纯 CSS 创建一个三角形的原理是什么？ 采用的是相邻边框连接处的均分原理。
（没有需要插入的内容时可以将 content 属性的值定义为空""）。...与 ::after 相似，::before 中也需要使用 content 属性来定义要追加的内容，而且在 ::before 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content...css的继承：就是给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。...3.根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。 转换 当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。...11、样式优先级 参考答案： 样式类型 样式类型分为三类 行间 我的行间CSS样式。
变粗变大加宽，程度与级数反比 ● 二级标题标记 将字体变粗变大加宽 ● 三级标题标记 将字体变粗变大加宽... ● 四级标题标记 将字体变粗变大加宽 ● 五级标题标记 将字体变粗变大加宽 ● 六级标题标记 将字体变粗变大加宽...Style Sheet)层叠样式表 CSS能够真正做到网页表现与内容分离的一种样式设计语言。...示例： div.note { font-size:14px; } /* 所有class属性值等于（包含）"note"的div对象字体尺寸为14px */ .dream { font-size:14px...示例： .td1,div a,body { font-size:14px; } td,div,a { font-size:14px; } 常见属性 字体属性 Font Properties
一、CSS 字体文本样式 1、CSS 字体设置 CSS 字体设置 : 大小设置 : font-size 属性值 的单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ; font-size..., 可以设置 文本对齐方式 , 为标签设置该 CSS 样式 , 标签内的内容就会使用相应的对齐方式 ; text-align 属性 取值 : left : 左对齐 , 该值是默认值 ; right...: span 标签可以 在一行放置多个进行显示 , 对应 行内标签 ; 块级元素 特点 : 独占一行 : 块级元素 会 独占父容器 的一行 , 宽度默认充满父容器 ; 大小可控 : 标签 的 高度 ,...转换为 块级元素 */ display: block; } 行内元素 -> 块级元素 : 在 CSS 样式中设置属性值 display: inline; , 可以 将 块级元素...: 在 CSS 样式中设置属性值 display: inline-block; , 可以 将 块级元素 或 行内元素 转换为 行内块元素 ; div { /* 块级元素 或
CSS的继承性指的是子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 恰当地使用继承可以简化代码，降低CSS样式的复杂性。...比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。...子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性） 1.4.3、CSS优先级 ?...父级 子级{属性:属性值;属性:属性值;} .class h3{color:red;font-size:16px;} ? 2.3.1.2、注意 当标签发生嵌套时，内层标签就成为外层标签的后代。...2.3.2、 子元素选择器 子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素，其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
center| right 内容的水平对齐方式 text-indent:2em; 首行缩进(1em = 一个汉字的长度) color:red; 文字颜色 基础选择器 标签选择器 标签{属性：值;}...a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态 ：focus...方法二： 将元素高度设置为0, 使用内边距将盒子撑开，给盒子使用overflow:hidden; 将文字隐藏。...通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。 ? 工作原理： CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。...---- CSS滑动门 ? 边上是这种圆弧型的或者其他形状的，可以变换长度的样式。 特点：浮动之后宽度不是父盒子的宽度，而是内容撑开的宽度。 <!
父节点可以折叠起来 2.用户可以通过拖放的操作，将元素从左侧拖放到右侧。如果是拖的父节点元素，那么需要把它子节点的元素一并拖到右边 3.元素放到右侧，右侧可以接受元素的区域有2种可能。...实现拖动父节点时，其下面的子节点元素也要拖放到右边。如果是拖动的子节点元素，就在右边直接显示子节点元素。...父节点和子节点是相对的，因为左侧树形结构的节点可以是无限级的，所以一个元素既可能是子节点元素，也会是父节点元素。通过监听鼠标的mousedown和mouseup事件，来判断用户在拖动元素。...({ "display": "block", "height": 0 }); //将点击的元素内容复制 clickElement = $(this)....完成“放”的操作。可以从上图看出，我是将元素的上边左边和下边缘的左边存到一个数组里面。然后在“拖”的过程中，一直记录了拖动的左边，放到右侧时，就可以判断当前元素将要放的位置。具体可以下载代码查看。
定宽块级元素水平居中（方法二） 对于开启定位的元素，可以通过 left 属性 和 margin 实现。...定宽块级元素水平居中（方法三） 当元素开启绝对定位或者固定定位时，left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。...右边列宽度为父级 100%减去左列的宽度。...使中间自适应的宽度为父级容器减去两个定宽的列。...左右两列脱离文档流，并通过偏移的方式到达自己的区域； (2). 使中间自适应的宽度为父级容器减去两个定宽的列； (3). 通过外边距将容器往内缩小。
文本类 “text-top，指的是盒子的顶部和父级内容区域的顶部对齐，即与 content-area 顶部对齐。...text-bottom，指的是盒子的底部和父级内容区域的底部对齐，即与 content-area 底部部对齐。 例子如下： ?...） （3）将 line-height 设置为 0 （利用 line-height 为 0 时，基线上移） （4）将 font-size 设置为 0 （如果 line-height 的值为相对值） （5...2、“空白节点” 可以受具有继承特性的 CSS 属性影响，于是，我们可以通过其他东西来做调整，让字符的中线和字符内容中心线在一起，或者说在一个位置上就可以了。...那如果父级的高度是随着内容的变化而变化的怎么办？此时无法给父级设置一个特定的值，也不能使用百分比，因为 line-height 是根据字体的大小来计算的。
初学者必备 Html属性不能重复使用，但css的属性是后写的替换先写的 子级标签属性会继承父级标签属性 子级标签属性与父级冲突，子级优先 布局级别就是排队级别：默认布局级，浮动布局级，定位布局级 默认布局级下标签间的...margin值共用 浮动布局级下margin值相加 绝对定位安置位置参考文档 相对定位安置位置参考本身 固定定位安置位置参考窗体 宽度属性认知： 默认布局级，块元素有默认宽度，宽度由父级决定，因此建议宽度尽量设置给父级...浮动布局级，块元素无默认宽度，宽度由子级支撑，但宽度可相对父级设置百分比。 高度属性认知： 父级有高度设置时，子级可溢出，父级无高度设置时由子级内容支撑，因此建议高度值尽量设置给子级，易控。...CSS中可继承的属性 所有元素可继承：visibility和cursor 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color...> 标签选择器 CSS派生选择器优先级的计算规则如下： ID选择器 加100 类选择器 加10 标签选择器 加1 将数值累加，就得到每个CSS定义的优先级的值， 数值大的CSS样式的优先级高。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
