在前端工程师的日常工作中,使用 CSS 元素选择器是稀松平常的事;无论你是编写一般的 CSS 还是需要经过编译的 SASS,SCSS,LESS等,最终都被编译成一行一行的 CSS 样式属性,最终交给浏览器解析并套用...>p,最后套用,但实际上浏览器解析 CSS 的顺序是由右到左的 p>h4>.class>#id。...也可以换个方式思考:在 HTML 的结构中,一个元素可以有无数个子元素,但只能有一个父元素,由子找父(由下往上)搜寻绝对是比较快的。...套用规则 最后是套用规则。浏览器会遵循以下顺序和样式规则权重套用所有的样式规则: 浏览器的预设值 浏览器的使用者偏好设定 开发者定义的 CSS inline style 加上 !...CSS 效率 实际上浏览器在这里已经完成了优化机制;浏览器会自动将状态一致的元素做样式快照。
什么是 css 元素溢出当子元素(标签)的尺寸超过父元素(标签)的尺寸时,此时需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来完成。...style> .box1{ width: 100px; height: 200px; background: red; /* 在父级上设置子元素溢出的部分如何显示...小结overflow样式属性是设置子标签溢出的显示方式常用使用overflow:hidden;来解决元素溢出
2、绝对定位实现垂直居中 (1)demo, 使用前提是块级元素的宽高固定 我是标题 <div...不用relative的原因是已经用了绝对定位了,所以只好用负margin。结果如图 ? (3)块级元素的宽高不固定,就不能用负margin了(margin使用百分比是相对于父元素的宽度)。...我们可以用css3的一个transform的属性,transform是相对自身的宽高来做偏移的。 ?...遇坑:1、当然使用绝对定位也可以实现这个效果 2、伪元素设置display:block是有问题,需要设置为inline-block ? 3、使用伪元素是为了减少标签 ?...: table-cell,box不再是块级元素,如果不设置宽度就会收缩。
快级元素:在html中,,,,,就是块级元素。 设置display:block就是将元素显示为块级元素。 ...将行内元素a转换为块级元素,从而使a元素具有块级元素特点 a{display:block;} 行内元素:在html中,,,,,,,就是典型的行内元素 display:inline 内联块状元素:同时具备内联元素,块状元素的特点,代码:display:inline-block ...颜色可以设置为十六进制颜色 若想为p标签单独设置下边框,而其他三边都不设置边框样式: div{border-bottom:1px solid red;} 宽度和高度:css...填充:元素内容与边框之间是可以设置距离的,称之为“填充”;填充也可分为上,右,下,左(顺时针) div{padding:20px 10px 15px 30px;} 四个方向分别为 padding-top
那么下面有一个想法,就是div这个块元素能不能设置为同一行呢? 方法当然是有的,就是转化为 行内块元素,如下: ?...) 宽高由内容决定 盒子并在一行 代码换行,盒子之间会产生间距 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式 ---- 下面代码演示如下: ?...解决内联元素间隙的方法 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0,内联元素自身再设置font-size 内联块元素 内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的...display属性 display属性是用来设置元素的类型及隐藏的,常用的属性有: 1、none 元素隐藏且不占位置 2、block 元素以块元素显示 3、inline 元素以内联元素显示 4、...DOCTYPE html> div{
device-width, initial-scale=1.0"> 7 8 获取css...font-style: italic; 42 } 43 44 45 /** 46 * 获取css...样式 47 * ele 元素 48 * prop 属性名 49 **/ 50 function getStyle(ele, prop
一、为什么使用CSS有效的传递页面信息,使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户,可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容,具有良好的用户体验。...italic bold 36px "宋体";font属性:字体属性的顺序:字体风格→字体粗细→字体大小→字体类型三、文本样式属性含义举例color设置文本颜色color:#00C;text-align设置元素水平对齐方式
DOCTYPE html> *{padding: 0px;margin: 0px;}...内容的宽高为100px*/ .box2 { width: 96px; height: 96px; border: 2px solid red; } /*这个是元素的宽高为...*/ .box3 { width: 100px; height: 100px; background-color: yellow; /*这个是内容的宽高为200px*/...} .box4 { width: 100px; height: 100px; margin: 50px; background-color: red; /*这个是元素的宽高为...300px,元素空间的宽高为400px。
前言当我们在设计网页时,经常需要对网页中的元素进行定位,以便它们出现在我们想要的位置。在 CSS 中,我们可以使用不同的定位属性来定位元素。...一、position: static这是元素的默认定位属性,也就是元素在文档流中的位置。如果你没有指定元素的定位属性,那么元素就是 static 定位。...二、position: relative这个属性相对于元素的默认位置进行定位。你可以使用 top、bottom、left 和 right 属性来调整元素的位置。...div { position: relative; top: 20px; left: 10px;}三、position: absolute这个属性将元素从文档流中删除,并相对于其最近的已定位祖先元素进行定位...如果没有已定位的祖先元素,则相对于文档的 body 元素进行定位。你可以使用 top、bottom、left 和 right 属性来调整元素的位置。
仅供学习,转载请注明出处 css元素溢出 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。...DOCTYPE html> div{...,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。...当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。...当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。
伪元素技巧 在 CSS 伪元素基本用法一文中讲述了伪元素的基础功能,本章学习一些进阶功能,看看伪元素能实现哪些方便好用的功能。...常见的用法是在父元素结束之前,统一引入一个元素 clear: both 用来清除浮动。...为了兼容 IE 最好用 overflow:hidden,缺点是元素会被截断。...''; position: absolute; top: -20px; right: -20px; bottom: -20px; left: -20px; } 还有一种不使用伪元素扩大可点击范围的方式是使用...,非常有趣,既能减少 DOM 元素数量,还能用 CSS 实现一部分 JS 的功能,非常酷炫,后面见到有趣的用法会不断记录。
什么是伪元素 伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 因为伪元素并不在文档树中,所以通过JS,也抓取不到伪元素,也不能给它绑事件。...语法 伪元素以::开头。 在CSS1和CSS2中,伪元素和伪类一样,都是用:开头。但在CSS3中,伪元素以::开头,用以和伪类进行区分。 IE8不支持::。因此如果要兼容IE8,只能用:。...::first-line 选择当前元素的第一行。 需要注意的是,其只作用于块级元素[注1]。...外链.png demos 那些 CSS 偽元素可以幫你做的 10 個效果 基于单个 div 的 CSS 绘图 注 块级元素指display的值为block, inline-block, table-cell...相关文章 CSS伪元素的一些坑
css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center 居中显示 2.定宽块状元素水平居中.../52820794 css使元素水平数值都居中 1. ...绝对定位下top left right bottom 都设置0,再margin: auto 就可以将元素垂直水平居中 css垂直居中 参考:http://blog.zhourunsheng.com/2012.../03/css-元素垂直居中的-6种方法/ 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins...本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。 Line-Height Method ?
代码示例效果如上图 默认元素排列: 从左到右 默认:从左到右 3 设置元素从右到左...backgroun-color: #eee;width:60px;height:40px;margin-right:20px;">3 2.2 从右到左 dir="rtl" 设置元素属性...40px;margin-right:20px;">3 官方资料 - MDN: https://developer.mozilla.org/en-US/docs/Web/CSS.../float https://developer.mozilla.org/en-US/docs/Web/CSS/direction https://developer.mozilla.org/en-US
前言 本文绝大部分摘自 CSS 权威指南 第三版 基本概念 正常流 (Normal Flow): 有时会被翻译为 文档流 或者 普通流,指文档从左至右、从上至下的显示内容,是传统的 HTML 文档布局。...下面是 CSS3 中支持的盒模型计算方式(CSS2种只支持默认的) content-box(默认值): width 和 height 属性只作用到 Content Area 的长宽,在 Content...浮动(float) MDN float w3 float 定义 下面是MDN上关于 float 的定义 The float CSS property specifies that an element...下面是清除浮动的几种方式,更多方式可以参考 这里 : 使用带clear元素的空属性 使用 伪元素 在父容器里添加 或者 定位 CSS 有三种基本的定位机制: 正常流、浮动和绝对定位。...需要注意的是 z-indexstatic 子元素会继承父元素的 ,子元素设置的 是相对于父元素的局部 。比如下面的代码:.p2 .c.p1 .c
一、CSS 字体文本样式 1、CSS 字体设置 CSS 字体设置 : 大小设置 : font-size 属性值 的单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ; font-size...宽度 , 内边距 , 外边距 可以自定义设置 ; 默认宽度 : 块级元素 默认 宽度 是 父容器 的 100% 宽度 ; 容器特点 : 块级元素 作为 容器 , 可以在其中 放置 块级元素 和 行内元素... , 行内元素特点 : 单行多个 : 在 一行 中 , 可以 设置显示多个 行内元素 ; 宽高无效 : 行内元素 的 宽高 设置是 无效的 , 以 子内容 的大小来确定 ; 默认宽度...: 行内元素 的 宽度 是 其本身 的 宽度 ; 容器特性 : 行内元素 作为 容器 , 只能 存放 文本 或 行内元素 , 不能存放 块级元素 ; 3、行内块元素 行内块元素 标签 是 特殊的标签 ,...: 显示样式 : 行内块元素 默认 都在一行中显示 , 每个元素之间会自动添加间隔 ; 宽高设置 : 行内块元素 的 默认宽高 是 元素本身的宽高 , 但是也可以设置宽高 ; 样式设置 : 行内块元素
前言 HTML元素按布局属性可以分为三种类型:块级元素、行内元素、行内块元素 这篇文章梳理一下他们的区别与联系 一、区别 1.块级元素 属性 默认独占一行 如果不设置宽度,默认是父级的宽度。...宽度随元素的内容大小而变化。 代码换行时,会出现间隔。解决方案:父元素设置font-size为0,子元素再设置具体的字体大小。...行内元素里面不可以嵌套块级元素 3.行内块元素 属性 不会独占一行,可以与其他非块级元素同行 可以设置全部属性 代码换行时,会出现间隔。...二、联系 可以通过css的display的属性来转换 block 块级元素 inline 行内元素 inline-block 行内块级元素 display: block; // 设置元素为块级元素...display: inline: // 设置元素为行内元素 display: inline-block; // 设置元素为行内块元素 三、常见标签 1.块级元素 div,p,ul,li(列表)
content="width=device-width, initial-scale=1.0"> Document 核心;2.块级元素和行内元素的区别?...2.1块级元素 独占一行 如果没有设置宽度, 那么默认和父元素一样宽 如果设置了宽高, 那么就按照设置的来显示 2.2行内元素 不会独占一行 如果没有设置宽度, 那么默认和内容一样宽 行内元素是不可以设置宽度和高度的...2.3行内块级元素 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素 –> Document <style type="text/<em>css</em>
伪元素 CSS 中可以利用伪元素给 DOM 元素添加特殊的样式。比如说,我们可以通过 :before 在一个元素前增加一些文本,并为这些文本添加样式。...CSS3 规范中要求使用双冒号(::)添加伪元素,用以区分伪元素和伪类,比如 ::before 是伪元素,:hover 是伪类。...:before & :after :before 和 :after 可以在元素前面或者后面插入内容,用 content 属性表示要插入的内容,这个虚拟元素默认是行内元素,可以配合其它样式使用。...: red; } 这时,:first-letter 实际获取的元素是 :before 中的 H。...要特别注意的是,background-image 会如同其他属性一样被忽略。
方法一 使用Order属性设置弹性盒对象元素的顺序。 示例:将3个元素按倒序显示 flex-direction: 值 描述 row(默认值) 主轴为水平方向,起点在左端。... 这是第二个元素 这是第三个元素... 方式二 使用display属性将元素生成为表格与表格行的关系 值 描述 table-row-group 此元素会作为一个或多个行的分组来显示(类似 表头)。... 这是第二个元素 这是第三个元素
领取专属 10元无门槛券
手把手带您无忧上云